hexo 博客个性化设置

发表于 分类于 Valine：
Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。

创建 categories

  1. 新建一个页面，命名为 categories。命令如下：

    npx hexo new page categories

    在 myBlog/source 下会新生成一个新的文件夹 categories
    ，在该文件夹下会有一个 index.md 文件。

  2. 编辑 categories 文件夹下的 index.md

    title: categories
date: 2020-08-07 10:29:47
type: "categories"
comments: false

  3. 在菜单中添加链接。

    编辑主题的 _config.next.yml，将 menu 中的 categories: /categories 注释去掉，如下:

    categories: /categories/ || fa fa-fw fa-th

  4. 安装依赖

    npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save

参考：https://github.com/hexojs/hexo/wiki/Migrating-from-2.x-to-3.0

添加 README.md

添加 README.md

使用 Github Pages 和 Hexo 搭建的博客，如果在最开始建立仓库的时候没有创建 README.md 文件，那么在后期如何添加呢？

添加方法：在根目录 source 文件夹下新建 README.md 即可。

新增：source/README.md

效果：https://github.com/Jueee/jueee.github.io

显示异常

当我们执行 hexo g -d 部署博客的时候会发现 README.md 变成了 README.html。

原因就在于当我们在执行 hexo g -d 命令时，.md 文件会被转化成 HTML 文件，并将这些文件放到 public 目录里，最后再提交到远程 GitHub 仓库。

而 Hexo 也提供了一个方法，让 md 文件不被转换成 HTML，在根目录的 _config.yml 配置文件里，找到 skip_render 关键字，添加 README.md，让解释器跳过渲染：

skip_render:
  - README.md

修改脚注

修改文件： source\_data\footer.njk

<div class="footer-custom">
  <div class="powered-by">由 <a href="https://github.com/next-theme/theme-next-docs" class="theme-link" rel="noopener" target="_blank">Hexo</a> v8.0.0 驱动</div>
  <span class="post-meta-divider">|</span>
  <div class="theme-info">主题 – <a href="https://github.com/next-theme/hexo-theme-next" class="theme-link" rel="noopener" target="_blank">Hexo.NexT</a> v8.0.0</div>
</div>

代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

bash

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下_config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

配置参考：https://www.npmjs.com/package/hexo-prism-plugin

修改菜单

将导航栏的 “归档” 修改为 “博客”。

修改文件： source\_data\languages.yml

zh-CN:
  menu:
    archives: 博客

相关热门帖子

NexT 根据 hexo-related-popular-posts 支持相关的帖子功能.

hexo-related-popular-posts 通过执行以下命令来安装网站根目录:

$ npm install hexo-related-popular-posts
$ npx hexo clean

可以通过将值设置 related_posts.enable 为 truein 来启用它主题配置文件.

related_posts:
  enable: true

更换网页图标

制作 favicon 图标

  1. 准备好用作标签页 / 网页小图标 favicon 的图片
  2. 搜索 favicon 在线，可以看到一些在线图片转 favicon 的工具
    我用的是这个（link）： bitbug
  3. 利用工具做成图标。
    我做了 16x16，与 32x32 的。

编辑配置文件

在 next 主题的_config.yml 文件，修改新的图片作为 favicon 的对象：

favicon:
  small: /images/basic/jue.ico
  medium: /images/basic/jue.ico
相关文章