matery主题个性化定制

==前言==

之前用的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;
    }

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

打开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>' %>

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

未完待续


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

  目录