【hexo】学习篇（二）| hexo博客功能完善

使用 Fluid 主题

官方文档：https://hexo.fluid-dev.com/docs/guide/

private 博客配置文件 "_config.yml"
private 主题配置文件 "_config.fluid.yml"

更换主题

  1. 下载 最新 release 版本 解压到 博客路径/themes 目录下，并将解压出的文件夹重命名为 fluid。
  2. 修改博客路径下的 _config.yml (博客配置文件)：
theme: fluid # 指定主题

language: zh-CN # 指定语言，会影响主题显示的语言，按需修改

平滑升级

在 博客路径/themes/fluid 目录下有一个叫作 _config.yml 的文件，这个文件用于配置主题。

为了平滑升级，我们需要在 博客路径 下创建一个 _config.fluid.yml 文件。然后将主题目录里的 _config.yml 的内容复制到 _config.fluid.yml 中。

  • _config.fluid.yml 和 主题目录下的 _config.yml 的作用相同，都是用于配置主题。
  • 当有 _config.fluid.yml 时，_config.fluid.yml 中的配置优先级高于 _config.yml 。也就是说前者会覆盖后者。那么当我们升级主题时，由于只需更新 fluid 文件夹，而 _config.fluid.yml 不在这个文件夹下，因此每次更新都不会抹去我们已有的主题设置，从而实现平滑升级。

首页背景图片

打开博客路径下的 _config.fluid.yml 文件（主题配置文件），配置 index.banner_img 。

如果没有 _config.fluid.yml :

  1. 请参照上一步 平滑升级 进行设置。
  2. 如果不想使用平滑升级，则在 博客路径/themes/fluid 目录下的 _config.yml 文件中进行下面的操作。

图片可以引用 本地图片 和 网络图片。如果使用本地图片，图片要放在 博客路径/themes/fluid/source 目录下。比如说，图片存放在 博客路径/themes/fluid/source/img 目录下，图片命名为 a.jpg ，则配置文件中填写为 /img/a.jpg 。

//网络图片
index:
  banner_img: 网络图片连接
//本地图片
index:
  banner_img: /img/a.jpg

首页副标题

打开博客路径下的 _config.fluid.yml 文件（主题配置文件），配置 index.banner_img 。

index:
  slogan:
    enable: true
    text: "Welcom to Guoguo's blog!"

代码高亮

Fluid 为我们提供了两个实现代码高亮的库：highlightjs 和 prismjs，可以分别点进网站挑选自己喜欢的高亮样式。

比如说，我喜欢 prismjs 库的 okaidia ，那么我将 code.highlight.lib 设置为 prismjs ，将 code.highlight.prismjs.style 设置为 okaidia 。

code: # 代码块相关的配置
  copy_btn: true # 是否开启复制代码的按钮
  highlight: # 代码高亮
    enable: true
    lib: "prismjs"
    highlightjs:
      style: "Github Gist"
      bg_color: false
    prismjs:
      style: "okaidia"
      preprocess: true

修改前：

修改后：

创建导航页面

  1. 创建页面

    使用命令 hexo new page 页面名称 ，即可创建一个新的页面。

    比如使用命令

    hexo new page document

    则 博客路径/source 目录下会新建一个 document 文件夹，修改文件夹中的 index.md 文件编辑你想要在 document 页面展示的内容。

  2. 修改主题配置文件

    打开 _config.fluid.yml (主题配置文件)，修改 navbar.menu 。

    navbar:
  menu: # 可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称
    - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
    - {
        key: "archive",
        link: "/archives/",
        icon: "iconfont icon-archive-fill",
      }
    - {
        key: "category",
        link: "/categories/",
        icon: "iconfont icon-category-fill",
      }
    - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
    - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }

    刚刚创建的 document 页面加入 menu 数组中

    navbar:
  menu:
    - { key: "document", link: "/document/", icon: "iconfont icon-book" }

    参数解释：

    • document ：用于关联languages/*.yml

    • link ：则是站点页面的url ，既document页面url为 http://localhost:4000/document/

    • icon ：导航栏中文字旁的图标， 在 内置图标 中选取图标填入即可

    至此，document 页面已经可以出现在博客中。

    但是，一个英文单词和中文摆在一起显得很突兀。

  1. 修改 zh-CN.yml

    将 document 改为中文有两种做法。

    • A. 直接修改 key 值

      navbar:
  menu:
    - { key: "文档", link: "/document/", icon: "iconfont icon-book" }

    • B. 打开位于 博客路径/themes/fluid/languages 目录下的 zh-CN.yml 文件

      添加以下内容

      document:
  title: 文档

Fluid 使用技巧

https://hexo.fluid-dev.com/docs/guide/#tag-%E6%8F%92%E4%BB%B6

永久链接

https://hexo.io/zh-cn/docs/permalinks

安装插件

cd <hexo-program>
npm install hexo-abbrlink --save

修改配置

📄 _config.yml

# permalink: :year/:month/:day/:title/

permalink: p/:abbrlink.html
abbrlink:
alg: crc32 #算法： crc16(default) and crc32
rep: hex #进制： dec(default) and hex

评论系统

对于评论系统，Fluid 主题集成了以下评论模块：

  • disqus
  • valine
  • gitalk
  • utterances
  • changyan
  • LiveRe（来必力）
  • Remark42
个人博客
#hexo
【hexo】学习篇（二）| hexo博客功能完善
http://guoguo.host/blog/p/de4928b9.html
作者
Guoguo
发布于
2020年8月23日
许可协议