hexo系列-next主题配置与优化

发表于 分类于 阅读次数： Waline：
这是一篇介绍hexo博客系统使用next主题的配置方法，主要介绍了如何搭建next主题，如何修改配置，如何生效等。

前言–几句废话

Hexo Next 是一个基于 Hexo 的博客主题，以其简洁、美观和高度可定制性而受到广大用户的喜爱。前面介绍了 Hexo 博客的搭建，搭建好了当然要让页面变的更好看一些，本文介绍一个 hexo 的主题配置 Next，简介而又功能强大的主题。

美化 Hexo Next 主题可以通过修改配置文件、自定义样式表以及添加插件等方式来实现。

以下是详细的教程：

安装与配置 Hexo Next 主题

  1. 安装 Hexo Next 主题：在 Hexo 项目的根目录下执行以下命令以安装 Next 主题：

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

  2. 启用 Next 主题：打开 _config.yml 文件，将 theme 项设置为 next：

    1
    theme: next

  3. 基础配置：根据需要修改 _config.yml 文件中的基本配置，如站点标题、描述、语言、时区等。例如：

    1
    2
    3
    4
    5
    6
    title: My Blog
    subtitle: My Personal Blog
    description: This is my personal blog.
    author: Your Name
    language: en
    timezone: ''

更改主题风格（Scheme）

Next 主题提供了多种风格（Scheme），可以在 themes/next/_config.yml 文件中选择自己喜欢的风格。找到 scheme 选项并取消注释，然后选择一个风格：

1
2
3
4
scheme: Muse
# scheme: Mist
# scheme: Pisces
# scheme: Gemini

保存更改后，重新生成静态文件并启动服务器：

1
hexo clean && hexo generate && hexo server

菜单设置

  1. 设置菜单项：在 themes/next/_config.yml 文件中，可以设置菜单项的名称、链接和图标。例如：

    1
    2
    3
    4
    5
    6
    7
    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    # 归档
      commonweal: /404/ || fa fa-heartbeat    # 公益 404

  2. 显示文本：菜单项的名称并不直接用于界面上的展示，而是通过语言翻译来提取显示文本。这些翻译文本放置在 themes/next/languages/{language}.yml 文件中。例如，对于简体中文，可以打开 zh-CN.yml 文件，找到对应的菜单项并设置显示文本：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益 404

  3. 显示图标：在 menu_settings 中将 icons 设置为 true 即可显示图标：

    1
    2
    3
    menu_settings:
      icons: true
      badges: false

分类页面设置

  1. 创建分类页面：在终端中定位到 Hexo 站点目录下，使用以下命令新建一个分类页面：

    1
    hexo new page categories

    然后在 source 文件夹下会生成 categories 文件夹，其中有一个 index.md 文件，修改其内容如下：

    1
    2
    3
    4
    5
    ---
    title: 分类
    date: 2022-03-13 13:18:47
    type: "categories"
    ---

  2. 多级分类显示：如果需要实现多级分类且显示界面层次感强，可以修改 themes/next/source/css/_common/components/pages/categories.styl 文件，添加以下 CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .category-list-item {
      margin: 5px 10px;

      &::before {
        content: "📍 ";
        display: inline;
      }
    }

    .category-list-child {
      padding-left: 60px;
    }

自定义样式与功能

  1. 自定义样式：可以通过主题注入功能自定义样式。首先，在 themes/next/_config.yml 中找到 custom_file_path 并取消注释，开启主题注入功能：

    1
    2
    custom_file_path:
      style: source/_data/styles.styl

    然后在 source/_data/styles.styl 文件中添加自定义的样式。例如，设置背景图片：

    1
    2
    3
    4
    5
    6
    7
    body {
      background: url(/images/background.png); //自己喜欢的图片地址
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
    }

  2. 回到顶部按钮：在 themes/next/_config.yml 中找到 back2top 选项，并将其设置为 true：

    1
    2
    3
    4
    back2top:
      enable: true
      sidebar: false
      scrollpercent: false

    还可以自定义回到顶部按钮的样式和位置。

  3. 侧边栏设置：在 themes/next/_config.yml 中找到 sidebar 选项，可以设置侧边栏的位置、宽度、显示方式等。例如：

    1
    2
    3
    4
    5
    sidebar:
      position: left # Sidebar Position. (left | right)
      display: post # Display (only for Muse | Mist), available values: post, always, hide, remove.
      padding: 18 # Sidebar padding in pixels.
      offset: 12 # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).

  4. 网站图标：在 themes/next/_config.yml 中找到 favicon 选项，设置网站的图标路径：

    1
    2
    3
    4
    5
    favicon:
      small: /images/16x16-paimeng.png
      medium: /images/32x32-paimeng.png
      apple_touch_icon: /images/apple-touch-icon-next.png
      safari_pinned_tab: /images/logo.svg

其他美化技巧

  1. 鼠标移动特效：在 themes/next/source/js 中新建 fairyDustCursor.js 文件，并添加鼠标移动特效的代码。然后在 themes/next/layout/_macro/script.stp 中引入该文件。

  2. 代码高亮：确保在 _config.yml 中启用了代码高亮，并在 highlight 选项中设置相关参数。例如：

    1
    2
    3
    4
    highlight:
      enable: true #是否开启代码高亮
      line_number: true #是否增加代码行号
      auto_detect: true #自动判断代码语言

  3. 评论系统：可以使用第三方评论系统，如 Disqus、Valine 等，根据文档进行配置。例如，使用 Valine：

    1
    npm install hexo-comment --save

    然后在 _config.yml 中添加 Valine 的配置。不过 Valine 似乎不在新的 Next 主题中不再支持了。想要评论系统的小伙伴可以看一下我的另一篇介绍 hexo + waline 配置评论系统的文章：hexo系列-使用waline配置评论系统 | 小七爱折腾，效果很好。

结束

通过以上步骤，您可以对 Hexo Next 主题进行个性化的美化和配置，使其更符合您的需求和审美。记得每次修改配置后，运行以下命令重新生成静态文件并启动服务器，以查看效果：

1
hexo clean && hexo generate && hexo server