原文地址: Hexo + Github 个人博客设置以及优化

一、博客设置

分类、标签云、关于等页面

在站点目录下分别执行:

hexo new page "categories"  # 新增分类
hexo new page "tags" # 新增标签
hexo new page "about" # 新增关于

可以在对应的 index.md 中添加 comments: false 来关闭评论功能;

然后再主题配置文件 _config.yml 中打开注释:

menu:
首页: / || home
关于: /about/ || user
标签: /tags/ || tags
分类: /categories/ || th
归档: /archives/ || archive

网站背景 canvas_nest[背景多个点间随机连线]

src: theme-next-canvas-nest

主题配置文件中配置脚本:

canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest-nomobile.min.js

并启用:

canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: "0,0,255" # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines

信息栏头像

主题配置文件 _config.yml 中编辑:

avatar: [头像路径]

修改文章底部带 # 的标签

修改模板 /themes/next/layout/_macro/post.swig, 搜索 rel="tag">#, 将 # 换成 <i class="fa fa-tag"></i>

文章加密访问

TODO: 发布后无效

themes/*/layout/_partials/head/head.swig 中在 </script> 前添加代码:

(function(){
if('{{ page.password }}'){
if (prompt('请输入密码') !== '{{ page.password }}'){
alert('密码错误');
history.back();
}
}
})();

写文章时加入:

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---

添加博客项目 README.md, 跳过渲染

在博客配置文件中设置:

skip_render: README.md

字数统计+阅读时间

src: hexo-symbols-count-time

  1. 安装包
npm install hexo-symbols-count-time --save
  1. 在博客配置文件中启用:
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
  1. 在主题配置文件中设置:
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4 # Average Word Length (chars count in word). Default: 4.
wpm: 275 # Words Per Minute. Default: 275.

聊天模块 DaoVioce

网站运行时间

themes/layout/_parrials/footer.swing 中添加:

<span id="sitetime"></span>
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var t1 = Date.UTC(2018,06,07,12,00,00); // 设置建立网站的时间
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
}
siteTime();
</script>

网站的 favicon

主题配置文件中设置:

# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine them on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
#small: /images/favicon-16x16-next.png
small: /images/Memento.ico
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

NexT 主题添加多字体

TODO: 首页 index.html 会出现异常,无法用 gulp 压缩

  1. 修改 source/css/_variables/base.styl 文件中的字体获取方法:
get_font_family(config) {
custom_family = hexo-config('font.' + config + '.family')
// 在这里把引号去除
return custom_family is a 'string' ? unquote(custom_family) : null
}
  1. 再修改主题配置文件:
global:
# external: true will load this font family from host.
external: true
family: '"Consolas", "Helvetica Neue", Helvetica, Arial'

博文置顶

参考:

  1. hexojs/hexo-generator-index
  2. hexo-generator-index-pin-top
  3. 解决Hexo置顶问题

卸载原装的 hexo-generator-index, 并安装 hexo-generator-index-pin-top:

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在文章中添加 top:

---
title: 2018
date: 2018-10-25 16:10:03
top: 10
---

top 值越大位置越靠前;

设置置顶标记, 定位 /themes/next/layout/_macro/post.swig<div class="post-meta"> 标签下:

{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

顶部进度条

参考: theme-next-pace

  1. 将项目中的 css 和 js 文件下载放置到 /themes/next/source/lib/pace/ 目录下;
  2. 在主题配置文件中启用:
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: true
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
pace_theme: pace-theme-minimal

本地搜索

参考: hexo-generator-searchdb

npm install hexo-generator-searchdb --save

在博客配置文件中添加:

search:
path: search.xml
field: post
format: html
limit: 10000

然后在主题配置文件中启用本地查询:

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false

返回顶部+当前浏览进度

next 主题配置文件中启用:

back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

右上角/左上角的 Fork me on github

在主题配置文件中启用:

# Follow me on GitHub banner in right-top corner.
github_banner:
enable: true
permalink: https://github.com/Memento1990
title: Follow me on GitHub

内容分享, AddThis

TODO: Firefox 浏览器下失效

评论模块

  1. valine
  2. gitment
  3. gitalk
  4. gitter
  5. LiveRe(来必应)

数据统计与分析 不蒜子

在主题配置文件中启用:

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

二、文章设置

文章末尾结束标记

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容:

<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文至此结束<i class="fa fa-heartbeat"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

接着打开 \themes\next\layout\_macro\post.swig 文件, 在 post-body 之后, post-footer 之前添加代码(post-footer之前两个DIV):

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

最后再主题配置文件中启用:

# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

复制文本版权信息

文章底部版权信息

网页地址 hexo-link

参考: hexo-addlink

安装

npm install hexo-addlink --save

在博客配置文件中进行设置:

addlink:
before_text: hello # text before the post link
after_text: bye # text after the post link

增加首页中显示"阅读全文"

在主题配置文件中启用:

# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150

三、优化设置

修改字体加载源

修改主题配置文件:

font:
enable: true
# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host: //fonts.lug.ustc.edu.cn # 中科大
# //fonts.geekzu.org # 极客族
# //fonts.css.network # 捷速网络 香港

博文压缩

安装 gulp 相关包:

npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin gulp --save

在 Hexo 站点根目录下新建 gulpfile.js 脚本文件, 代码:

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var Hexo = require('hexo'); // 清除public文件夹
gulp.task('clean', function () {
return del(['public/**/*']);
}); // 利用Hexo API 来生成博客内容, 效果和在命令行运行: hexo g 一样
// generate html with 'hexo generate'
var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function (cb) {
hexo.init().then(function () {
return hexo.call('generate', {
watch: false
});
}).then(function () {
return hexo.exit();
}).then(function () {
return cb()
}).catch(function (err) {
console.log(err);
hexo.exit(err);
return cb(err);
})
}) // 压缩 public 目录 css
gulp.task('minify-css', function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
}); // 压缩 public 目录 html
gulp.task('minify-html', function () {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}).on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('./public'))
}); // 压缩 public/js 目录 js
gulp.task('minify-js', function () {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
}); // 压缩public目录下的所有img: 这个采用默认配置
gulp.task('minify-img', function () {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin())
.pipe(gulp.dest('./public/images'))
}) // 同上,压缩图片,这里采用了: 最大化压缩效果。
gulp.task('minify-img-aggressive', function () {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin(
[imagemin.gifsicle({ 'optimizationLevel': 3 }),
imagemin.jpegtran({ 'progressive': true }),
imagemin.optipng({ 'optimizationLevel': 7 }),
imagemin.svgo()],
{ 'verbose': true }))
.pipe(gulp.dest('./public/images'))
}) // 执行顺序: 清除public目录 → 产生原始博客内容 → 执行压缩混淆
gulp.task('build', gulp.series('clean', 'generate',
gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-img-aggressive')), function (cb) {
}); gulp.task('default', gulp.series(['build']))

然后每次执行 gulp 命令后就会自动执行 clean, generate, [同步执行相关压缩方法]...

四、其他设置

文章开头 Front-matter

参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址

References

  1. hexo 官网
  2. NexT 主题
  3. NexT 主题官网
  4. hexo的next主题个性化教程:打造炫酷网站
  5. 【持续更新】最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析
  6. Hexo Next 博客自定义配置
  7. 打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化
  8. NexT 主题优化
  9. 主题配置

Hexo + Github 个人博客设置以及优化的更多相关文章

  1. Linux下使用 github+hexo 搭建个人博客04-next主题优化

    上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...

  2. Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

    上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护. ...

  3. hexo+github搭建博客跳坑

    hexo+GitHub搭建博客过程中,hexo安装成功,可以启动和运行,但是访问localhost:4000却无法访问,弄了半天,最后发现是福昕阅读器占用了4000端口 解决办法: 采用命令hexo ...

  4. hexo+github搭建博客(超级详细版,精细入微)

    # 前言 你了解[Hexo]( https://hexo.io/zh-cn/ "Hexo官网")吗? Hexo是一个静态博客框架,基于Node.js,将Markdown文章通过渲染 ...

  5. 使用hexo+github搭建博客

    https://blog.csdn.net/qq_36667170/article/details/105789610这一篇已经写得很详细了,下面的内容是我操作的时候遇到的问题及解决方法. 1.下载N ...

  6. Hexo+Github个人博客搭建 | 实战经验分享

    概述 第一次尝试搭建属于自己的博客,并且成功了,非常开心. 很久之前就想搭建一个博客,可是也一直没有行动,最近在逛B站的时候发现一个up主(CodeSheep)的一个视频 <手把手教你从0开始搭 ...

  7. Hexo+Github搭建博客

    要使用Hexo,需要在你的系统中支持Nodejs以及Git,如果还没有,那就开始安装吧! 安装Node.js 下载Node.js 参考地址:安装Node.js 安装Git 下载地址:http://gi ...

  8. Mac 上搭建基于 Hexo + GitHub 个人博客

    环境配置 本人电脑系统:macOS Node.js 生成静态页面.安装Node.js Git 用于将本地 Hexo 内容提交到 Github.Xcode自带Git(前提:macOS已经安装了Xcode ...

  9. Hexo+Github搭建博客问题

    搭建过程如下:   http://www.cnblogs.com/fengxiongZz/p/7707568.html   问题:第6步,发布上传代码一直不成功(没异常,也没成功).   解决:修改_ ...

随机推荐

  1. U-boot中SPL功能和源码流程分析

    在U-boot目录下,有个比较重要的目录就是SPL的,SPL到底是什么呢?为什么要用它呢? SPL(Secondary programloader)是uboot第一阶段执行的代码.主要负责搬移uboo ...

  2. [EXP]Joomla! Component Easy Shop 1.2.3 - Local File Inclusion

    # Exploit Title: Joomla! Component Easy Shop - Local File Inclusion # Dork: N/A # Date: -- # Exploit ...

  3. [EXP]McAfee ePO 5.9.1 - Registered Executable Local Access Bypass

    # Exploit Title: McAfee ePO 5.9.1 Registered Executable Local Access Bypass # Date: 2019-03-07 # Exp ...

  4. 《JavaScript高级教程》学习笔记一、变量和数据类型

    JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...

  5. Android的Touch事件分发机制简单探析

    前言 Android中关于触摸事件的分发传递是一个很值得研究的东西.曾不见你引入了一个ListView的滑动功能,ListView就不听你手指的指唤来滚动了:也不知道为啥Button设置了onClic ...

  6. IMEI

    IMEI(International Mobile Equipment Identity)是国际移动设备身份码的缩写,国际移动装备辨识码,是由15位数字组成的"电子串号",它与每台 ...

  7. interface21 - web - Log4jConfigListener(Log4j加载流程)

    前言 最近打算花点时间好好看看spring的源码,然而现在Spring的源码经过迭代的版本太多了,比较庞大,看起来比较累,所以准备从最初的版本(interface21)开始入手,仅用于学习,理解其设计 ...

  8. [java初探外篇]__关于StringBuilder类与String类的区别

    前言 我们前面学习到String类的相关知识,知道了它是一个字符串类,并且了解到其中的一些方法,但是当时并没有太过注意到String类的特点,今天就StringBuilder类的学习来比较一下两者的区 ...

  9. ConfigUtil读取配置文件工具类

    ConfigUtil package com.sso.util; import java.io.FileNotFoundException; import java.io.IOException; i ...

  10. JavaScript之radio遍历

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...