hexo+next博客主题文件美化
本章概述:hexo+next博客美化——主题文件美化
从这一篇博客起正式开始博客美化的说明。
一、备用主题配置文件
上一篇博客有提过备用主题配置文件,使用这种方法来改变主题配置不会原有配置文件配置改动,在主题升级时不会造成配置冲突配置被覆盖等情况。
做法:复制主题配置文件到博客目录上
1 | cp themes/next/_config.yml _config.next.yml |
这样我们就可以使用备用主题文件来改变配置了。
二、站点配置文件配置
1、配置站点信息
站点信息主要配置站点标题、作者以及站点使用的语言类型,其余的可以保持默认,当然也可以根据个人需求来配置其他项。
1 | title: 站点标题 |
2、配置URL
博客后面是需要上传到github或其他托管平台上的,这里的url则是访问博客网站的网址,其余的先不用改。
1 | url: https://blog.z7sz.top |
3、tab字符配置
Writing中有一个tab也就是制表符的替换符号配置,我这边建议用4个空格来代替tab。Writing中其他配置可以参考前两篇博客的站点配置文件介绍来自行配置。
1 | tab_replace: ' ' |
4、主题更改
主题记得更改为next主题
1 | theme: next |
deploy在第一篇hexo搭建有讲过,这里就不讲了。站点配置文件的内容比较少,大概就这些,前面的一篇博客我也有详细的介绍过这个文件中的配置,想配置其他项的可以按照我那篇博客来更改配置。需要注意的是,改动站点配置文件时需要重新启动本地服务器,不然配置是不生效的,主题配置文件由于使用的备用主题配置文件的方法,所每次配置完也需要重新启动本地服务器。
三、主题配置文件配置
1、视图选择
我个人比较喜欢Gemini,所以在Schemes配置中将视图选择更改为Gemini,我们需要在备用配置文件中更改配置。
1 | Schemes |
2、更改网站图标
我们可以在favicon配置中更改我们想要的网站图标,网站图标建议放在图传网站上,不建议放在本地,放在本地可能会让访问速度变慢。
1 | favicon: |
3、增加页面版权信息
我们可以在页面增加版权信息,版权信息增加在文章的结尾处。
1 | creative_commons: |
4、配置菜单项
在menu配置下,我们可以把需要的菜单项取消注释,我这里只需要首页、分类、归档以及标签,并且在menu_settings中把icons和badges都设置为true。
1 | menu: |
5、侧边栏设置
侧边栏设置主要有侧边栏方向、宽度、填充、偏移量等设置,我基本保持默认,主要增加侧边栏图像以及让图像显示为圆形,这个看个人喜好选择,我在上一篇博客也有详细说过。
5.1、侧边栏图像设置
1 | avatar: |
5.2、友链添加
1 | links_settings: |
我这里把图标改成了link的图标,然后layout更改成inline
5.3、侧边栏目录设置
侧边栏目录这里要把number设置为false,这个选项会自动添加目录序号,但是一般我们在写文章时都会添加序号,所以这里要设置为false。expand_all设置为true,会自动显示所有级别的目录,其余的保持默认即可。
1 | toc: |
6、页脚设置
1 | footer: |
页脚这里更改了站点开始时间,因为我博客是20年就创建了,所以就改为2020,更改了图标并且动态显示,然后把页脚的强力驱动给隐藏了,如果大家的域名有备案的话,还可以修改备案信息。
7、帖子配置
帖子配置这里暂时先修改一下文章底部tag标签的图标,其余美化配置涉及到第三方插件,后面再讲。
1 | tag_icon: true |
8、自定义页面
8.1、自定义标签页面
前面菜单项把标签页和分类页取消注释了,但是我们访问这两个页面的时候肯定是不行的,因为还没有创建前端页面。
1 | # 创建tags目录,注意要在博客目录下执行以下命令 |
命令执行成功后,会在source目录下创建tags目录,并且自动新建index.md文件,接下来修改这个文件。
1 | --- |
修改完之后标签页面就创建好了。
8.2、自定义分类页面
跟自定义标签页面过程差不多
1 | hexo new page categories |
修改文件内容
1 | title: "分类" |
8.3、自定义404页面
一个网站怎么能没有404页面呢,404页面是很有必要的。
1 | hexo new page 404 |
在404目录的index.md中添加以下内容
1 | --- |
当然,404页面可以自定义,这个看个人喜好。需要注意的是,访问不存在的资源是否可以重定向到 404 页面取决于网站托管服务或 Web 服务器的设置,而不是 Hexo。
9、其他配置
9.1、代码块添加复制按钮以及样式
在codeblock配置项中将copy_button的enable设置为true,style样式可以设置为mac,也可以设置成其他
1 | codeblock: |
9.2、返回顶部设置
返回顶部我比较喜欢在侧边栏点击返回,并且显示阅读进度,这个看个人喜欢。
1 | back2top: |
9.3、顶部显示阅读进度条
1 | reading_progress: |
这篇博客的网站美化内容就到这里,我们一个大致的网站已经出来了,可以直接用当博客网站使用,当然,这个网站看起来还没有那么美观,我们接下来还需要继续优化,比如调整样式、使用第三方插件增加功能等。