hexo+next博客主题文件美化

发表于 更新于 分类于 评论数： 阅读次数： 本文字数： 4.3k 阅读时长 ≈ 7 分钟

本章概述：hexo+next博客美化——主题文件美化

从这一篇博客起正式开始博客美化的说明。

一、备用主题配置文件

上一篇博客有提过备用主题配置文件，使用这种方法来改变主题配置不会原有配置文件配置改动，在主题升级时不会造成配置冲突配置被覆盖等情况。

做法：复制主题配置文件到博客目录上

1
cp themes/next/_config.yml  _config.next.yml

这样我们就可以使用备用主题文件来改变配置了。

二、站点配置文件配置

1、配置站点信息

站点信息主要配置站点标题、作者以及站点使用的语言类型，其余的可以保持默认，当然也可以根据个人需求来配置其他项。

1
2
3
4
5
6
7
title: 站点标题
subtitle: ''
description: ''
keywords:
author: 作者
language: zh-CN
timezone: ''
2、配置URL

博客后面是需要上传到github或其他托管平台上的，这里的url则是访问博客网站的网址，其余的先不用改。

1
2
3
4
5
6
url: https://blog.z7sz.top
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true 
  trailing_html: true
3、tab字符配置

Writing中有一个tab也就是制表符的替换符号配置，我这边建议用4个空格来代替tab。Writing中其他配置可以参考前两篇博客的站点配置文件介绍来自行配置。

1
tab_replace: '    '
4、主题更改

主题记得更改为next主题

1
theme: next

deploy在第一篇hexo搭建有讲过，这里就不讲了。站点配置文件的内容比较少，大概就这些，前面的一篇博客我也有详细的介绍过这个文件中的配置，想配置其他项的可以按照我那篇博客来更改配置。需要注意的是，改动站点配置文件时需要重新启动本地服务器，不然配置是不生效的，主题配置文件由于使用的备用主题配置文件的方法，所每次配置完也需要重新启动本地服务器。

三、主题配置文件配置

1、视图选择

我个人比较喜欢Gemini，所以在Schemes配置中将视图选择更改为Gemini，我们需要在备用配置文件中更改配置。

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
2、更改网站图标

我们可以在favicon配置中更改我们想要的网站图标，网站图标建议放在图传网站上，不建议放在本地，放在本地可能会让访问速度变慢。

1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
3、增加页面版权信息

我们可以在页面增加版权信息，版权信息增加在文章的结尾处。

1
2
creative_commons:
  post: true
4、配置菜单项

在menu配置下，我们可以把需要的菜单项取消注释，我这里只需要首页、分类、归档以及标签，并且在menu_settings中把icons和badges都设置为true。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
  
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true
5、侧边栏设置

侧边栏设置主要有侧边栏方向、宽度、填充、偏移量等设置，我基本保持默认，主要增加侧边栏图像以及让图像显示为圆形，这个看个人喜好选择，我在上一篇博客也有详细说过。

5.1、侧边栏图像设置
1
2
3
4
5
6
7
avatar:
  # Replace the default image and set the url here.
  url:  #/images/avatar.gif
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false
5.2、友链添加
1
2
3
4
5
6
7
8
9
10
links_settings:
  icon: fa fa-link
  title: 友链
  # Available values: block | inline
  layout: inline

links:
  #Title: https://example.com
  Coder-Sakura: http://mybot.top/blog/
  Rj45: https://rj45mp.github.io/

我这里把图标改成了link的图标，然后layout更改成inline

5.3、侧边栏目录设置

侧边栏目录这里要把number设置为false，这个选项会自动添加目录序号，但是一般我们在写文章时都会添加序号，所以这里要设置为false。expand_all设置为true，会自动显示所有级别的目录，其余的保持默认即可。

1
2
3
4
5
6
7
8
9
10
toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6
6、页脚设置
1
2
3
4
5
6
7
8
9
footer:
  since: 2020

  icon:
    name: fa fa-user   
    animated: true
   
  powered: false

页脚这里更改了站点开始时间，因为我博客是20年就创建了，所以就改为2020，更改了图标并且动态显示，然后把页脚的强力驱动给隐藏了，如果大家的域名有备案的话，还可以修改备案信息。

7、帖子配置

帖子配置这里暂时先修改一下文章底部tag标签的图标，其余美化配置涉及到第三方插件，后面再讲。

1
tag_icon: true
8、自定义页面
8.1、自定义标签页面

前面菜单项把标签页和分类页取消注释了，但是我们访问这两个页面的时候肯定是不行的，因为还没有创建前端页面。

1
2
# 创建tags目录，注意要在博客目录下执行以下命令
hexo new page tags

命令执行成功后，会在source目录下创建tags目录，并且自动新建index.md文件，接下来修改这个文件。

1
2
3
4
5
---
title: "标签"
date: 2022-06-18 17:35:53
type: "tags"
---

修改完之后标签页面就创建好了。

8.2、自定义分类页面

跟自定义标签页面过程差不多

1
hexo new page categories

修改文件内容

1
2
3
title: "分类"
date: 2022-06-18 17:42:22
type: "categories"
8.3、自定义404页面

一个网站怎么能没有404页面呢，404页面是很有必要的。

1
hexo new page 404

在404目录的index.md中添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 404 Not Found：该页无法显示
date: 2022-06-18 17:45:22
toc: false
comments: false
permalink: /404
---

<center>404 Not Found</center>
<center> 对不起，您所访问的页面不存在或者已删除 </center>

<a href="https://blog.z7sz.top/"><center> 返回首页</center> </a>

* 我的Github：[https://github.com/z7sz](https://github.com/z7sz)

当然，404页面可以自定义，这个看个人喜好。需要注意的是，访问不存在的资源是否可以重定向到 404 页面取决于网站托管服务或 Web 服务器的设置，而不是 Hexo。

9、其他配置
9.1、代码块添加复制按钮以及样式

在codeblock配置项中将copy_button的enable设置为true，style样式可以设置为mac，也可以设置成其他

1
2
3
4
5
codeblock:
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac
9.2、返回顶部设置

返回顶部我比较喜欢在侧边栏点击返回，并且显示阅读进度，这个看个人喜欢。

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true
9.3、顶部显示阅读进度条
1
2
3
reading_progress:
  enable: true
  height: 4px

这篇博客的网站美化内容就到这里，我们一个大致的网站已经出来了，可以直接用当博客网站使用，当然，这个网站看起来还没有那么美观，我们接下来还需要继续优化，比如调整样式、使用第三方插件增加功能等。