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

安装包

npm install hexo-symbols-count-time --save

在博客配置文件中启用:

symbols_count_time:

  symbols: true

  time: true

  total_symbols: true

  total_time: true

在主题配置文件中设置:

# 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 压缩

修改 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

}

再修改主题配置文件:

global:

    # external: true will load this font family from host.

    external: true

    family: '"Consolas", "Helvetica Neue", Helvetica, Arial'

博文置顶

参考:

卸载原装的 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

将项目中的 css 和 js 文件下载放置到 /themes/next/source/lib/pace/ 目录下;
在主题配置文件中启用:

# 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 浏览器下失效

评论模块

valine
gitment
gitalk
gitter
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