玩命加载中 . . .

自定义Matery主题教程

Hexo Blog
Hexo
发布日期:   2020-06-22
更新日期:   2020-06-22
文章字数:   2.9k
阅读时长:   13 分
阅读次数:  

官方文档

先按照官方文档操作一遍—>传送门

自定义

添加404页面

在/source/新建404.md，内容如下：

---
title: 404
date: 2020-06-22 15:04:45
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>

修改新建文章模版

打开博客scaffolds/post.md,修改为：

---
title: {{ title }}
date: {{ date }}
top: false
cover: false
toc: true
snow: false
mathjax: false
author: 
img: 
coverImg: 
password: 
summary: 
tags: 
categories: 
---

增加建站时间

在themes/matery/_config.yml找到以下内容(42行)：

# Website start time.
# 站点运行开始时间.
time:
  enable: true
  year:  # 年份
  month:  # 月份
  date:  # 日期
  hour:  # 小时
  minute:  # 分钟
  second:  # 秒

修改为你的建站时间即可

添加动漫人物

在我的另一篇文章里—>传送门
这时，便出现了一个Bug，就是不蒜子，即网站访问量不显示了解决方法如下：
打开themes\matery\layout\_partial中的footer.ejs，把将本站总访问量和访客数的代码改为如下：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>      
    <span id="busuanzi_container_site_pv" style='display:none'></span>
        <i class="fa fa-heart-o"></i>
        本站总访问量 <span id="busuanzi_value_site_pv" class="white-color"></span>

<% } %>

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
    <span id="busuanzi_container_site_uv" style='display:none'></span>
        人次,&nbsp;访客数 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.

<% } %>

变化就在下面两句，将源代码对应字段后面的＜/span＞写在前面了。

<span id="busuanzi_container_site_pv" style='display:none'></span>
<span id="busuanzi_container_site_uv" style='display:none'></span>

发现按照上面改了过后，又出现一个新bug：文章头部的阅读次数不显示了，解决办法：
打开themes\matery\layout\_partial中的post-detail.ejs，找到对应代码字段：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
    <div id="busuanzi_container_page_pv" class="info-break-policy">
        <i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:&nbsp;&nbsp;
        <span id="busuanzi_value_page_pv" ></span>
    </div>

<% } %>

修改为下面的就可以了：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
        <span id="busuanzi_container_site_pv" style='display:none'></span>
        <i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:&nbsp;&nbsp;
        <span id="busuanzi_value_page_pv" ></span>

<% } %>

添加博客趣味标题

打开博客主题文件夹，路径：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>

添加博客天气插件

去中国天气网：传送门

选择自定义插件—>自定义样式——>生成代码，然后会生成这样一段代码:

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

将其插入/themes/matery/layout/layout.ejs就可以了

修改社交链接

主页banner图中显示的社交链接与底部的社交链接是同步修改的，打开主题配置文件，将社交链接信息修改为你的信息。修改如下:

# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
  github:  https://github.com/blinkfox
  email: 1181062873@qq.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: 1181062873
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: true # true、false

首页 banner 中的第二个按钮的配置改为：

indexbtn:
  enable: true
  name: Github
  icon: fab fa-github-alt
  url:  # your github ,like https://github.com/yourname

去掉banner图的动态滤镜颜色并修改导航栏颜色

打开themes/matery/source/css/matery.css文件，查找下面的代码块，然后将其注释即可。如下：

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

或者是找到如下代码，将其注释掉即可：


/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}
@keyframes rainbow {
    /* 动态切换背景颜色. */
}

修改导航栏颜色及透明效果

打开themes/matery/source/css/matery.css文件，大约在250行，有一个.bg-color属性，修改其属性值即可，代码如下：

.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值
    opacity: 0.8;  //透明效果 值范围 0~1，看情况自己修改
}

添加首页动态打字效果副标题

在主题配置文件中，找到下面的配置：

# 网站副标题，打字效果
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle: 
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub1: ……
  sub2: ……

网站打字效果副标题默认有两个，即sub1和sub2，如果想写多个，则需要修改两处地方，首先修改配置文件，如上面所示，在sub1和sub2后面继续添加即可，然后在去主题目录下的layout文件夹下的_partial文件夹，
修改bg-cover-content.ejs文件，大约在12行左右，如下面所示：

 <div class="description center-align">
     <% if (theme.subtitle.enable) { %>
         <span id="subtitle"></span>
         <script src="https://testingcf.jsdelivr.net/npm/typed.js@2.0.11"></script>
        <script>
            var typed = new Typed("#subtitle", {
                strings: ['<%= theme.subtitle.sub1 %>',
                          '<%= theme.subtitle.sub2 %>',
                          '<%= theme.subtitle.sub3 %>',  /* 此处添加类似于'<%= theme.subtitle.sub2 %>',的代码 */
                 startDelay: <%= theme.subtitle.startDelay %>,
                 typeSpeed: <%= theme.subtitle.typeSpeed %>,
                 loop: <%= theme.subtitle.loop %>,   
                 backSpeed: <%= theme.subtitle.backSpeed %>,
                 showCursor: <%= theme.subtitle.showCursor %>
              });
          </script>
      <% } else { %>
            <%= config.description %>
      <% } %>
</div>

添加动态诗词

采用的是今日诗词，每次返回一句诗词，根据时间、地点、天气、事件智能推荐。官网有API文档，
可以去看一下，有多种安装方式，最简单的方式就是从官网获取代码，
在/themes/matery/layout/_partial/head.ejs添加下面的一行代码：

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

然后再将/themes/matery/layout/_partial/bg-cover-content.ejs中的<%= config.description %>修改为
<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>，最后将主题配置文件的subtitle的值改为false。

自定义鼠标样式

建议大家下载鼠标指针样式的格式为ico格式，大小为16 x 16，或者24 x 24的。
将鼠标指针样式放在了主题文件夹下的source/medias目录下，然后打开主题文件夹下的source/css/my.css文件，在末尾添加如下内容：

*{
    cursor: url("/medias/cursor1.ico"),auto!important;
}
:active{
    cursor: url("/medias/cursor2.ico"),auto!important;
}

添加说说页面

leancloud的相关准备

🌍 使用国际版的leancloud

因为leancloud的国内节点需要接入备案域名作为安全域名。明显违背了适用性强的理念。这里推荐大家使用国际版，当然国内版的也可以，但是不要忘了填写severurl即可。

  1. 前往leancloud国际版，注册账号。
  2. 注册完成之后根据leancloud的提示绑定手机号和邮箱。
  3. 绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建class，命名为shuoshuo。
  4. 在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。
  5. 回到结构化数据中，点击class下的shuoshuo。找到权限，在Class访问权限中将add_fields以及create权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将delete和update也设置为跟它们一样的权限。
  6. 点击class下的_User添加列，列名称为img，默认值填上你这个账号想要用的头像url，这一项不进行配置，说说头像会显示为默认头像——Artitalk的logo。
  7. 在最菜单栏中找到设置->应用keys，记下来AppID和AppKey，一会会用。
  8. 最后将_User中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。
  9. 因为leancloud功能的限制。若想同时使用valine和artitalk，请在class中添加名为Comment的class。不推荐在存储valine的应用中新建名为shuoshuo的class，可能会出现神奇的bug。

❗ 关于设置权限的这几步
这几步一定要设置好，才可以保证不被“闲人”破解发布说说的验证

新建页面

新建页面

hexo new page "artitalk"

写入

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>

<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<div id="artitalk_main"></div>
<script>
new Artitalk({
    appId: '',
    appKey: '',
})
</script>
</body>

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

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

<main class="content">
    <div id="artitalk" class="container chip-container">
        <div class="card">
            <div class="card-artitalk">
                <div class="tag-title center-align">
                    <i class="fas fa-comment-dots"></i>&nbsp;&nbsp;<%= __('artitalk') %>
                </div>
                <%- page.content %>
            </div>
        </div>
	</div>
</main>

JsDelivr加速文章图片

jsdelivr 已禁止cdn加速图片，本条作废

在/source/js/others/新建jsdelivrpicc.js：

var name = "BlueSky01st";
var repository = "bluesky01st.github.io";
if(document.domain != 'localhost'){
    for (var key in document.getElementById("articleContent").getElementsByTagName('img')){
        if (isNaN(key)){
            break;
        }
    	document.getElementById("articleContent").getElementsByTagName('img')[key].src = document.getElementById("articleContent").getElementsByTagName('img')[key].src.replace(document.domain,"testingcf.jsdelivr.net/gh/" + name + "/" + repository)
    }
}

把第一行的name和第二行的repository的值改为你的。
到_config.yml写入:

jsdelivrpic:
    enable: true

到_config.yml的libs\js写入:

jsdelivrpic: /libs/others/jsdelivrpic.js

博客支持PWA

安装插件:

npm install hexo-offline-popup

在博客根目录_config.yml中新增:

# PWA
# https://github.com/Colsrch/hexo-offline-popup
# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  stripPrefix: public
  verbose: false
  runtimeCaching:
    - urlPattern: /*  # 子路径（接受通配符）
      handler: cacheFirst
      options:
        origin: tesingcf.jsdelivr.net  # 域名

准备36x36,48x48,72x72,96x96,128x128,512x512的图片各一张放在themes/matery/source/medias中

可以在https://www.iloveimg.com/resize-image 中修改图片尺寸

在themes/matery/source新建manifest,json,写入:

{
    "name": "BlueSky01st's Blog", 
    "short_name": "BlueSky01st's Blog", 
    "theme_color": "#fff", 
    "background_color": "#4995b1",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [ 
        {
          "src": "/medias/36.png",
          "sizes": "36x36",
          "type": "image/png"
        },
        {
            "src": "/medias/48.png",
          "sizes": "48x48",
          "type": "image/png"
        },
        {
          "src": "/medias/72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": "/medias/96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "/medias/144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "/medias/180.png",
          "sizes": "180X180",
          "type": "image/png"
        },
        {
          "src": "/medias/192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
            "src": "/medias/512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
      ],
      "splash_pages": null
  }

把第二行和第三行的改成你的，再运行

hexo cl && hexo g

在themes/matery/layout/_partial/head.ejs中写入:

<link rel="manifest" href="/manifest.json">

优化url

安装插件hexo-abbrlink

`npm install hexo-abbrlink --save

把_config.yml中permalink改为

permalink: posts/:abbrlink.html

再新增

# abbrlink
abbrlink:
  alg: crc32  
  rep: hex

最后运行hexo cl && hexo g.

用 hexo-neat 压缩代码

首先安装

npm install hexo-neat --save

在根目录下的_config.yml中添加：

#hexo-neat
neat_enable: true
neat_html:
  enable: true
  exclude:
    - '**/*.md'
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/**/instantpage.js'
    - '**/matery.js'

更新中……

文章作者: BlueSky01st
文章链接: https://blog.bluesky01st.vercel.app/posts/d76019f8.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY-NC-ND 4.0 许可协议。转载请注明来源 BlueSky01st !
Hexo Blog
评论
评论
  目录