hexo-matery主题优化

目录滚动

默认情况下matery主题, 文章中当目录过多, 超出页面后便无法展示多余目录, 解决方案如下. (该方案取自github issues中, 只能做简单滚动)

1. 全局搜索#toc-content {

   或者直接找到目录/themes/xxx/source/css/post.css

2. 更改如下代码

#toc-content {
    padding-bottom: 30px;
    overflow: auto;
}

/*※※※※改成※※※※*/

#toc-content {
    padding-bottom: 30px;
    overflow-y: scroll;
    height: calc(100vh - 250px);
    scroll-behavior: smooth;
    transform: translateY(0px);
}

滚动条颜色调整

原滚动条颜色是暖红色调, 现改为冷蓝色调

主题文件

/themes/xxx/source/css/post.css

• 分别搜索

​ ::-webkit-scrollbar-thumb

​ ::-webkit-scrollbar-track

• 改为: background-color: #18bfd0;

暗色文件

/themes/xxx/source/css/dark.css

• 搜索body.DarkMode .progress-bar

• 改为 background: linear-gradient(to right, #2fb0e5 0%, #2ce0cb 100%);

区块颜色调整

区块由于在主题源码包中已经有相关定义, 因此需要针对源码包进行调整

源码文件

themes/xxx/source/libs/materialize/materialize.min.css

• 删除

  border-left:5px solid #ee6e73}

主题文件

themes/xxx/source/css/matery.css

• 搜索 blockquote {

• 改为

blockquote {
    border-left: 3px solid #67767c !important;
    padding: 1rem 0.8rem 0.2rem 0.8rem;
    color: #666;
    background-color: rgb(94 163 157 / 10%);
    text-align: justify;
}

夜间文件

themes/xxx/source/css/dark.css

• 搜索 body.DarkMode blockquote {
• 改为(此处色调未调整, 依旧是暖红色调

body.DarkMode blockquote {
    background-color: #666 !important;
    border-left: 3px solid #d72f0f !important;
    color: rgba(255, 255, 255, 0.6);
    text-align: justify;
}

目录颜色

文件

themes/xxx/source/css/post.css

• 搜索#toc-content .toc-link:hover {

• 将悬停颜色改为 color: #009cff;

• 搜索#toc-content .is-active-link {

• 将激活颜色改为 color: #009cff

firework 爆炸烟花

1. ejs 调整

themes/hexo-theme-matery/layout/layout.ejs 新增代码

<% if (theme.firework.enable) { %>
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<!--        <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>-->
    <script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.anime) %>"></script>
    <script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.firework) %>" async="async"></script>
<% } %>

2. 新增 js 文件

themes/hexo-theme-matery/source/libs/others 新增 firework.js anime.min.js

3. themes 主题配置调整

firework:
  enable: true
...
libs:
  js:
    firework: /libs/others/firework.js
    anime: /libs/others/anime.min.js

图片异步加载

新增依赖

npm install hexo-lazyload-image --save

在 hexo 根配置文件下添加

lazyload:
  enable: true  # 是否开启图片懒加载
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif

hexo cl & hexo g & hexo s 即可看到效果