search

hzzzzzzzq / Blog

这是我记录博客的地方，希望能多写一些技术博客，JS、ES、React、Vue等
14 stars 0 forks source link

个人博客搭建 - 2. Hexo 配置 #39

Open hzzzzzzzq opened 2 years ago

hzzzzzzzq commented 2 years ago

Hexo 配置

hexo 的配置是在哪里设置的呢？其实就是根目录下的 _config.yml 文件中进行配置。

image-20220121110419337

网站配置

# Site
title: MyBlog # 设置网站的标题
subtitle: 'Welcome to my blog' # 设置网站的子标题
description: 'I am a description' # 设置网站描述
keywords: # 网站的关键词，支持多个，多用于网站搜索
author: hzzzzzzzq # 作者
language: zh-CN # 设置网站使用的语言。我们常用的当然就是 `zh-CN`。默认为 `en`。
timezone: '' # 设置网站的时区。`hexo` 默认使用电脑的时区。

image-20220121111002144

网址

提醒一点，url 直接使用你配置的 url 即可，不要随意去增加 path，而 root 虽然时网站的根目录，但是我研究了一周了，如果添加了根目录，可能就会导致 css 加载的问题。

所以上面的 url 和 root 尽量不要进行添加 path，除非你愿意手动去更改文件目录信息，较为繁琐，容易导致全站出问题。

来看看，我的配置吧。首先 url 使用的是 github 创建的。

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://hzzzzzzzq.github.io # 网址
# 必须以 `http://` 或 `https://` 开头，与以往 `//` 开头的方式不同

root: / # 网站根目录
# 在这里，我并没有修改，你也可以将 root 删除，或者默认就是无 root 的情况。

permalink: /Blog/:abbrlink.html # 文章的永久链接格式  默认 - :year/:month/:day/:title/
# abbrlink config
abbrlink:
  alg: crc32 # 算法: crc16(default) and crc32
  rep: hex # 进制: dec(default) and hex
permalink_defaults:  # 永久链接中各部分的默认值
# 保持默认就可以了，除非你要加一个 link path 的默认值

pretty_urls:  # 改写 permalink 的值来美化 URL
    # 下面两个也保持默认就好
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除

  trailing_html: true # Set to false to remove trailing '.html' from permalinks
  # 是否在永久链接中保留尾部的 .html，设置为 false 时去除

上面保持默认的代码，我已经进行注释，那么接下来，就要聊一下重点了，那就是永久链接。

permalink: /Blog/:abbrlink.html
# abbrlink config
abbrlink:
  alg: crc32 # 算法: crc16(default) and crc32
  rep: hex # 进制: dec(default) and hex

从表格来看，permalink 的默认值是 :year/:month/:day/:title/。

为了演示，这个，我们来新建一篇文章名称为 myBlog。

$ hexo new "myBlog"

然后我们点进这篇文章，来看看地址 http://localhost:4000/2022/01/21/myBlog/，所以上面都是对呀代码的时间值和文章名称。而如果你的博客文章是中文时，就会出现乱码，导致链接很长，这不是我们希望看到的，所以就要用到下面的宝贝了。

我使用的是 abbrlink，是一个 hexo-abbrlink 插件，用来修改我们的文章地址。

$ npm install hexo-abbrlink --save

当然我这里配置的 /Blog/，其实就是定死在前面，证明这些都是博客文章，你也可以进行自定义，例如posts/:abbrlink 等。

这里就要毫不吝啬的放上博主的链接了https://hzzzzzzzq.github.io/Blog/599a1ad9.html，看起来是不是简介多了？该插件就是用来生成唯一的标识所用。

文章

# Writing
new_post_name: :title.md # 博客文件名格式
default_layout: post # 默认布局 可选值 post(文章) | draft(草稿) | page(页面)
titlecase: false # 标题是否小写
external_link:
  enable: true # 是否在新的标签页打开链接 - 默认 true
  field: site # Apply to the whole site  默认 - tite
  exclude: '' # 排除，默认 - ''
filename_case: 0 # 把文件名转换成大写(-2)或小写(-1)，默认 - 0
render_drafts: false # 显示草稿，默认 - false
post_asset_folder: false # 启动 Asset 文件夹，默认 - false
relative_link: false # 把链接改为与根目录的相对地址，默认 - false
future: true # 显示未来的文章，默认 - false
highlight: # 代码高亮设置
  enable: true # 是否启用，默认 - true
  line_number: true # 显示行号，默认 - true
  auto_detect: false # 自动侦测，默认 - false
  tab_replace: '' # 替换 tab，默认 - ''
  wrap: true # 换行，默认 - true
  hljs: false # 使用 hljs 渲染，默认 - false
prismjs: # 代码块高亮工具
  enable: false # 是否启用，默认 - false
  preprocess: true # 预处理，默认 - true
  line_number: true # 显示行号，默认 - true
  tab_replace: '' # 替换 tab，默认 - ''

highlight 代码高亮 参考

Prisms 代码高亮 参考

分类 & 标签

# Category & Tag
default_category: uncategorized # 默认标签
category_map: # 分类别名，用来将分类标签转化成英文分类，修改分类路由， 配置文件中获取使用 `:category`
    博客: blog # 将分类 博客 转为 blog
  其他: other # 将分类 other 转为 other
tag_map: # 标签别名，用来将中文标签转化成英文标签，修改标签路由
  中文标签: tag # 将标签 中文标签 转为 tag

首页分页

# Home page setting 首页设置
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: /default-index/ # 博客根目录
  per_page: 10 # 每页多少条
  order_by: -date # 按照什么顺序排序，-date 表示时间倒序

分页

参数 描述 默认值
per_page 10
pagination_dir page

image-20220123111354713

来看看文件中的默认配置吧。

# 分页
## per_page 为零表示不分页
per_page: 10 # 每一页文章显示的文章 默认 - 10
pagination_dir: page # 分页目录

其他配置

参数 描述
theme 主题名称，如果值为 false，就是禁用主题
deploy 部署部分的配置
search 这是配置中没有的，但是我们在网站中，也常需要搜索操作，所以增加一个配置

theme 主题的设置就不说了，只是提供主题的名称即可，前提是你下载了该主题。

deploy 也在上一篇文章 - 《hexo+githubpages+next》中提到过。

简单的配置说一下

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git # 类型
  repo: # 仓库
    github: # git@github.com:yourname/yourname.github.io.git
  branch: master # 分支

这功能，估计也是很常用的吧，方便找寻具体的文章。

我们使用 本地搜索(LocalSearch)，话不多上，首先我们需要下载插件。

$ npm install hexo-generator-searchdb --save

有兴趣可以具体看一看每一个参数的具体作用，hexo-generator-search

search:
  path: search.xml # 会在 public 中生存 search.xml 文件，保存全站所有 post 类型的页面生成结构化的数据
  field: post # 设置搜索的范围，默认 post，可选： post | page | all
  format: html # 页面内容的形式，默认 html， 可选: html | raw | excerpt | more
  limit: 1000 # 设置搜索的最大数量

其实这样并不够，我们使用的是 NexT 主题，还需要修改主题配置文件的 local_search

local_search:
    enable: true

参考链接

hexo - 配置