请注意：不同主题可能方法有些不同，相同主题不同版本，配置方法也有所差异！

博客美化前提条件：有一定的前端基础，了解 HTML、CSS、JS，了解 CSS 预处理语言 Sass、Less、Stylus，搞懂 hexo 的目录结构。

博客美化通用步骤：选定主题，认真阅读主题文档，分析主题目录结构，了解每个文件是对应网页哪个部分的，认真阅读美化教程，美化教程本质上只为你提供核心代码和思路，具体代码要添加到哪个地方，需要你自己搞懂主题结构，添加到需要的、合适的位置！
不同主题要是没有对应的文件夹，可以新建一个

修改目录

themes\hexo-theme-matery-master\source\libs\tocbot\tocbot.css
中添加

#toc-content ol li {
    line-height: 2rem;
}

themes\hexo-theme-matery-master\source\css\matery.css 中添加下列代码

/* 美化ol标签 */
ol{
    list-style: none;  /* 隐藏原来的 1. 2. 等序号样式 */
    counter-reset: ol-li;
  }
  
ol li:before {
    display: block;
    float: left;
    width: 19px;   /* 宽度和高度需要根据自己的字体大小进行修正 */
    height: 19px;
    line-height: 19px;
    margin: 4px 12px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    background-color: #49b1f5;
    border-radius: 50%;
    text-align: center;
    content: counter(ol-li);
    counter-increment: ol-li;
    transition: all 1s;
  }
ol li:hover::before{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

最终效果：

优化搜索框

themes\hexo-theme-matery-master\source\css\matery.css 找到对应代码 替换下列

/*搜索层样式*/
#searchIcon {
    font-size: 1.2rem;
}
@media screen and (min-width: 1202px) {
    #searchModal {
        top: 13%!important;
        width: 56%!important;
    }
}
#searchModal {
    min-height: 100px;
    width: 80%;
    background-color: rgba(0,0,0,0.4);
    border-radius: 10px;
}
body.dark #searchModal {
    background-color: rgba(255, 255, 255, 0.1);
}

#searchModal .search-header .title {
    font-size: 1.1rem;
    color: #42b983;
}

.search-result {
    color: #fff;
}

#searchResult {
    margin: -15px 0 10px 10px;
}

#searchResult .search-result-list {
    margin-left: -8px;
    padding-left: 0;
    color: #666;
}

.search-result-list .search-result-title {
    font-size: 1.2rem;
    color: #42b983;
}

.search-result-list li {
    /* border-bottom: 1px solid #e5e5e5; */
    padding: 15px 0 5px 0;
}

.search-result-list .search-keyword {
    margin: 0 2px;
    padding: 1px 5px 1px 4px;
    border-radius: 2px;
    background-color: #f2f2f2;
    color: #e96900;
    font-style: normal;
    white-space: pre-wrap;
}

最终效果：

添加樱花飘落效果

在themes/matery/source/js目录下新建sakura.js文件，打开这个网址传送门，将内容复制粘贴到sakura.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容：

<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
    document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

最终效果：

添加背景代码雨特效

在themes/matery/source/js目录下新建DigitalRain.js文件，打开这个网址传送门，将内容复制粘贴到DigitalRain.js即可。

然后在主题的 layout.ejs 文件中引入即可：

<!-- 数字雨 -->
<canvas id="canvas" width="1440" height="900" ></canvas>
<script type="text/javascript" src="/js/DigitalRain.js"></script>

在themes\hexo-theme-matery-master\source\css\matery.css文件中添加

/* 背景数字雨 */
canvas {
    position:fixed;
    right:0px;
    bottom:0px;
    min-width:100%;
    min-height:100%;
    height:auto;
    width:auto;
    z-index:-5;
}

.cateee{
    margin-top: 15px;
}

最终效果：