听阳光的猫

道阻且长、望你如一

0%

Hexo-Next7.0主题博客优化

发表于 更新于 分类于
本文字数： 4k 阅读时长 ≈ 4 分钟

NexT 从v5 升级到 v7

我们推荐通过如下步骤从 v5 升级到 v7：

  1. 并不修改原有的 next 目录，而只是复制部分 NexT 文件：

    1. _config.yml 或 next.yml（如果你使用了数据文件）。
    2. 自定义的 CSS 配置，它们应在 next/source/css/_custom/* 和 next/source/css/_variables/* 中。
    3. 自定义的排布配置，它们应在 next/layout/_custom/* 中。
    4. 任何其它可能的附加自定义内容；为了定位它们，你可以通过某些工具在仓库间比较。

  2. 克隆新的仓库到任一异于 next 的目录（如 next-reloaded）：

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next-reloaded

    如此，你可以在不修改原有的 NexT v5.1.x 目录的同时使用 next-reloaded 目录中的新版本主题。

  3. 在 Hexo 的主配置文件中设置主题：

    1
    2
    3
    ...
    theme: next-reloaded
    ...

    如此，你的 next-reloaded 主题将在生成站点时被加载。如果你遇到了任何错误、或只是不喜欢这一新版本，你可以随时切换回旧的 v5.1.x 版本。

  4. 更新语言配置

    从 v6.0.3 版本起，zh-Hans 改名为 zh-CN

    升级到 v6.0.3 及以后版本的用户，需要显式修改 Hexo 主配置文件 _config.yml 里的 language 配置，否则语言显示不正确。

  5. 更新 Hexo 和 Hexo 插件

    如果完成了以上步骤后，执行 hexo s 或 hexo g 出现错误，这意味着可能是旧版的 Hexo 和 Hexo 插件与新版的 NexT 主题产生了冲突。我们建议将 Hexo 升级至 4.0 以上的版本，将 Hexo 插件升级到最新版本。你可以执行 npm outdated 查看所有可以升级的插件。

生成about、tags、categories页面

在博客根目录下输入命令：

1
2
3
hexo new page about
hexo new page tags
hexo new page categories

会在/source下对应生成页面文件夹和里面的index.md。对于tags和categories需要修改index.md

内容如下：

  • tags：
1
2
title: 标签 #页面的头部显示
type: tags
  • categories：
1
2
title: 分类 #页面的头部显示
type: categories

添加字数统计及阅读时长

安装hexo-symbols-count-time

在博客文件夹里执行命令：

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

修改相关配置文件

  • 在站点配置文件添加：
1
2
3
4
5
6
7
symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

  • 在Next主题配置文件修改

    搜索symbols_count_time

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true  # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
  awl: 4
  wpm: 275

Next的其他小功能

复制模式mac主题

就在上面一件复制代码的下面

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true #是否开启复制功能
    # Show text copy result. #是否显示提示的复制结果
    show_result: true
    # Available values: default | flat | mac
    style: mac

头像

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

url：头像地址，留空则不显示头像。

rounded：圆/方头像。

opacity：不透明度。

rotated：随光标旋转。

回到顶部按钮/阅读百分比

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

增加打赏功能

这个也是next具备了。先把需要的收款码放到/themes/next/source/images里面。

搜索reward_settings修改：

1
2
3
4
5
6
7
8
9
10
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  #comment: Donate comment here.

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #bitcoin: /images/bitcoin.png

增加版权信息

搜索creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false #首页边栏是否显示
  post: true #文章底部是否显示
  language:

添加评论

1.打开GitHub申请

image-20201117162639595

image-20201117162818542 

1
2
3
4
Application name //应用名称，随便填
Homepage URL //填自己的博客地址
Application description //应用描述，随便填
Authorization callback URL //填自己的博客地址

2.用next主题自带gitalk评论的配置，打开主题配置文件themes/next-reloaded/_config.yml，搜索comments，在gitalk位置添加相关的内容：

1
2
3
4
5
6
7
8
9
10
11
12
gitalk:
  enable: true
  github_id: 你的github用户名 # GitHub repo owner
  repo: 你的github用户名.github.io # Repository name to store issues
  client_id: 粘贴刚刚注册完显示的字符串 # GitHub Application Client ID
  client_secret: 粘贴刚刚注册完显示的字符串 # GitHub Application Client Secret
  admin_user: 你的github用户名 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

修改标签样式

默认的标签前面是一个#号，我们把它改成标签的符号并删除下划线：

打开/themes/next/layout/_macro/post.swig，搜索post-footer

找到：

1
{%- set tag_indicate = '#' %}

把**#**修改为：<i class="fa fa-tag"></i>，这个样子：

1
2
3
4
5
6
<footer class="post-footer">
  {%- if post.tags and post.tags.length %}
    {%- if theme.tag_icon %}
      {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
    {% else %}
      {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}