matery主题个性化定制

Hexo

blog

发布日期: 2019-08-25

文章字数: 3.6k

阅读时长: 18 分

阅读次数:

☞==前言==

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

先贴出matery主题的官方文档

☞
个性化定制修改

☞
添加404页面

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

---
title: 404
date: 
type: "404"
layout: "404"
description: "Oops～，你来到了没有知识的荒原！ :("
---

然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：

<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属性

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

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

margin-top: -410px;

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

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

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

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

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

☞
分类页和标签页合并

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

  #Tags:
  #  url: /tags
  #  icon: fa-tags

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

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

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

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

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

<%- 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，语句如下：

        <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 ,至少需要以下内容：

---
title: 视听
date: 
type: "music"
layout: "music"
---

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

打开/themes/matery/layout/index.md复制以下内容到music.ejs文件：

<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文件中的代码(我的梦想、音乐、视频，可以根据自己爱好选择)如下：

                    <% 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文件中的代码（文章置顶）如下：

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

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

视听:
    url: /music
    icon: fa fa-music

☞
最后贴出修改后完整的music.ejs文件代码

<%- 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行):修改自己想要的颜色

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

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

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

    .github-corner svg {
        color: #F062A7;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

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

然后注释掉这两行css

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

☞
给博客增加动态标签

实现方式:

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

在前添加如下代码即可

<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了

    .v .vlist .vcard {
    padding-top: 2.5rem;
    position: relative;
    display: block;
    }

☞
图片懒加载

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

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

        $('#articleContent, #myGallery').lightGallery({
            selector: '.img-item',
            // 启用字幕
            subHtmlSelectorRelative: true
        });

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

再装个插件

$ npm install hexo-lazyload-image --save

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

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

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

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

☞
增加动态诗词

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

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

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

然后打开/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 即可

示例：

<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 添加如下代码

<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随意

/*归档页自定义样式*/
.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为以下代码：

<%- 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 -->
<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里面添加下面样式就行了:

.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)
    }
}

未完待续

转载请注明: My blog matery主题个性化定制

完美解决github访问、下载速度慢

解决github访问、下载速度慢的问题

2019-11-16 随笔

随笔

测试文章加密-[test]

输入密码后查看内容

2019-05-11 qvchuang

☞==前言==

☞个性化定制修改

☞添加404页面

☞修改首页轮播图高度

☞分类页和标签页合并

☞“关于”页面增加简历

☞添加视听页面

☞最后贴出修改后完整的music.ejs文件代码

☞修改导航栏颜色

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

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

☞给博客增加动态标签

☞valine评论显示问题

☞图片懒加载

☞增加动态诗词

☞添加相册

☞增加天气插件

☞网页特效分享

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

☞添加Tidio在线客服

☞网站预加载js脚本

☞归档页自定义

☞添加在线聊天室

☞添加灯笼

你的赏识是我前进的动力