博客日记——美化

前言

在博客创建好以后，主要就是页面的美化和个性化。每个人都想要自己的博客与众不同，显然前篇一律的主题不是私人博客应有的样子。
博客建成以后，很长一段时间没有空去管他，只是偶尔抽点时间增加几篇文章。最近空闲时间多了，就把博客布置了一下。在原作者的github仓库和下载下来的压缩包中（readme.md）都有一些主题的配置问题，这些我就不讲了。

1.菜单导航配置

配置基本菜单导航的名称（name）、路径（url）和图标（icon）.

菜单导航名称可以是中文也可以是英文(如：Index或主页)
图标icon 可以在Font Awesome 中查找

二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
在需要添加二级菜单的一级菜单下添加children关键字(如:secret菜单下添加children)
在children下创建二级菜单的名称name,路径url和图标icon.

注意每个二级菜单模块前要加 -.
name后可以写中文

menu:
Index:
 url: /
 icon: fas fa-home
Tags:
 url: /tags
 icon: fas fa-tags
Categories:
 url: /categories
 icon: fas fa-bookmark
Archives:
 url: /archives
 icon: fas fa-archive
About:
 url: /about
 icon: fas fa-user-circle
Contact:
 url: /contact
 icon: fas fa-comments
Friends:
 url: /friends
 icon: fas fa-address-book
Secret:
 icon: fas fa-list
 children:
   - name: 导航
     url: /navigate
     icon: fas fa-location-arrow
   - name: 收藏
     url: /box
     icon: fas fa-map-marker
   - name: 文章
     url: /book
     icon: fas fa-book

2.搜索插件

本主题中还使用到了 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

安装好以后在 Hexo 的根目录下 _config.yml 文件中，新增以下的代码：

search:
path: search.xml
field: post
format: html
limit: 10000

如果还无法使用，那么在主题文件夹下的_config.yml文件中找到以下代码，并且使能。

local_search: 
enable: true

3.添加404页面

在根目录的source文件夹中新建404.md并写入以下代码

title: 404
date: 2020-02-23 19:37:07
type: "404"
layout: "404"
description: "Oops～，看看其他页面吧！找不到你想要的页面了"

以上只是一些基本功能的配置，重点要来了

4.中文链接转拼音

在我们平时写博客时，习惯上将博客名称取成中文名。而中文名在博客生成链接的时候，会变成一串乱码，非常的长。尤其时文章底部的链接显得很难看。所以将链接转成拼音还是非常有必要的

首先安装插件

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的代码

permalink_pinyin:
   enable:  true  
    separator:  '-'

其中的 ‘ _ ‘是每个拼音之间间隔，也可以省略不写或更换，但是不支持空格

5.修改主题颜色

想和作者，还有各位的博客有差别，首先肯定是博客的主题颜色啦，主题颜色决定了主页的风格

在主题文件的 /source/css/matery.css文件中，搜索以下代码来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色.
（渐变从右至左）红->黑 */

.bg-color {
    background-image:  linear-gradient(to right, #8b0000 0%, #000000 100%);
}

/*网站页面下方进度条颜色*/
.progress-bar {
    height: 4px;
    position: fixed;
    bottom: 0;
    z-index: 300;
    background: linear-gradient(to right, #8b0000 0%, #000000 100%);
    opacity: 0.8;
}

大家可以在这个网站找到喜欢的颜色
 这个网站中可以进行十六进制与对应的颜色的转换

6.关闭首页颜色变换

在主题文件的 /source/css/matery.css文件中，搜索以下代码来关闭颜色变换：

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色.即滤镜颜色，不想要可以全部注释，或者换成你喜欢的颜色 */
}

@keyframes rainbow {
    /* 动态切换背景颜色.，不想要可以全部注释，或者换成你喜欢的颜色 */
}

7.添加背景

还是在 /source/css/matery.css 文件中，找到body 改成如下代码，链接可以替换成你喜欢的图片。

/*背景图片*/
body {
    /* background-color: #eaeaea; */
    background: linear-gradient(60deg, rgba(255, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.35)) 0% 0% / cover,
        url("你喜欢的图片") 0px 0px;
    background-attachment: fixed;
    margin: 0;
    color: #000000;
}

8.更换字体

选个自己喜欢的字体下载，一般是.ttf格式的。
(2) 将字体放到你博客的相关目录，但是要注意引入路径。
我放在工作目录下的 \source\font 文件夹内，即文件路径为 /source/font/hl.ttf ，如果你要用多种字体可以在font目录统一存放。

(3) 添加引入和使用
找到主题文件夹下的 my.css 文件，路径为 /themes/matery/source/css/my.css ，在文件末尾添加下面的代码

@font-face{
    font-family: 'hl';
    src: url('../box/font/hl.ttf');
}

/*表示全局使用，如果不想全局使用不要添加该段 */
body{
    font-family: 'hl';
}

/* 可以局部使用，建议添加 */
.diyFont{
    font-family: 'hl';
}

在你想要使用的元素的 class 里面加上 diyFont 。