hexo博客3：主题选择

是Yu欸

已于 2024-04-03 13:48:15 修改

阅读量7.9k

点赞数 2

分类专栏： # 实践 hexo博客文章标签： github css css3 html 前端经验分享 hexo

于 2022-05-21 00:02:47 首次发布

本文链接：https://blog.youkuaiyun.com/wtyuong/article/details/124892466

版权

实践同时被 2 个专栏收录

110 篇文章

订阅专栏

hexo博客

11 篇文章

订阅专栏

hexo博客3：主题选择

写在最前面
一、选择主题
二、下载主题
三、主题配置
四、其他设置

写在最前面

目前来看，整个页面的样式并不是那么喜欢，想换一个风格，这就涉及到主题的配置了。

所有关于hexo的博客的文章，如果感兴趣可以回顾：

hexo博客7：构建简单的多层安全防御体系
 hexo博客6：自定义域名购买、配置、更新部署
 hexo博客5：更新部署&域名配置
 hexo博客4：发布文章
 hexo博客3：主题选择
 hexo博客2：初始化
 hexo博客1：环境配置

一、选择主题

目前 Hexo 里面应用最多的主题基本就是 Next 主题了，这个主题还是挺好看的，另外它支持的插件和功能也极为丰富。
并且配置这个主题后，博客可以支持更多的扩展功能，比如阅览进度条、中英文空格排版、图片懒加载等等。

二、下载主题

那么首先就让我们来安装下 Next 这个主题吧，目前 Next 主题已经更新到 7.x 版本了，我们可以直接到 Next 主题的 GitHub Repository 上把这个主题下载下来。
主题的 GitHub 地址是：

https://github.com/theme-next/hexo-theme-next

，可以直接把 master 分支 Clone 下来。
首先命令行进入到项目的根目录，执行如下命令即可：

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

执行完毕之后 Next 主题的源码就会出现在项目的 themes/next 文件夹下。
然后需要修改下博客所用的主题名称，修改项目根目录下的 _config.yml 文件，找到 theme 字段，修改为 next 即可，修改如下：

theme: next

然后本地重新开启服务，访问刷新下页面，就可以看到 next 主题就切换成功了，预览效果如下：
在这里插入图片描述
C:\Windows\System32\MyBlog\themes\next

Hexo 下的分类和表签无法显示，解决方法：
打开页面的时候标签和分类，总是提示Cannot GET /tags/这个错误
步骤以tags标签为例
注意：冒号后面都需要添加一个空格

三、主题配置

现在已经成功切换到 next 主题上面了，接下来就对主题进行进一步地详细配置吧，比如修改样式、增加其他各项功能的支持，下面逐项道来。

参考：https://cuiqingcai.com/7625.html

具体的效果大家可以设置后根据喜好选择。

Next 主题内部也提供了一个配置文件，名字同样叫做 _config.yml，只不过位置不一样，它在 themes/next 文件夹下，Next 主题里面所有的功能都可以通过这个配置文件来控制，下文所述的内容都是修改的 themes/next/_config.yml 文件。

3.1 样式

Next 主题还提供了多种样式，风格都是类似黑白的搭配，但整个布局位置不太一样，通过修改配置文件的 scheme 字段即可，我选了 Pisces 样式，修改 _config.yml （注意是 themes/next/_config.yml 文件）如下：

scheme: Pisces

另外还有几个可选项，大家可以自行根据喜好选择。

3.2 favicon

favicon 就是站点标签栏的小图标，默认是用的 Hexo 的小图标，如果我们有站点 Logo 的图片的话，我们可以自己定制小图标。

但这并不意味着我们需要自己用 PS 自己来设计，已经有一个网站可以直接将图片转化为站点小图标，站点链接为：https://realfavicongenerator.net[1]，到这里上传一张图，便可以直接打包下载各种尺寸和适配不同设备的小图标。

图标下载下来之后把它放在 themes/next/source/images 目录下面。
然后在配置文件里面找到 favicon 配置项，把一些相关路径配置进去即可，示例如下：

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/safari-pinned-tab.svg

配置完成之后刷新页面，整个页面的标签图标就被更新了。

3.3 avatar

avatar 这个就类似站点的头像，如果设置了这个，会在站点的作者信息旁边额外显示一个头像。比如将1.png 图片放置到 themes/next/source/images/1.png 路径，然后在主题 _config.yml 文件下编辑 avatar 的配置，修改为正确的路径即可。

# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # If true, the avatar would be rotated with the cursor.
  rotated: true

3.4 Sidebar Avatar

这里有 rounded 选项是是否显示圆形，rotated 是是否带有旋转效果，大家可以根据喜好选择是否开启。
配置完成之后就会显示头像。

3.5 rss

博客一般是需要 RSS 订阅的，如果要开启 RSS 订阅，这里需要安装一个插件，叫做 hexo-generator-feed，安装完成之后，站点会自动生成 RSS Feed 文件，安装命令如下：

npm install hexo-generator-feed --save

在项目根目录下运行这个命令，安装完成之后不需要其他的配置，以后每次编译生成站点的时候就会自动生成 RSS Feed 文件了。

3.6 code

把代码的颜色修改为黑色，并把复制按钮的样式修改为类似 Mac 的样式，修改 _config.yml 文件的 codeblock 区块如下：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night bright
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

3.7 top

我们在浏览网页的时候，如果已经看完了想快速返回到网站的上端，一般都是有一个按钮来辅助的，这里也支持它的配置，修改 _config.yml 的 back2top 字段即可，我的设置如下：

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

enable 默认为 true，即默认显示。sidebar 如果设置为 true，按钮会出现在侧栏下方，个人觉得并不是很好看，就取消了，scrollpercent 就是显示阅读百分比，个人觉得还不错，就将其设置为 true。

3.8 reading_process

reading_process，阅读进度。大家可能注意到有些站点的最上侧会出现一个细细的进度条，代表页面加载进度和阅读进度，如果大家想设置的话也可以试试，我将其打开了，修改

_config.yml 如下：
reading_progress:	
  enable: true	
  # Available values: top | bottom	
  position: top	
  color: "#222"	
  height: 2px

设置之后显示效果如下：

3.9 bookmark

书签，可以根据阅读历史记录，在下次打开页面的时候快速帮助我们定位到上次的位置，大家可以根据喜好开启和关闭，我的配置如下：

bookmark:	
  enable: false	
  # Customize the color of the bookmark.	
  color: "#222"	
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.	
  # If manual, only save it by clicking the bookmark-icon.	
  save: auto
github_banner

3.10 Github跳转

在一些技术博客上，大家可能注意到在页面的右上角有个 GitHub 图标，点击之后可以跳转到其源码页面，可以为 GitHub Repository 引流，大家如果想显示的话可以自行选择打开，我的配置如下：

# `Follow me on GitHub` banner in the top-right corner.	
github_banner:	
  enable: true	
  permalink: https://github.com/NightTeam/nightteam.github.io	
  title: NightTeam GitHub

记得修改下链接 permalink 和标题 title，显示效果可以看到在页面右上角显示了 GitHub 的图标，点击可以进去到 Repository 页面。

3.10 gitalk

由于 Hexo 的博客是静态博客，而且也没有连接数据库的功能，所以它的评论功能是不能自行集成的，但可以集成第三方的服务。

首先需要在 GitHub 上面注册一个 OAuth Application，链接为：

https://github.com/settings/applications/new

，注册完毕之后拿到 Client ID、Client Secret 就可以了。

首先需要在 _config.yml 文件的 comments 区域配置使用 gitalk：

# Multiple Comment System Support	
comments:	
  # Available values: tabs | buttons	
  style: tabs	
  # Choose a comment system to be displayed by default.	
  # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte	
  active: gitalk

主要是 comments.active 字段选择对应的名称即可。

然后找打 gitalk 配置，添加它的各项配置：

# Gitalk	
# Demo: https://gitalk.github.io	
# For more information: https://github.com/gitalk/gitalk	
gitalk:	
  enable: true	
  github_id: NightTeam	
  repo: nightteam.github.io # Repository name to store issues	
  client_id: {your client id} # GitHub Application Client ID	
  client_secret: {your client secret} # GitHub Application Client Secret	
  admin_user: germey # 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

配置完成之后 gitalk 就可以使用了。GitHub 授权登录之后就可以使用了，评论的内容会自动出现在 Issue 里面。

3.11 pangu

如果希望写中文和英文的时候中间必须要留有间距，一个简单直接的方法就是中间加个空格，但某些情况下可能习惯性不加或者忘记加了，这就导致中英文混排并不是那么美观。

pangu 就是来解决这个问题的，我们只需要在主题里面开启这个选项，在编译生成页面的时候，中英文之间就会自动添加空格，看起来更加美观。具体的修改如下：

pangu: true

3.11 math

一些情况下我们需要写一个公式，比如演示一个算法推导过程，MarkDown 是支持公式显示的，Hexo 的 Next 主题同样是支持的。

Next 主题提供了两个渲染引擎，分别是 mathjax 和 katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富，具体的对比可以看官方文档：

https://theme-next.org/docs/third-party-services/math-equations

所以我这里选择了 mathjax，通过修改配置即可启用。

math:
  enable: true

  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

mathjax 的使用需要我们额外安装一个插件，叫做 hexo-renderer-kramed，另外也可以安装 hexo-renderer-pandoc，命令如下：

npm un hexo-renderer-marked --save	
npm i hexo-renderer-kramed --save

另外还有其他的插件支持，大家可以到官方文档查看。

3.12 pjax

pjax 这个技术实际上就是，利用 Ajax 技术实现了局部页面刷新，既可以实现 URL 的更换，有可以做到无刷新加载。

要开启这个功能需要先将 pjax 功能开启，然后安装对应的 pjax 依赖库，首先修改 _config.yml 修改如下：

pjax: true

然后安装依赖库，切换到 next 主题下，然后安装依赖库：

$ cd themes/next	
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

这样 pjax 就开启了，页面就可以实现无刷新加载了。

四、其他设置

另外关于 Next 主题的设置还有挺多的，这里就介绍到这里了，更多的主题设置大家可以参考官方文档：https://theme-next.org/docs/。