Hello Memo

0%

Hexo Next 主题安装、配置及美化

发表于 分类于 阅读次数： Valine：
本文字数： 19k 阅读时长 ≈ 18 分钟
之前博客因为各种事情已经年久失修了，部分图标已经失效了，也不支持主题自动切换。趁现在有点时间，对博客做一下升级和重构，顺带支持一下主题切换和平滑升级。

文章内容有点多，推荐使用 CTRL+F 快速查找

前因

  • 博客许久之前就上线了，但是当初比较简单，隐藏的问题有点多。随着时间推移，问题一个一个的暴露出来了(/□＼*)

必须支持的功能

为了现代化和可持续发展

  • 暗黑主题
  • 主题跟随系统
  • 界面简洁
  • 可配置功能多
  • 主题持续更新
  • 可以做到主题平滑升级

选择 hexo-next-theme 的理由？

写又写不来，就只能这样子过过生活啦~

  • 支持暗黑模式
  • 主题跟随系统
  • 可配置功能多
  • 个性化程度高
  • 比较简洁
  • 文档简单易懂
  • Github 更新频繁（持续更新）
  • 其他社区支持的主题要么不够简洁，要么不定期更新，要么不支持暗黑模式

准备工作

安装 NodeJS

1
2
3
4
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
nvm install --lts

安装 Hexo

1
npm install hexo-cli -g

初始化项目

因为我们使用 Github Pages 作为部署方式，所以我们最好需要将项目名称建立为: <Github Username>.github.io
比如：iitii.github.io

1
hexo init <project name>

安装 Hexo-next-theme

  1. 进入项目文件夹
  2. git clone -b master https://github.com/theme-next/hexo-theme-next.git themes/next --depth=1
  3. 修改站点 _config.yml 里面的 theme 的值为 next

如果不在特别声明的情况下:

  • 站点配置文件指项目根目录下面的 _config.yml
  • 主题配置文件指主题文件夹下面的 _config.yml

配置主题

修改网站基本信息

  • 修改站点配置文件里面的 site 部分
1
2
3
4
5
6
7
title: 网站标题
subtitle: 网站副标题
description: 网站描述
keywords:
author: 作者
language: zh-CN #语言
timezone: "Asia/Shanghai" #时区

修改博客自动生成的链接

See: 永久链接（Permalinks）

  • 默认的链接太长了，而且修改文章标题的话，会丢失原来的访问次数（不是同一个链接）
  • 为了方便分享和管理，推荐设置成如下形式
1
2
permalink: :year/:month/:day/:second/
#permalink: :year/:month/:day/1/

文章按创建时间排序

1
2
3
4
5
6
7
8
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ""
  per_page: 10 # 每页数量
  order_by: -date

修改新建文章时的模板

自定义 hexo new 生成 md 文件的模板

  • 修改站点文件夹下面的 scaffolds/post.md 和 scaffolds/draft.md 如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
permalink: 
top: 0
password:
comments: 
copyright: true
tags:
categories: 
keywords:
description:
---

设置博客主题跟随系统主题

  • 修改主题配置文件的 darkmode 部分
1
2
# Dark Mode
darkmode: auto # dark|light|auto

修改网站图标

  • 修改主题配置文件的 favicon 部分
1
2
3
4
5
6
7
8
9
10
11
favicon:
  small: /images/site/16memo.ico
  medium: /images/site/32memo.ico
  apple_touch_icon: /images/site/96memo.png
  safari_pinned_tab: /images/site/memo.ico
  # small: /images/favicon-16x16-next.png
  # 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

修改菜单栏

  • 修改主题配置文件里面的 menu 部分

Github 的链接可以去掉或者换成自己的

1
2
3
4
5
6
7
8
9
10
11
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  Github: https://github.com/iitii || fab fa-github
  RSS: /atom.xml || fa fa-rss
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

修改边栏的位置

  • 修改主题配置文件里面的 sidebar 部分的 position
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
sidebar:
  # Sidebar Position.
  # position: left
  position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

边栏显示图像和社交信息

  • 修改主题配置文件的 avatar 和 social 部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  # url: #/images/avatar.gif
  url: /images/site/avatar.jpeg # 图片地址
  # If true, the avatar will be dispalyed in circle.
  rounded: true # 是否可旋转
  # If true, the avatar will be rotated with the cursor.
  rotated: true # 是否圆角

# Posts / Categories / Tags in sidebar.
site_state: true

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/iitii || fab fa-github
  E-Mail: mailto:ccmejx@gmail.com || fa fa-envelope
  Telegram: https://t.me/callmehelp || fab fa-telegram
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
  enable: true # 是否启用
  icons_only: false # 只显示图标
  transition: false

页脚设置站点建立时间

比如文章底部的: © 2018 – 2021

  • 修改主题配置文件 footer 部分的 since 的值为你想要的
1
2
footer:
  since: 2018 #设置站点建立的时间，默认为今年

修改页脚时间和作者之间的图标

  • 修改主题配置文件 footer 部分的 icon 的值为你想要的
1
2
3
4
5
6
7
footer:
  icon:
    name: fa fa-heart # 图标 See: https://fontawesome.com/icons
    animated: true # 是否有动画效果
    color: "#ff0000" #图标颜色

  copyright: # 不填写将以站点配置文件里面的作者填充

隐藏页脚的 “由 xxxx 强力驱动”

  • 修改主题配置文件 footer 部分的 powered 的值为你想要的
1
2
3
footer:
  # 隐藏 footer '由 HEXO 强力驱动'
  powered: false # false: 不显示 true: 显示

添加书签(记录阅读位置)

  • 修改主题配置文件 bookmark 部分
1
2
3
4
bookmark:
  enable: true # 是否启用
  color: "#222" # 颜色
  save: auto # auto: 自动保存 manual: 手动保存

侧栏回到顶部按钮

  • 修改主题配置文件 back2top 部分
1
2
back2top:
  enable: true # 是否启用

侧栏阅读进度提示

  • 修改主题配置文件 back2top 部分
1
2
3
back2top:
  # Scroll percent label in b2t button.
  scrollpercent: true # 是否显示阅读进度

类似加载条阅读进度提示

  • 修改主题配置文件 reading_progress 部分
1
2
3
4
5
6
reading_progress:
  enable: true # 是否启用
  # Available values: top | bottom
  position: bottom # top: 顶部 bottom: 底部
  color: "#37c6c0" #颜色
  height: 3px #高度

美化主题

文章添加居中模块

  • 文章内容 markdown 书写如下:
1
2
3
{% cq %}
就像这样
{% endcq %}

就像这样

自定义文件的路径

  • 修改主题配置文件 custom_file_path 部分
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  head: source/_data/head.swig #添加自定义内容在 head
  #header: source/_data/header.swig #添加自定义内容在顶栏
  #sidebar: source/_data/sidebar.swig #添加自定义内容在边栏
  #postMeta: source/_data/post-meta.swig #添加自定义文章的 meta 信息
  postBodyEnd: source/_data/post-body-end.swig #添加自定义内容在文章尾部
  footer: source/_data/footer.swig #添加自定义内容在页脚
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl #添加自定义css

鼠标点击出现小红心

请先配置自定义文件的路径

  1. 下载保存 love.js 到 source/js/love.js
  2. 在 source/_data/head.swig 添加以下内容
1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/love.js"></script>

文章加密访问

请先配置自定义文件的路径

  • 在 source/_data/head.swig 添加以下内容
1
2
3
4
5
6
7
8
9
10
11
<!-- 文章加密 -->
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>
  • 然后文章中添加：
1
password: password

如果 password 后面为空，则表示不用密码。

首页文章阴影(卡片化)效果

请先配置自定义文件的路径

  • 添加以下内容到 source/_data/styles.styl
1
2
3
4
5
6
// 主页文章添加阴影效果
.post-block {
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

避免链接和代码过长，而导致样式问题

请先配置自定义文件的路径

  • 添加以下内容到 source/_data/styles.styl
1
2
3
4
5
6
7
// 避免链接和代码过长，而导致样式问题
.post-block code {
  word-break: break-all;
}
.post-block a {
  word-break: break-all;
}

文章图片圆角

请先配置自定义文件的路径

  • 添加以下内容到 source/_data/styles.styl
1
2
3
4
// 图片圆角
.post-body img {
  border-radius: 1em 
}

修改文章内链接文本的样式

请先配置自定义文件的路径

  • 将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
  • 添加以下内容到 source/_data/styles.styl
1
2
3
4
5
6
7
8
9
// 将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

修改文章底部的标签的 # 为图标

  • 修改主题配置文件 tag_icon 部分
1
tag_icon: true # true: 显示为图标

修复暗黑模式下标签的样式

请先配置自定义文件的路径

  • 添加以下内容到 source/_data/styles.styl
1
2
3
4
5
6
// 适配暗黑模式下博客的 tag
.posts-expand .post-tags a {
  border-bottom: none;
  padding: 1px 5px;
  background: var(--content-bg-color);
}

文章底部添加文章推荐功能

  • npm install hexo-related-popular-posts
  • 修改主题配置文件 related_posts 部分为你想要的
1
2
3
4
5
6
7
related_posts:
  enable: true
  title: 要不看点其他的吧?.. # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5 # 最多显示数量
    PPMixingRate: 0.5 # 最大显示相似度

文章底部添加本文结束提示

请先配置自定义文件的路径

  • 添加以下内容到 source/_data/post-body-end.swig
1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>再接再厉-------------</div>
    {% endif %}
</div>

文章底部添加版权信息

请先配置自定义文件的路径

  • 添加以下内容到 source/_data/post-body-end.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% if page.copyright %}
<div class="my_post_copyright">
    <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
    <p><span>文章作者:</span><a href="/" title="访问 {{ config.author }} 的个人博客">{{ config.author }}</a></p>
    <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
    <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
    <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a></p>
    <p><span>许可协议:</span><i class="fab fa-creative-commons"></i>
        <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank"
            title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">
            署名-非商业性使用-禁止演绎 4.0 国际</a>
        转载请保留原文链接及作者。
    </p>
</div>
{% endif %}
  • 添加一下内容到 source/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
//   width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
//   background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

文章底部添加打赏按钮

  • 修改主题配置文件 reward 部分为你想要的
1
2
3
4
5
reward:
  wechatpay: /images/site/wechatpay2.png # 微信
  alipay: /images/site/alipay.png # 支付宝
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

页脚添加运行时间

请先配置自定义文件的路径

  • 添加如下内容到 source/_data/footer.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div>
<!--添加网站运行时间-->
<span>小破站已经在风雨中度过了</span>
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    function createtime() {
        const startTime = '09/27/2018 00:12:55',
            start = new Date(startTime)
        let mill = new Date() - start,
            seconds = Math.floor(mill / 1000),
            mins = Math.floor(seconds / 60),
            hours = Math.floor(mins / 60),
            days = Math.floor(hours / 24)
        const time = {
            seconds: seconds - mins * 60,
            mins: mins - hours * 60,
            hours: hours - days * 24,
        }
        for (const k in time) {
            time[k] = `${time[k]}`.padStart(2, '0')
        }
        document.getElementById("timeDate").innerHTML = ` ${days} 天`
        document.getElementById("times").innerHTML = ` ${time.hours} 小时 ${time.mins} 分 ${time.seconds} 秒`
    }
    setInterval(createtime, 500)
</script>
</div>

博文压缩

  • 在站点的根目录下执行以下命令：
1
2
npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp gulp-babel @babel/preset-env @babel/core
  • 在博客根目录下新建 gulpfile.js, 并填入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
const gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    htmlmin = require('gulp-htmlmin'),
    htmlclean = require('gulp-htmlclean'),
    imagemin = require('gulp-imagemin'),
    babel = require('gulp-babel')

// 压缩css文件
gulp.task('minify-css', function (done) {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .on('error', e => done(e))
        .pipe(gulp.dest('./public'))
})

// 压缩html文件
gulp.task('minify-html', function (done) {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .on('error', e => done(e))
        .pipe(htmlmin({
            continueOnParseError: true,
            collapseWhitespace: true,
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .on('error', e => done(e))
        .pipe(gulp.dest('./public'))
})

// 压缩js文件
gulp.task('minify-js', function (done) {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(babel({
            //将ES6代码转译为可执行的JS代码
            // presets: ['es2015'] // es5检查机制
            presets: ["@babel/preset-env"]
        }))
        .on('error', e => done(e))
        .pipe(uglify())
        .on('error', e => done(e))
        .pipe(gulp.dest('./public'))
})

// 压缩 public/images 目录内图片(Version>3)
gulp.task('minify-images', function (done) {
    const opts = { verbose: true }
    gulp.src('./public/images/**/*.*')
        .pipe(imageMinify = imagemin([
            imagemin.gifsicle({ interlaced: true }),
            imagemin.mozjpeg({ quality: 70, progressive: true }),
            imagemin.optipng({ optimizationLevel: 5 }),
            imagemin.svgo({ plugins: [{ removeViewBox: true }, { cleanupIDs: false }] })
        ], opts))
        .on('error', e => done(e))
        .pipe(gulp.dest('./public/images'))
    // .on('end', () => done())
    done()
})

//4.0以前的写法 
//gulp.task('default', ['minify-html', 'minify-css', 'minify-js', 'minify-images'])
//4.0以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')))

搜索功能

  • 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：
1
npm install hexo-generator-searchdb
  • 编辑站点配置文件，新增以下内容到任意位置：
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

文章阅读量、访问量计数

不蒜子计数好像无法访问
不蒜子计数存在部分 BUG
不蒜子计数无法控制
综上，放弃不蒜子计数，统一使用 LeanCloud 进行计数

  1. 注册或登录 leancloud.app
  2. 新建或打开已有应用
  3. 获取 APPID 和 AppKey
  4. 数据存储 -> 结构化数据 -> 创建名为 Counter 的 class
  5. 修改主题配置文件 leancloud_visitors 部分
1
2
3
4
5
6
7
leancloud_visitors:
  enable: true # 是否启用
  app_id: # <your app id>
  app_key:  # <your app key>
  # Required for apps from CN region
  server_url: # <your server url>
  security: true

页脚添加总访问量

不蒜子计数好像无法访问
不蒜子计数存在部分 BUG
不蒜子计数无法控制
综上，放弃不蒜子计数，统一使用 LeanCloud 进行计数

请先配置自定义文件的路径

  • 添加如下内容到 source/_data/footer.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div>
    <!--添加总阅读次数-->
    <div>
        <span>本站总访问量</span>
        <span id="site_total_read_count">Loading...</span>
    </div>
    <script>
        async function sleep(ms = 1000) {
            return await new Promise(resolve => {
                const timer = setTimeout(() => {
                    clearTimeout(timer)
                    return resolve()
                }, ms)
            })
        }
        async function site_read_count() {
            const className = 'Counter',
                query = new AV.Query(className)
            return query.find()
                .then(_ => _.map(i => i.attributes.time))
                .then(_ => _.reduce((a, b) => a + b))
        }
        new Promise(resolve => {
            const timer = setInterval(() => {
                if (typeof AV !== "undefined") {
                    clearInterval(timer)
                    return resolve()
                }
            }, 250)
        })
            .then(() => site_read_count())
            .then(_ => {
                const s = ` ${_} 次`
                document.getElementById("site_total_read_count").innerHTML = s
            })
            .catch(e => console.error(e.message))
    </script>
</div>

评论功能

  1. 注册或登录 leancloud.app
  2. 新建或打开已有应用
  3. 获取 APPID 和 AppKey
  4. 数据存储 -> 结构化数据 -> 创建名为 Comment 的 class
  5. 修改主题配置文件 valine 部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
  enable: true
  appid:  # Your leancloud application appid
  appkey:  # Your leancloud application appkey
  notify: true # 邮件通知
  verify: true # 验证码
  placeholder: 写点什么... # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

文章字数计数、阅读时间估计、站点总字数统计、总时间统计

  • npm install hexo-symbols-count-time
  • 修改主题配置文件的 symbols_count_time 部分
1
2
3
4
5
6
7
8
symbols_count_time:
  separated_meta: true
  item_text_post: true # 文章字数统计
  item_text_total: true # 站点总字数统计
  # 平均单词长度（单词的计数）。默认值:4。CN≈2 EN≈5 俄文≈6
  awl: 2
  # 每分钟的单词。默认值:275。缓慢≈200 正常≈275 快≈350
  wpm: 275

如何平滑升级

git pull 即可

  • 因为之前我们只对主题的配置文件进行了修改，所以做到平滑升级其实很简单
  1. 复制一份主题配置文件到站点文件夹下里，切记要不同的名字
  2. git reset –hard HEAD 撤销子模块的更改
  3. git pull 即可升级
  4. 升级完成以后可以将配置文件复制回去
  5. 这样就完成了升级操作
  6. 也可以写成脚本，更加方便
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#!/bin/bash
cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" && cd ..
CONFIG_FILE="_config.yml"
NEXT_THEME_FILE="next.theme.yml"
THEME_DIR="themes/next"
TARGET_FILE="${THEME_DIR}/${CONFIG_FILE}"

# clone and update submodules
# ls themes
# ls -r themes/next
# ls -r "${THEME_DIR}"
echo "Init git submodules"
[ -s "${THEME_DIR}" ] || git submodule init
# git submodule init
echo "Update git submodules"
git submodule update --recursive
# copy theme config file
echo "Coping theme config file"
[ -s "${NEXT_THEME_FILE}" ] && cp "${NEXT_THEME_FILE}" "${TARGET_FILE}"
head -n 1 "${TARGET_FILE}"

# Install dependencies && update env
echo "Install npm dependencies"
[ -s "node_modules" ] || npm i
echo "Load hexo binary..."
export PATH="$PATH:./node_modules/.bin"
echo "Hexo version: $(hexo -v)"
echo "Gulp version: $(gulp -v)"
echo "Gulp Tasks" && gulp --tasks
# Generate site && minify site files, such as: html, js, css
hexo g --debug && gulp -LLLL

自动化部署更新

使用 Github Action 进行自动化部署

See: 使用 GithubAction 自动更新部署 Hexo 博客

问题排查

Git not a command

  • 百度安装 Git 即可

Deployer not found: git

  • npm install hexo-deployer-git –save

ERROR Plugin load failed: hexo-generator-feed

Module xxx NOT_FOUND

  • 检查站点文件夹下面的 package.json, 至少要有以下内容
  • 没有的可以通过 npm install xxx 进行安装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
"dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-htmlclean": "^2.7.22",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.2",
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-search": "^2.4.2",
    "hexo-generator-tag": "^1.0.0",
    "hexo-related-popular-posts": "^5.0.1",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-kramed": "^0.1.4",
    "hexo-renderer-marked": "^4.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-symbols-count-time": "^0.7.1"
  }
要不看点其他的吧?..
-------------本文结束再接再厉-------------

本文标题:Hexo Next 主题安装、配置及美化

文章作者:IITII

发布时间:2021年05月28日 - 14:05

最后更新:2021年05月28日 - 14:05

原始链接:https://iitii.github.io/2021/05/28/1/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。