Hexo博客维护记录

一、异常记录

1. 代码异常

如果出现代码块中花括号显示为 { 和 }，则在：/node_modules\hexo-prism-plugin\src\index.js 文件中新增两行配置：'{': '{', '}': '}'。

const map = {
    ''': '\'',
    '&': '&',
    '>': '>',
    '&lt;': '<',
    '&quot;': '"',
    '&#123;': '{',
    '&#125;': '}'
};

2. Logo跳转

若在点击首页左上角 LOGO 时跳转到图片时，则修改主题文件夹下 layout/_partial/header.ejs 文件，在 if 外面套一层 div 即可。

<div>
   <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
   ...
   ...
</div> 

3. 服务部署

若需要将博客部署到多台服务器，修改根目录站点配置文件_config.yml：

deploy:
    type: git
    repo:      
        aliyun: [url], [branch]
        github: [url], [branch]

二、主题美化

1. 鼠标样式

我们可以自定义在浏览博客时的鼠标样式，先将鼠标文件上传到 matery\source\medias\a.ico ，这里推荐一个鼠标样式下载网站：致美化。

将文件移动到指定目录下到 matery\source\css\my.css 中添加如下内容即可。

*{
   cursor: url("/medias/a.ico"),auto!important;
}
:active{
   cursor: url("/medias/a.ico"),auto!important;
}

2. 文章模板

Hexo 文章创建后将使用默认模板渲染，如果想要通过自定义样式则在开头添加 layout: false 即可。

---
layout: false
---

/*
   你的 HTML 代码
*/

3. 文章URL

默认生成的文章外链是根据创建的时间，为了更加美观可以修改为根据标题生成，修改根目录站点配置文件_config.yml。

permalink: :year/:month/:day/:title/
 
改为如下：

permalink: :title/

4. 目录滚动

编辑 /themes/matery/layout/_partial/post-detail-toc.ejs 文件中的如下内容。

这里设置了目录模块的最大高度，当超过时则触发垂直滚动。

#toc-content {
    max-height: calc(100vh - 250px);
    padding-bottom: 20px;
    overflow: scroll;
    overflow-x: hidden;
}

5. 滚动样式

修改 /themes/matery/source/css/matery.css 文件，在文末添加如下内容，设置全局滚动轴样式。

::-webkit-scrollbar {
    /* 高宽分别对应横竖滚动条的尺寸 */
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(239, 240, 243);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgb(163, 194, 241);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(122, 171, 245);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:active {
    background: rgb(163, 194, 241);
    border-radius: 10px;
}