losophy

NexT主题美化

发表于 更新于

Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题。关于主题的界面美化手法有以下这么多种。

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。
编辑主题配置文件(themes\next_config.yml)，确定喜爱的scheme

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

侧边栏显示当前浏览进度

捕获
打开 themes/next/_config.yml ，搜索关键字 scrollpercent ,把 false 改为 true
如果想把 top 按钮放在侧边栏，搜索关键字sidebar ,把 false 改为 true

右上角添加github入口

捕获
1.首先到GitHub Corners或者GitHub Ribbons选择自己喜欢的图标，然后copy相应的代码
2.然后将刚才复制的代码粘贴到themes/next/layout/_layout.swig文件中

1
<div class="headband"></div>

下面一行
3.把代码中的href后面的值替换成你要跳转的地址，比如你的GitHub主页

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用注释隐藏之间的代码即可，或者直接删除。位置如下：

1
2
3
4
5
6
7
8
9
10
11
<!--
{%- 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 %}
-->

设置菜单

设定菜单内容

编辑主题配置文件(themes\next_config.yml)，设定菜单内容，对应的字段是 menu。 菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译

1
2
3
4
5
6
7
8
9
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

处理菜单的点击跳转

按照上面的方式设置的菜单之后，点击标签，或者关于我都会出现错误页面，那这是怎么回事呢？
在默认情况，source 目录只有 _posts 一个文件夹的，并没有生成对应的 tags,about 等文件夹，所以就会出现错误 页面。
生成下菜单文件夹的可以了

1
hexo new page tags

将 source/tags/index.md 的内容修改为如下：

1
2
3
4
5
---
date: 2021-11-10 12:36:26
type: "tags"
comments: false
---

同样，about页面也按上面的方法生成下
捕获
再重新部署一下项目，就不会出现错误页面问题了

添加搜索功能

在博客根目录安装搜索插件

1
npm install hexo-generator-search --安装插件，用于生成博客索引数据

修改博客配置文件（根目录/_config.yml），添加以下代码

1
2
3
4
5
search:
  path: search.json #之前就是这里出了问题导致图标错误，错误的教程是 search.xml
  field: post
  format: html
  limit: 1000

修改主题的根目录配置文件(themes\next_config.yml)，把enable的false改为true

1
2
3
4
5
6
7
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

重新生成下页面，就可以看到搜索框了
捕获

修改文章底部带#号的标签

将 # 换成标签图标。
[NexT 7.1.0 Released]修改方法为：
打开模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”，进行如下修改：

1
2
3
4
5
<div class="post-tags">
          {% for tag in post.tags %}
            <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
          {% endfor %}
</div>

文章目录默认展开

文章目录样式文件custom.styl文件位于themes/next/source/css/_custom，打开后添加内容：

1
2
//文章目录默认展开
.post-toc .nav .nav-child { display: block; }

设置博客摘要显示

捕获
对于摘要显示，首先我们需要开启摘要功能，修改主题配置文件，打开阅读全文按钮read_more_btn

1
2
3
4
5
6
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true #显示阅读全文按钮

开启后，就可以在前加上摘要文字了
捕获

删除侧边栏上的作者名

找到这个文件，注释掉这段代码
捕获
效果如下图
捕获

自定义404页面

当你的Github Pages博客访问一个不存在的url时，Github Page会显示一个404的页面。
为了显示一个友好的404页面，或者在出现404时，不要太让人看出来是Github Pages，我们可以自定义404页面。
在你的/myblog/source/下，增加一个404.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>404</title>
	</head>
	<body>
		<script type="text/javascript" 			  src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>
	</body>
</html>

发布后，访问一个不存在的url时，就可以看到404页面了。这里我使用了腾讯的公益404页面。
捕获

利用Hexo-abbrlink插件生成唯一文章链接

Hexo在生成博客文章链接时，默认是按照年、月、日、标题格式来生成的，可以在站点配置文件中指定new_post_name的值。默认是:year/:month/:day/:title这样的格式。如果你的标题是中文的话，你的URL链接就会包含中文。复制后的url路径就是把中文变成了一大堆字符串编码，如果你在其它地方用了你自己这篇文章的url链接，偶然你又修改了该文章的标题，那这个url链接岂不是失效了。
为了给每一篇文章来上一个属于自己的链接，可以利用hexo-abbrlink插件，来解决这个问题。
首先安装下hexo-abbrlink

1
npm install hexo-abbrlink --save

站点配置文件(_config.yml)里改为

1
2
3
4
permalink: post/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

生成完后,原文章md文件的Front-matter 内会增加abbrlink 字段,值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址,换句话说,就是本篇文章有了自己的专属链接。
当然，也可以选择不同的算法和进制

1
2
3
4
5
6
7
8
9
10
crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

注意，这个配置完成之后，文章的链接有可能会变成了undefined，新的文章没问题，老的文章不行。执行hexo clean清掉以前生成的文章缓存，然后hexo g重新渲染就ok了。

添加相关文章推荐

安装推荐文章的插件：

1
npm install hexo-related-popular-posts --save

主题配置信息如下:

1
2
3
4
5
6
7
8
9
10
related_posts:
  enable: true
  title: 相关文章推荐      # 属性的命名
  display_in_home: false # false代表首页不显示
  params:
    maxCount: 5          # 最多5条
    #PPMixingRate: 0.0   # 相关度
    #isDate: true        # 是否显示日期
    #isImage: false      # 是否显示配图
    isExcerpt: false     # 是否显示摘要

改字符高亮的颜色

设置background和color。
捕获

相关文章