Matery 主题个性化修改

页面菜单栏图标个性化设置：

图标

matery主题中的小图标都是调用 http://www.fontawesome.com.cn/faicons 上的图标，记住图标名称，引用的时候直接写就行了，格式如下：

1
2
3
4
About:
  url: /about
  icon: fas fa-user-circle

名称

页面下大标题修改成和菜单栏文本相同：
打开 themes\hexo-theme-matery\languages\zh-CN.yml 文件，修改格式如下：

1
2
3
4
archives: 归档
about: 关于
contact: 访客登记薄
friends: 学习情报处

关于我页面添加自定义内容

打开 theme/matery/layout/about.ejs 文件。
在 13 行有一个 <div class="card"> 标签，找出其对应结尾的标签，大概在 61 行后面新增如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="card">
     <div class="card-content">
         <div class="card-content article-card-content">
             <div class="title center-align" data-aos="zoom-in-up">
                 <i class="fa fa-info-circle"></i>&nbsp;&nbsp;<%- __('关于') %>
              </div>
                 <div id="articleContent" data-aos="fade-up">
                     <%- page.content %>
                 </div>
           </div>
      </div>
</div>

可以在 about 页 index.md 自定义内容。

添加加载动画

1、在主题 /layout/_partial/目录新建一个loading-pages.ejs 内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<style type="text/css" lang="css">
    #loading-container{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100vw;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFF;
        text-align: center;
        /* loader页面消失采用渐隐的方式*/
        -webkit-transition: opacity 1s ease;
        -moz-transition: opacity 1s ease;
        -o-transition: opacity 1s ease;
        transition: opacity 1s ease;
    }
    .loading-image{
        width: 120px;
        height: 50px;
        transform: translate(-50%);
    }

    .loading-image div:nth-child(2) {
        -webkit-animation: pacman-balls 1s linear 0s infinite;
        animation: pacman-balls 1s linear 0s infinite
    }

    .loading-image div:nth-child(3) {
        -webkit-animation: pacman-balls 1s linear .33s infinite;
        animation: pacman-balls 1s linear .33s infinite
    }

    .loading-image div:nth-child(4) {
        -webkit-animation: pacman-balls 1s linear .66s infinite;
        animation: pacman-balls 1s linear .66s infinite
    }

    .loading-image div:nth-child(5) {
        -webkit-animation: pacman-balls 1s linear .99s infinite;
        animation: pacman-balls 1s linear .99s infinite
    }

   .loading-image div:first-of-type {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
        animation: rotate_pacman_half_up .5s 0s infinite;
    }
    .loading-image div:nth-child(2) {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
        animation: rotate_pacman_half_down .5s 0s infinite;
        margin-top: -50px;
    }
    @-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}

    @keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}


    .loading-image div:nth-child(3),
    .loading-image div:nth-child(4),
    .loading-image div:nth-child(5),
    .loading-image div:nth-child(6){
        background-color: #49b1f5;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        width: 10px;
        height: 10px;
        position: absolute;
        transform: translateY(-6.25px);
        top: 25px;
        left: 100px;
    }
    .loading-text{
        margin-bottom: 20vh;
        text-align: center;
        color: #2c3e50;
        font-size: 2rem;
        box-sizing: border-box;
        padding: 0 10px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    @media only screen and (max-width: 500px) {
         .loading-text{
            font-size: 1.5rem;
         }
    }
    .fadeout {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    /* logo出现动画 */
    @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
    @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
 </style>
 <script>
(function () {
    const loaded = function(){
       setTimeout(function(){
            const loader = document.getElementById("loading-container");
            loader.className="fadeout" ;//使用渐隐的方法淡出loading page
            // document.getElementById("body-wrap").style.display="flex";
            setTimeout(function(){
                loader.style.display="none";
            },2500); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
</script>

2、在主题的 layout 目录找到 layout.ejs 文件

在 附近添加内容后如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<html lang="<%= config.language %>">
<%- partial('_partial/head') %>

 <% if (theme.loadingPages.enable) { %>
    <%- partial('_partial/loading-pages') %>
 <% } %>
<body>
    <% if (theme.loadingPages.enable) { %>
        <div id="loading-container">
             <p class="loading-text">嘘~  正在从服务器偷取页面 . . . </p> 
             <div class="loading-image">
                 <div></div>
                 <div></div>
                 <div></div>
                 <div></div> 
                 <div></div>
             </div>
        </div>
    <% } %>

    <%- partial('_partial/header') %>
    ...

3、在主题配置文件_config.yml添加开关配置

1
2
3
loadingPages:
  enable: true  
enable 设置为 true 表示开启加载动画， false 表示关闭加载动画。

修改博客标题在手机端的字体大小

在主题文件的source/css/my.css文件中，新增下面这样的 CSS 代码，然后设置成自己喜欢的字体大小即可

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 修改首页轮播的标题大小 */
@media only screen and (max-width: 601px) {
    .bg-cover .title {
        font-size: 2.5rem;
    }
}

/* 修改博客标题的字体大小 */
@media only screen and (max-width: 601px) {
    header .brand-logo .logo-span {
        font-size: 1.5rem;
    }
}

去掉banner的颜色动画

有的同学可能不喜欢banner的颜色遮罩，特别是在banner图片的颜色和动画颜色一样时，表现不出图片的美观。去掉后放一张高清小姐姐大图，博客访问量一下迅速爆炸！听我的准没错，那如何去掉这个烦人的彩色动画呢？跟着我：在theme主题目录下，找到 source/css/matery.css文件,ctrl+F快捷键查找.bg-cover:after，注释掉即可。

1
2
3
4
/* .bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
} */

参考资料

https://blog.csdn.net/kuashijidexibao/article/details/112971657

https://zhuanlan.zhihu.com/p/259728821

添加相册
https://www.cnblogs.com/chendeqiang/p/12861726.html
https://blog.csdn.net/weixin_39759247/article/details/107055255

建设博客
#Matery
Matery 主题个性化修改
http://www.keker.top/2022/06/27/theme/Matery主题个性化修改/
作者
Keker
发布于
2022年6月27日
许可协议