matery主题个性化定制

☞==前言==

之前用的yilia主题，最近换了matery主题，也折腾的许多东西，抽空把一些自己个性化定制的内容整理一下，整理内容是官方文档里没有的，官方文档链接贴在下方，有需要个性化修改的可以来参考此篇文章，仅代表个人审美，有瑕疵的地方还请指出，谢谢！

先贴出matery主题的官方文档

☞个性化定制修改

☞添加404页面

步骤：在你的博客根目录source里新建一个404.md，内容如下：

1
2
3
4
5
6
7
---
title: 404
date: 
type: "404"
layout: "404"
description: "Oops～，你来到了没有知识的荒原！ :("
---

然后在/themes/matery/layout/目录下新建一个404.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
<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

☞修改首页轮播图高度

打开themes/matery/source/libs/materialize/materialize.min.css文件(ctrl+f搜索.carousel.carousel-slider .carousel-item)修改style属性

1
height:50%;min-height:550px;

打开themes/matery/source/css/matery.css文件(ctrl+f搜索.index-card)修改style属性

1
margin-top: -410px;

根据自己的实际情况调整，可以浏览器F12调整好再做修改
这里只是告诉你要在哪里改css参数，参数根据自己喜好修改

修改后首页的一行小图标：github 、email 、qq 、rss订阅对手机全面屏幕不是太适配，懒得调整css了，索性就把这一行删掉了：

打开themes/matery/layout/_partial/index-cover.ejs文件(ctrl+f搜索cover-social-link)第82行

然后直接删除这行代码，这行图标就消失了

1
<div class="cover-social-link"><%- partial('_partial/social-link') %></div>

☞分类页和标签页合并

首先在主题的配置文件_config.yml中找到menu项，注释掉Tags

1
2
3
#Tags:
#  url: /tags
#  icon: fa-tags

打开layout/tags.ejs把第5行（文章标签）复制粘贴到layout/categories.ejs中去，这里只复制了文章标签内容，下面的词云未复制，可以根据自己需要

1
<%- partial('_widget/tag-cloud') %>

打开layout/about.ejs把第46行（文章统计图）剪切粘贴到layout/categories.ejs中去，这里只把文章统计图位置换到了分类页面去，其他的可以根据自己需要自由转移

1
<%- partial('_widget/post-charts') %>

下面是整理后的categories.ejs文档内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%- partial('_partial/bg-cover') %>

<main class="content">

    <%- partial('_widget/category-cloud') %>

    <%- partial('_widget/tag-cloud') %>

    <% if (site.categories && site.categories.length > 0) { %>
    <%- partial('_widget/category-radar') %>
    <% } %>

    <%- partial('_widget/post-charts') %>


</main>

☞“关于”页面增加简历

打开/themes/matery/layout/about.ejs，找到<div class="card">标签，然后找到它对应的标签，接在后面新增一个card，语句如下：

1
2
3
4
5
6
7
8
9
10
11
12
      <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-address-book"></i>&nbsp;&nbsp;<%- __('我的简历') %>
              		</div>
              		<div id="articleContent" data-aos="fade-up">
                  		<%- page.content %>
              		</div>
      		</div>
  		</div>
</div>

注意粘贴的位置和空格要正确，这里的位置随你自己设置，你也可以把简历作为第一个card

然后在/source/about/index.md下面写上你的简历了（就像写博客一样）

☞添加视听页面

步骤：在你的博客根目录source里新建music/index.md

编辑你刚刚新建的页面文件/source/music/index.md ,至少需要以下内容：

1
2
3
4
5
6
---
title: 视听
date: 
type: "music"
layout: "music"
---

然后在/themes/matery/layout/目录下新建一个music.ejs文件，博主是把首页的我的梦想、音乐、视频内容剪切粘贴过来的，步骤如下：

打开/themes/matery/layout/index.md复制以下内容到music.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
<main class="content">

    <% if (page.current === 1) { %>
    <div id="indexCard" class="index-card">
        <div class="container ">
            <div class="card">
                <div class="card-content">
                    <% if (theme.dream.enable) { %>
                        <%- partial('_widget/dream') %>
                    <% } %>

                    <% if (theme.music.enable && site.data && site.data.musics) { %>
                        <%- partial('_widget/music') %>
                    <% } %>

                    <% if (theme.video.enable) { %>
                        <%- partial('_widget/video') %>
                    <% } %>

                    <div id="recommend-sections" class="recommend">
                        <%- partial('_widget/recommend') %>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <% } %>

下面比较绕了：

上面步骤操作完之后：

删除index.ejs文件中的代码(我的梦想、音乐、视频，可以根据自己爱好选择)如下：

1
2
3
4
5
6
7
8
9
10
11
<% if (theme.dream.enable) { %>
    <%- partial('_widget/dream') %>
<% } %>

<% if (theme.music.enable && site.data && site.data.musics) { %>
    <%- partial('_widget/music') %>
<% } %>
					
<% if (theme.video.enable) { %>
    <%- partial('_widget/video') %>
<% } %>

删除music.ejs文件中的代码（文章置顶）如下：

1
2
3
<div id="recommend-sections" class="recommend">
    <%- partial('_widget/recommend') %>
</div>

再在主题配置文件menu中增加

1
2
3
视听:
    url: /music
    icon: fa fa-music
☞最后贴出修改后完整的music.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
<%- partial('_partial/bg-cover') %>

<main class="content">

    <div id="indexCard" class="index-card">
        <div class="container ">
            <div class="card">
                <div class="card-content">
                    <% if (theme.dream.enable) { %>
                        <%- partial('_widget/dream') %>
                    <% } %>

                    <% if (theme.music.enable && site.data && site.data.musics) { %>
                        <%- partial('_widget/music') %>
                    <% } %>

                    <% if (theme.video.enable) { %>
                        <%- partial('_widget/video') %>
                    <% } %>

                    <div id="recommend-sections" class="recommend">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>

☞修改导航栏颜色

打开themes/matery/source/css/matery.css文件(165行):修改自己想要的颜色

1
2
3
.bg-color {
    background-image: linear-gradient(to right, #2eab9f 0%, #EE82EE 100%);
}

☞修改导航栏右上角github角标颜色

打开themes/matery/layout/_partial/github-link.ejs文件(第十五行)修改color属性就可以随心所欲的改变github角标的颜色

1
2
3
4
5
6
.github-corner svg {
    color: #F062A7;
    fill: #fff;
    height: 64px;
    width: 64px;
}

☞去掉首页banner轮播图的背景颜色

打开themes/matery/source/css/matery.css文件(367行，也可以快速搜索.bg-cover:after进行定位):

然后注释掉这两行css

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

☞给博客增加动态标签

实现方式:

打开博客路径themes/matery/layout/layout.ejs

在前添加如下代码即可

1
<script type="text/javascript">var OriginTitile=document.title,st;document.addEventListener("visibilitychange",function(){document.hidden?(document.title="看不见我🙈~看不见我🙈~",clearTimeout(st)):(document.title="(๑•̀ㅂ•́) ✧被发现了～",st=setTimeout(function(){document.title=OriginTitile},3e3))})</script>

☞valine评论显示问题

打开themes/matery/layout/_partial/valine.ejs文件(ctrl+f搜索.v .vlist .vcard)第238行

修改padding-top:为2.5rem就OK了

1
2
3
4
5
.v .vlist .vcard {
padding-top: 2.5rem;
position: relative;
display: block;
}

☞图片懒加载

修改/themes/matery/source/js中的matery.js文件：

第103行，后面加上最后一段代码

1
2
3
4
5
6
7
8
9
      $('#articleContent, #myGallery').lightGallery({
          selector: '.img-item',
          // 启用字幕
          subHtmlSelectorRelative: true
      });

      $(document).find('img[data-original]').each(function(){
  		$(this).parent().attr("href", $(this).attr("data-original"));
});

再装个插件

1
$ npm install hexo-lazyload-image --save

在博客根目录配置.yml文件加入对应字段，如下：

1
2
3
4
5
6
lazyload:
  enable: true 
  #如果为真，则只有文章或页面中的图像支持延迟加载。
  #如果为假，整个网站的图像将使用惰性加载，包括来自主题的图像，但不包括来自CSS样式的背景图像。
  onlypost: true
  loadingImg: /loading.gif

这里的loading.gif我放在了/themes/matery/source目录上

这样就可以实现图片懒加载

☞增加动态诗词

我们采用今日诗词的每日一句：

首先在/themes/hexo-theme-matery/layout/_partial/head.ejs增加代码：

然后打开/themes/hexo-theme-matery/layout/_partial/bg-cover-content.ejs

把<%= config.description %>改为<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>

如果要弃用动态诗词，直接改回原文件即可。

☞添加相册

参考教程

相册图床 可以参考此篇

☞增加天气插件

中国天气网：https://cj.weather.com.cn/plugin/pc

选择自定义插件—>自定义样式——>生成代码，然后会生成一段代码，复制粘贴到 themes/matery/layout/layout.ejs即可

☞网页特效分享

鼠标跟随特效

雪花特效

樱花特效

鼠标点击文字特效

背景动态彩带

在 themes/matery/source/js 新建相应的js文件，复制粘贴，引入 themes/matery/layout/layout.ejs 即可

示例：

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

也可以直接引用 <script src="/js/xuehuapiaoluo.js"></script>

☞屏蔽网页源码（单纯的屏蔽鼠标右键和键盘事件）

在 themes/matery/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
24
25
<script type="text/javascript">
        window.onload = function(){
            //屏蔽键盘事件
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            //屏蔽鼠标右键
            document.oncontextmenu = function (){
                return false;
            }
        }
</script>

☞添加Tidio在线客服

参考教程

☞网站预加载js脚本

尊重原创，点击查看

☞归档页自定义

样式

添加到 themes\hexo-theme-matery-master\source\my.css 或者其他css随意

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
/*归档页自定义样式*/
.archive-container{
  padding: 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #fff;
}
.archive:not(:last-child) {
  margin-bottom: 3rem;
}

.archive .articles {
  border-left: 1px solid #dbdbdb;
}

.archive .article {
  border-top: none;
  margin-left: -1px;
  padding: 0.4rem 1.5rem;
  border-left: 2px solid transparent;
}

.archive .article:hover {
  border-left-color: #0f9d58 ;
}

.archive .article time {
  font-size: .9rem;
  color: deeppink;
  /* color: darkgray; */
}

.archive .article h6 {
  margin: 0;
}

.archive .article h6 a {
  line-height: 1.5;
  color: inherit;
  border-bottom: 1px dashed transparent;
}

.archive .article h6 a:hover {
  border-bottom-color: #0f9d58;
}


.hbe-input-container{
  width: 80%;
  max-width: 800px;
  position: relative;
  margin: 100px auto;
}

.hbe-input-container  .btn-decrypt{
  display: inline-block;
  vertical-align: top;
  width: 120px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  color: #ffffff;
  background-color: #3f90ff;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.about-cover {
  height: 50vh;
}
.desc-content{
  padding: 0 50px;
}
@media only screen and (max-width: 601px) {
  .desc-content {
    padding: 0 15px;
  }
}

.v .vlist .vcard {
  padding-top: 2.5em !important;
}

修改themes\hexo-theme-matery-master\layout\archive.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
<%- partial('_partial/bg-cover') %>

<section class="section">

    <%- partial('_widget/post-calendar') %>

    <div class="container archive-container">
        <% const groups = {};
        const years = [];
        page.posts.each(post => {
            const year = post.date.year();
            if (typeof(groups[year]) === 'undefined') {
                groups[year] = [];
                years.push(year);
            }
            groups[year].push(post);
        });
        years.sort((a, b) => b - a); %>
        <% for (let year of years) { %>
            <div class="archive">
                <h4 class="archive-year" id="<%= year %>"><%= year %></h4>
                <div class="articles">
                    <% for (let post of groups[year].sort((a, b) => b.date.diff(a.date))) { %>
                        <div class="article content>">
                            <time class="is-text-small" datetime="<%= date_xml(post.date) %>" itemprop="datePublished" >
                                <%= date(post.date, 'MM-D') %> </time>
                            <h6 class="is-6"><a href="<%= url_for(post.link ? post.link : post.path) %>"><%= post.title %></a></h6>
                        </div>
                    <% } %>
                </div>
            </div>
        <% } %>
    </div>
    <div>&nbsp;</div>
        <% if (page.total > 1) { %>
            <%- partial('_partial/paging') %>
        <% } %>

</section>

☞添加在线聊天室

打开闲聊么

注册登陆后把相关代码插入themes\hexo-theme-matery-master\layout\_partial\footer.ejs即可

☞添加灯笼

在footer.ejs里面添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 灯笼1 -->
<div class="deng-box">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">春节</div></div>
        </div>
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    </div>
</div>
 
<!-- 灯笼2 -->
<div class="deng-box1">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">快乐</div></div>
        </div>
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    </div>
</div>

然后在matery.css里面添加下面样式就行了:

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
.deng-box {
    position: fixed;
    top: 20px;
    z-index: 999;
}
.deng-box1 {
    position: fixed;
    top: 20px;
    right: 10px;
    z-index: 999;
}
 
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
 
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
 
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.xian {
    position: absolute;
    top: -65px;
    left: 60px;
    width: 2px;
    height: 65px;
    background: #dc8f03;
}
 
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
 
.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
 
.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
 
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 1rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
 
.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
    background: transparent !important;
}
 
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
 
    50% {
        -moz-transform: rotate(10deg)
    }
 
    100% {
        -moz-transform: rotate(-10deg)
    }
}
 
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
 
    50% {
        -webkit-transform: rotate(10deg)
    }
 
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

未完待续

教程
#Hexo #Matery
matery主题个性化定制
http://aiyoja.github.io/20220707/
作者
弶森
发布于
2022年7月6日
许可协议