「Hexo | Next主题美化」

一捧辣香菜

已于 2024-03-09 17:25:36 修改

阅读量2.7k

点赞数 34

CC 4.0 BY-SA版权

分类专栏： Hexo 文章标签：笔记

于 2024-03-09 17:21:50 首次发布

本文链接：https://blog.csdn.net/qq_43620045/article/details/136587126

Hexo 专栏收录该内容

2 篇文章

订阅专栏

Next主题美化

1 设置主题风格
2 设置菜单
3 设置分类页面
4 设置公益404页面
5 隐藏底部“由 [Hexo](https://hexo.io/) & [NexT.Gemini](https://theme-next.org/) 强力驱动”

1 设置主题风格

打开 themes/next/_config.yml 文件，搜索 scheme 关键字，将要启用的 scheme 前面注释的 # 去除即可。

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

2 设置菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项的图标。

NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下图标模糊的问题。

2.1 设置菜单项

打开 themes/next/_config.yml 文件，搜索 menu 关键字。

菜单项的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，它将用于匹配图标以及翻译。除了 home， archives ， / 后面都需要手动创建这个页面。

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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    # 归档
  # schedule: /schedule/ || fa fa-calendar
  # sitemap: /sitemap.xml || fa fa-sitemap
  commonweal: /404/ || fa fa-heartbeat    # 公益 404

以创建分类界面为例，在终端定位到 Hexo 站点目录下，使用 hexo new "categories" 新建一个页面：

$ cd your-hexo-site
$ hexo new page categories

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

---
title: 分类
date: 2022-03-13 13:18:47
type: "categories"
comments: false
---

2.2 设置菜单项的显示文本

在 2.1 中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。

以简体中文为例，打开 themes/next/languages/zh-CN.yml 文件，搜索 menu 关键字。

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404

2.3 设置菜单项的图标

打开 themes/next/_config.yml 文件，搜索 menu_settings 关键字，将 icons 设置为 true 即为显示图标。

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

效果：
菜单美化

3 设置分类页面

设置分类，在categories: 后添加分类。

---
title: 
date: 2022-03-13 18:55:06
categories: 
- 考研复试
- 机试
tags:
---

如此可实现多级分类，但显示界面层次感不强。

打开 themes/next/source/css/_common/components/pages/categories.styl 文件，修改以下：

  .category-list-item {
    margin: 5px 10px;
    
    &::before {
      content: "📍 ";
      display: inline;
    }
  }
  
  .category-list-child {
    padding-left: 60px;
  }

原始：
分类原始

效果： 分类美化

4 设置公益404页面

不用 hexo new "404" ，直接打开 themes/next/_config.yml 文件，搜索 menu 关键字，取消 commonweal 前的 # 注释。

在 source 文件夹下新建 404.html 文件，复制粘贴以下代码：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="https://ni256o.github.io"
          homePageName="回到首页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

其中 homePageUrl 改成自己主页地址。

5 隐藏底部“由 Hexo & NexT.Gemini 强力驱动”

打开 themes/next/layout/_partials/footer.swig 文件，注释  相关代码：

<!-- {%- if theme.footer.powered %}
  <div class="powered-by">
    {%- set next_site = 'https://theme-next.org' %}
    {%- if theme.scheme !== 'Gemini' %}
      {%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
    {%- endif %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
  </div>
{%- endif %}

{%- if theme.add_this_id %}
  <div class="addthis_inline_share_toolbox">
    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id }}" async="async"></script>
  </div>
{%- endif %} -->

原始：
底部原始

效果：
底部美化

转载于：
https://zhuanlan.zhihu.com/p/30836436，
https://zhuanlan.zhihu.com/p/106060640，
https://blog.csdn.net/cxy35/article/details/104854753/，