blog主题定制（matery）
blog hexo
hexo
发布日期:   2019-09-29
文章字数:   3k
阅读时长:   12 分
阅读次数:  

前言

本站所用主题matery，最近整理了一下配置，改一些美化相关的东西，根据个人喜好定制，如有瑕疵还请说明
hexo-theme-matery仓库地址，这里再次感谢作者的开源。

个性化定制

根据个人喜好完成定制

初始化定制

中文初始配置文档

  • 新建分类 categories 页
  • 新建标签 tags 页
  • 新建关于我 about 页
  • 新建留言板 contact 页（可选的）
  • 新建友情连接 friends 页（可选的）
  • 添加emoji表情支持（可选的）
  • 代码高亮
  • 搜索
  • 文章字数统计插件（可选的）
  • 添加 RSS 订阅支持（可选的）
  • 在线聊天功能（可选的）
  • 修改社交链接
  • 修改页脚
  • 打赏的二维码图片
  • 配置音乐播放器（可选的）

自定义个性化修改

最全示例

修改新建文章模板/scaffolds/post.md

---
title: 文章标题
date: 2018-09-07 09:25:00
author: echo丶若梦
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Js
tags:
  - React
  - Dva
---
  • Front-matter 选项详解
    Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。
    配置选项 默认值 描述
    title 文件名（标题） 文章标题，强烈建议填写此选项
    data 文件创建时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局唯一
    author 根 _config.yml 中的 autho 文章作者
    img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
    top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
    cover false v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
    coverImg 无 v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
    password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
    toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
    mathjax false 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
    summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
    categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
    tags 无 文章标签，一篇文章可以多个标签
    reprintPolicy 无 文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

添加404页面

原来的主题没有404页面，我们加一个。首先在/source/目录下新建一个404.md，内容如下：

title: 404
date: 2019-08-5 16:41:10
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>
    // 随机切换
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + Math.floor(Math.random()*6) + '.jpg)'); 
</script>

关于”页面增加简历（可选）

修改/themes/matery/layout/about.ejs，找到<div class="card">标签，然后找到它对应的</div>标签，接在后面新增一个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;<%- __('myCV') %> </div>
                <div id="articleContent" data-aos="fade-up"> <%- page.content %> </div>
            </div>
        </div>
    </div>

这样就会多出一张card，然后可以在/source/about/index.md下面写上你的简历了，当然这里的位置随你自己设置，你也可以把简历作为第一个card

定制 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，每次刷新随机切换。
banner图 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 代码中：（banner 如图片数量 5 就是Math.random()*5）

$('.bg-cover').css('background-image', 'url(/medias/banner/' + Math.floor(Math.random()*5) + '.jpg)');

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

去掉首页banner的背景颜色

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

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

将分类页合并到 标签页

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

  # Categories:
  #   url: /categories
  #   icon: fa-bookmark

打开layout/categories.ejs把内容（文章分类）复制粘贴到layout/tags.ejs中去
<%- partial('_widget/category-cloud') %>
打开layout/about.ejs把第46行（文章统计图）剪切粘贴到layout/tags.ejs中去
<%- partial('_widget/post-charts') %>
整理后的tags.ejs文档内容:

<%- partial('_partial/bg-cover') %>

<main class="content">

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

    <% if (site.tags && site.tags.length > 0) { %>
    <%- partial('_widget/tag-wordcloud') %>
    <% } %>

    <!-- 文章分类雷达图 -->
    <% if (site.categories && site.categories.length > 0) { %>
    <%- partial('_widget/category-radar') %>
    <% } %>

    <!-- 文章统计图 -->
    <%- partial('_widget/post-charts') %>

</main>

修改导航栏和页脚渐变色

打开themes/matery/source/css/matery.css文件(165行):
然后注释掉这两行css

.bg-color {
    background-image: linear-gradient(to right, #bf30ac 0%, #0f9d58 100%);
    opacity: 0.9;
}

给博客增加动态标签

打开博客路径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>

图片懒加载

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

        $('#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>' %>
如果要弃用动态诗词，直接改回原文件即可。

添加评论插件

由于这个主题自带了gittalk、gitment、valine等评论插件，所以我们只需要对应插件参数就行了，这个博客用的是gittalk

gitalk:
  enable: true
  owner: 仓库拥有者
  repo: 仓库名称
  oauth:
    clientId: Client ID
    clientSecret: Client Secret
  admin:  GitHub repository 的所有者和合作者

当然也可以用其他评论插件，只需要配置对应项就是了

背景动态彩带

这个效果是主题带有的只需在/themes/hexo-theme-matery/_config.yml文件，定位到ribbon_dynamic

ribbon_dynamic:
  enable: true

背景静止彩带

这个效果是主题带有的只需在/themes/hexo-theme-matery/_config.yml文件，定位到ribbon

ribbon:
  enable: true
  size: 150 # 彩带大小, 默认: 90.
  alpha: 0.6 # 彩带透明度 (0 ~ 1), 默认: 0.6.
  zIndex: -1 # 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1.
  click_to_change: false  # 设置是否每次点击都更换彩带.

背景粒子

这个效果是主题带有的只需在/themes/hexo-theme-matery/_config.yml文件，定位到canvas_nest

canvas_nest:
  enable: true
  color: '78, 238, 148' # 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
  pointColor: 0,0,255 # 交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
  opacity: 0.7 # 线条透明度（0~1）, 默认: 0.5
  zIndex: -1 # 背景的 z-index 属性，css 属性用于控制所在层的位置, 默认: -1.
  count: 99 # 线条的总数量, 默认: 99

点击爱心

这个效果是主题带有的只需在/themes/hexo-theme-matery/_config.yml文件，定位到clicklove

clicklove:
  enable: true

默认是开启状态

添加博客天气插件

点击中国天气网
选择自定义插件—>自定义样式——>生成代码，然后会生成这样一段代码

<script type="text/javascript">WIDGET = {FID: '1IJzWqjceC'}</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>

在 /themes/matery/source/layout/_widget 新建文件 weather.ejs，把上面生成的代码添加进入,可以设置只有桌面端显示,如下修改:

<!-- 天气接口 -->
<script type="text/javascript">
    WIDGET = {FID: '1IJzWqjceC'}
</script>

<script type="text/javascript">
    //只在桌面版网页启用特效 
    var windowWidth = $(window).width();
    if (windowWidth > 768) {
        document.write('<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"><"/"script>');
    } 
</script>

然后在 /themes/matery/layout/_partial/layout.ejs 中添加如下代码：

    <!-- 天气接口控件 -->
    <% if (theme.weather.enable) { %>
    <%- partial('_widget/weather') %>
    <% } %>

在主题配置文件 /themes/hexo-theme-matery/_config.yml中配置:

# 天气接口插件
weather:
  enable: true

添加雪花飘落动效

在 /themes/matery/source/js 新建文件 snow.js，并添加如下代码
并复制snow.js内容到snow.js
然后在/themes/matery/layout/layout.ejs中添加如下代码：

    <% if (theme.snow.enable) { %>
    <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 768) { document.write('<script type="text/javascript" src="/js/snow.js"><"/"script>') }
    </script>
    <% } %>

在主题配置文件 /themes/hexo-theme-matery/_config.yml中配置:

  # 背景雪花效果.
snow:
  enable: true

添加樱花飘落动效

在 /themes/matery/source/js 新建文件 sakura.js，并添加如下代码
并复制sakura.js内容到sakura.js
然后在/themes/matery/layout/layout.ejs中添加如下代码：

    <% if (theme.sakura.enable) { %>
    <script type="text/javascript">
        //只在桌面版网页（首页）启用特效
        var windowWidth = $(window).width();
        if (window.location.href == 'https://ght5935.github.io/') {
            if (windowWidth > 768) { document.write('<script type="text/javascript" src="/js/sakura.js"><"/"script>') }
        }
    </script>
    <% } %>

在主题配置文件 /themes/hexo-theme-matery/_config.yml中配置:

  # 背景樱花飘落动效.
sakura:
  enable: true

添加鼠标滑过动效

在 /themes/matery/source/js 新建文件 mouseSlip.js，并添加如下代码
并复制sakura.js内容到mouseSlip.js
然后在/themes/matery/layout/layout.ejs中添加如下代码：

    <% if (theme.mouseSlip.enable) { %>
        <script type="text/javascript" src="/js/mouseSlip.js"></script>
    <% } %>

在主题配置文件 /themes/hexo-theme-matery/_config.yml中配置:

  # 页面鼠标滑过动效
mouseSlip:
    enable: true
赏

   转载规则


《blog主题定制（matery）》 由 echo丶若梦 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
JS判断客户端是否是iOS或者Android JS判断客户端是否是iOS或者Android
JS判断客户端是否是iOS或者Android每个客户端都带有自身的UA标识，通过JavaScript，可以获取客户端标识，我们可以获取浏览器的userAgent，用正则来判断手机是ios（苹果）还是Android（安卓）客户端。代码如下：
2019-10-16 app
下一篇 
服务器上搭建node 服务器上搭建node
在服务器上安装Nodejs 使用命令行登录到服务器上ssh userName@remoteAddress // ssh root@192.168.1.26 查看服务器系统的位数信息uname -a // Linux li
2019-09-25 node
node
  目录