0%

HEXO-NEXT 主题安装指北

Next版本:v7.8.0 | 主题:Next-Mist

截止到我写这篇文章为止,我只是把一些基本的东西按照自己的喜好配置了一下,例如头像、字体之类的,所以这篇文章的标题可能显得有些唬人了。其实我也懒得写什么,因为网络上像这样的文章一找一大堆,我的文章估计会默默地藏在搜索页面的最底端永不见天日。但是我还是觉得要写点什么,至少能给这个站点留下一点回忆吧。如果看到这篇文章的朋友没有在文章中找到自己想要的答案,可以将问题留在评论区让我们一起来解决它。


站点标题及相关

站点标题可以在博客根目录的配置文件(_config.yml)中进行设置,具体位置如下:

1
2
3
4
5
6
7
title: #站点标题
subtitle: ''
description: #站点描述
keywords:
author: #作者
language: zh-CN #语言
timezone: ''

头像设置

头像的设置可以在主题的配置文件中找到:

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: #头像链接
# If true, the avatar will be dispalyed in circle.
rounded: #是否设置为圆形
# If true, the avatar will be rotated with the cursor.
rotated: #鼠标经过时是否旋转

字体设置

字体设置分为五个部分,分别是全局字体、站点标题、文章标题、文章正文、代码。
对字体的设置可以分为两类,一类是修改大小,一类是修改样式
每个部分中的size为大小设置,默认为1 即16px
对于字体样式的设置可以通过导入google fonts来实现,当然你也可以选择别的字体库,只需在host后面填入对应的字体库链接,如果不填则默认是google fonts
我们以正文字体为例来加以说明:

1
2
3
4
5
# Font settings for posts (.post-body).
posts:
external: true
family: Long Cang #谷歌字体库字体
size: 0.6 #字体大小

修改行间距

在 source/css/_variables/base.styl中找到$line-height-base ,进行修改即可,默认为2.可以自己调节


背景色相关

背景色的修改分为两部分,一部分是body页面的修改,一部分是菜单栏的修改。

body背景色修改: 在 source/css/_variables/base.styl中找到如下内容进行修改即可(16进制):

1
2
// Background color for <body>
$body-bg-color = white

菜单栏的修改:在与base.styl的同级目录下找到Mist.styl,找到如下内容:

1
2
$content-bg-color        = 菜单栏背景色;
$menu-item-bg-color = 菜单被选中颜色;

添加站点地图

如果你希望你的文章可以出现在搜索引擎靠前的位置的话,就可以通过生成站点地图的方式来让你的站点得到更好地收录。
站点地图的生成需要依靠两个插件,一个用来生成通用的sitemap,一个用来生成专门提供给百度的sitemap-baidu,安装命令如下:

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

如果安装失败的话可以换用cnpm命令,淘宝团队搭建的镜像,每十分钟同步一次。

之后我们需要在博客根目录下的配置文件中找到如下内容:

1
2
3
4
5
#站点链接
url: https://achong.fun
root: /
#文章链接,建议不要太冗长
permalink: :year/:title/

之后再在配置文件中添加:

1
2
3
4
5
sitemap:
path: sitemap.xml

baidusitemap:
path: baidusitemap.xml

保存并 hexo g之后,如果安装没出意外的话你会在public文件夹中看到两个分别名为sitemap.xml、baidusitemap.xml,
接下来要做的就是hexo d将生成的站点地图分别提交给百度与谷歌,具体操作网络上都有,就不再赘述。

最新版的next主题还提供了一个百度自动推送的功能,我们可以再主题的配置文件下找到:baidu_push,将其打开即可。不过在这之前最好在百度站长平台添加自己的网站并进行验证,在验证过程中可以选择第二种方式HTML标签验证,将其提供的标签中的content后面双引号中的内容复制下来,粘贴到主题的配置文件中的baidu_site_verification后面,hexo d等待一段时间后进行验证即可。

去掉地址栏中自动生成的 #more

去不去掉看个人喜好了,我不是很习惯这种链接所以就想把它去掉,方法很简单,在/theme/next/layout/_macro/post.swig 中搜索 #more 删除即可。

去掉文章底部标签中的 #

强迫症,修改原因同上看着难受。同样是在post.swig中,搜索 set tag_indicate,将其后面#去掉即可,不过去掉之后光秃秃的也不好看,不如找一个其它图标替换掉它,打开fontawesome,找个喜欢的替换掉它,fa fa-tags看起来不错。我们可以这样修改:

1
2
3
4
5
6
{%- if post.tags and post.tags.length %}
{%- if theme.tag_icon %}
{%- set tag_indicate = '<i class="fa fa-tags" ></i>' %}
{% else %}
{%- set tag_indicate = '<i class="fa fa-tags" ></i>' %}
{%- endif %}

关闭特定页面的评论

添加:

comments: false

例如:

---
title: 关于我
date: 2020-09-04 19:19:49
type: "about"
comments: false
---

添加看板娘

官方GitHub仓库:https://github.com/EYHN/hexo-helper-live2d
演示站:https://huaji8.top/post/live2d-plugin-2.0/

在官方GitHub的readme的文档中已经将整个安装过程解释的很清楚了,肯定要比我自己写的明白,所以呢别忘记给作者一个star让他开心开心哈哈。

我比较喜欢简约的网站风格,同时也对二次元情有独钟,但是无奈鱼与熊掌不可兼得,可爱的看板娘仅出生一天之后就被我放在文件夹深处吃灰了。

新增歌单页面

首先在source文件夹下新建一个文件夹,名字随意。放张图:

在music文件夹下新建一个index.md文件,头部格式大概如下:

---
title: 歌单
date: 2020-10-08 16:15:07
type: "music"
---

之后我们要安装一个名为aplayer的插件,安装命令:

npm install --save hexo-tag-aplayer

插件地址:https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

使用:先在博客根目录下的配置文件中下入下面内容:

1
2
aplayer:
meting: true

然后再music文件夹下的index.md中写入类似于下面的内容:

1
{% meting "5279279277" "netease" "playlist" "theme:#f5edd7" "mode:circulation" mutex:true" "listmaxheight:340px" "preload:auto" %}

其中各个参数都有其意义,具体在GitHub上都有详尽的说明,可以据此进行修改。

未完待续,想到就写…