zqs`s blog

有朋自远方来，虽远必诛

从零搭建自己的Hexo博客（二）：写文章与基础美化

发表于 更新于 分类于 Valine：

一、写文章

新建文章

博客搭建是干什么的？写文章的啊！

好吧hexo写博客可以用一堆命令然后本地写，我不说这种方法，另一种我认为更好的方法：

在你的站点根目录下打开PowerShell输入npm install --save hexo-admin安装admin插件

再使用hexo s在本地运行，访问localhost:4000/admin即可。点击左上角的new post输入标题即可写文章（标题长度有限制，太长会引起回车后无法弹出写文章的界面）

这个插件右边的预览栏支持Markdown语法，但是不支持 $\LaTeX$，要在博客里才能看到经过 $\LaTeX$ 渲染后的文章。

在左边的侧边栏可以看到自己博客的所有文章，还可以对其编辑。

不管使用这个插件还是直接编辑，都只能在本地写文章。

先写一篇文章，用于试验后面的功能吧。

文章部分截取

我们发现，博客的主页显示了文章的全部。在文章增多的时候，会导致主页加载慢得离谱而且特别难看。

怎么办呢？将my_blog\source\_posts中自己的文章的md文件打开，在需要截断的位置添加<!--more-->即可。主页会只显示more前面的内容。

二、基础美化

不觉得自己的博客就这样太简陋了吗。

打开主题配置文件。这里提一下配置文件和主题配置文件。配置文件是站点根目录下的_config.yml，主题配置文件则是站点根目录/themes/主题名（我们使用next)/_config.yml。

Ctrl+F，搜索文件中的menu字段，找到如下的一段：

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

可以看到我们的博客默认只显示home和archives两个链接。我们将about，tags和categories前的#去掉。接下来我会分别配置about界面和tags，categories。

这时访问你的博客主页就会多出about、tags、categories链接，

about界面：

在站点根目录下PowerShell运行hexo new page "about"。

根目录（我是my_blog）/source/下多了about文件夹。

将about/index.md改为：

1
2
3
4
5
6
---
title: 关于我
date: 2020-11-29 17:43:54
---

你的自我介绍……

date可以更改。这时点击主页的about就有你的个人介绍！

tags界面：

配置tags界面

在站点根目录下PowerShell运行hexo new page "tags"。

根目录（我是my_blog）/source/下多了tags文件夹。

将tags/index.md改为：

1
2
3
4
5
6
---
title: "文章标签"
date: 2020-03-07 16:35:25
type: "tags"
layout: "tags"
---

date可以更改。这时点击主页的tags就有你的标签页面！

添加文章标签：

my_blog/source/_posts。

会看到你的所有文章的.md文件。

选出你的一篇文章：

1
2
3
4
5
6
7
8
title: 你的文章标题
author: 你的名字或首字母缩写或昵称
date: 2020-12-01 20:24:25
tags:
    - 标签1
    - 标签2
---
正文……

可以仿照上面的代码为文章加标签。

categories界面：

配置categories界面

在站点根目录下PowerShell运行hexo new page "categories"。

my_blog/source/下多了categories文件夹。

将categories/index.md改为：

1
2
3
4
5
6
---
title: "文章分类"
date: 2020-03-07 16:35:25
type: "tags"
layout: "tags"
---

date可以更改。这时点击主页的categories就有你的标签页面！

添加文章标签：

my_blog/source/_posts。

会看到你的所有文章的.md文件。

选出你的一篇文章：

1
2
3
4
5
6
7
8
9
10
11
12
title: 你的文章标题
author: 你的名字或首字母缩写或昵称
date: 2020-12-01 20:24:25
tags:
    - 标签1
    - 标签2
categories:
   - 一级分类
   - 二级分类

---
正文……

可以仿照上面的代码为文章加分类。

分类级数越高分的越细。

博客主题样式：

next主题默认的样式是Muse。

在主题配置文件中Ctrl+F搜索”Schemes”，找到如下字段：

1
2
3
4
5
6
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

我的blog使用的是Gemini样式，只需要改为：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

即可。其它两个样式可以自行尝试。

代码块样式：

在主题配置文件中搜索”highlight_theme”。

找到如下字段：

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

可以看到，NexT为我们提供了几种代码块颜色。我使用的是night bright，只需要将默认的normal改为night bright即可。

另外，如果想给代码添加Copy按钮，在主题配置文件中搜索copy_button，找到：

1
2
3
4
copy_button:
    enable: false
    # Show text copy result
    show_result: false

将enable后面的false改为true即可。

搜索功能：

在站点根目录打开PowerShell输入npm install hexo-generator-searchdb --save。

进入站点配置文件在末尾添加：

1
2
3
4
5
search:
  path: search.json #网上很多教程这里写的是search.xml，会导致无法搜索，那是老掉牙的版本的写法了。
  field: post
  format: html
  limit: 1000

在主题配置文件找到

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: false
  # 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
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

将enable的false改为true即可。完成了上面的美化后，你的博客应该相当顺眼了！

当前，我们的博客不出意外会非常卡。下一篇文章我会对博客进行加速和深度美化。

-------------本文结束感谢您的阅读-------------