Hexo博客主题安装以及优化（三）

hexo Matery

发布日期: 2021-01-18

更新日期: 2021-09-14

文章字数: 1.9k

阅读时长: 10 分

阅读次数:

在页脚加上 GitHub badge

在footer.ejs文件中添加以下内容（在适当的位置添加）：

    <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://hexo.io/" target="_blank" title="由 Hexo 强力驱动">
            <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://github.com/" target="_blank" title="静态网页托管于 GitHub Pages 和 Coding Pages 和 Gitee Pages">
            <span class="badge-subject">Hosted</span><span class="badge-value bg-brightgreen">GitHub & Coding & Gitee</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://cloud.tencent.com/" target="_blank" title="腾讯云提供域名相关服务">
            <span class="badge-subject">DNS</span><span class="badge-value bg-blueviolet">Tencent</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://www.jsdelivr.com/" target="_blank" title="jsDelivr 提供 CDN 加速服务">
            <span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span></a>
          </div>
          <div class="github-badge">
              <a style="color: #fff" rel="license" href="https://blinkfox.github.io/" target="_blank" title="站点使用 Matery主题">
            <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Matery</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可">
            <span class="badge-subject"><i class="fa fa-copyright"></i></span><span class="badge-value bg-lightgrey">BY-NC-SA 4.0</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://996.icu/" target="_blank" title="支持 996.ICU">
            <span class="badge-subject">Link</span><span class="badge-value bg-red">996.ICU</span></a>
          </div>
          <div class="github-badge">
            <span class="badge-subject">UV</span><span class="badge-value bg-orange" id="busuanzi_value_site_uv"></span>
          </div>
          <div class="github-badge">
            <span class="badge-subject">PV</span><span class="badge-value bg-brightgreen" id="busuanzi_value_site_pv"></span>
          </div>
          <div class="github-badge">
            <span class="badge-subject">WordCount</span><span class="badge-value bg-blueviolet"><%= totalcount(site) %></span>
          </div>
</div>

然后添加css样式，自己选择代码的添加位置，可以直接放在footer.ejs文件中，也可以放在my.css文件中，代码如下：

    <style>
    .github-badge {
        display:inline-block;
        border-radius:4px;
        text-shadow:none;
        font-size:13px;
        color:#fff;
        line-height:15px;
        background-color:#ABBAC3;
        margin-bottom:5px;
    }
    .github-badge .badge-subject {
        display:inline-block;
        background-color:#4D4D4D;
        padding:4px 4px 4px 6px;
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
    }
    .github-badge .badge-value {
        display:inline-block;
        padding:4px 6px 4px 4px;
        border-top-right-radius:4px;
        border-bottom-right-radius:4px;
    }
    .github-badge .bg-brightgreen {
        background-color:#4DC820 !important;
    }
    .github-badge .bg-orange {
        background-color:#FFA500 !important;
    }
    .github-badge .bg-yellow {
        background-color:#D8B024 !important;
    }
    .github-badge .bg-blueviolet {
        background-color:#8833D7 !important;
    }
    .github-badge .bg-pink {
        background-color:#F26BAE !important;
    }
    .github-badge .bg-red {
        background-color:#e05d44 !important;
    }
    .github-badge .bg-blue {
        background-color:#007EC6 !important;
    }
    .github-badge .bg-lightgrey {
        background-color:#9F9F9F !important;
    }
    .github-badge .bg-grey, .github-badge .bg-gray {
        background-color:#555 !important;
    }
    .github-badge .bg-lightgrey, .github-badge .bg-lightgray {
        background-color:#9f9f9f !important;
    }
</style>

然后进行本地调试，查看效果即可，本地调试好后，在进行部署的相关操作。

添加加载动画

在 /layout/_partial/ 目录新建一个 loading-pages.ejs 内容如下：

    <style type="text/css" lang="css">
    #loading-container{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100vw;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFF;
        text-align: center;
        /* loader页面消失采用渐隐的方式*/
        -webkit-transition: opacity 1s ease;
        -moz-transition: opacity 1s ease;
        -o-transition: opacity 1s ease;
        transition: opacity 1s ease;
    }
    .loading-image{
        width: 120px;
        height: 50px;
        transform: translate(-50%);
    }

    .loading-image div:nth-child(2) {
        -webkit-animation: pacman-balls 1s linear 0s infinite;
        animation: pacman-balls 1s linear 0s infinite
    }

    .loading-image div:nth-child(3) {
        -webkit-animation: pacman-balls 1s linear .33s infinite;
        animation: pacman-balls 1s linear .33s infinite
    }

    .loading-image div:nth-child(4) {
        -webkit-animation: pacman-balls 1s linear .66s infinite;
        animation: pacman-balls 1s linear .66s infinite
    }

    .loading-image div:nth-child(5) {
        -webkit-animation: pacman-balls 1s linear .99s infinite;
        animation: pacman-balls 1s linear .99s infinite
    }

    .loading-image div:first-of-type {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
        animation: rotate_pacman_half_up .5s 0s infinite;
    }
    .loading-image div:nth-child(2) {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
        animation: rotate_pacman_half_down .5s 0s infinite;
        margin-top: -50px;
    }
    @-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}

    @keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}


    .loading-image div:nth-child(3),
    .loading-image div:nth-child(4),
    .loading-image div:nth-child(5),
    .loading-image div:nth-child(6){
        background-color: #49b1f5;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        width: 10px;
        height: 10px;
        position: absolute;
        transform: translateY(-6.25px);
        top: 25px;
        left: 100px;
    }
    .loading-text{
        margin-bottom: 20vh;
        text-align: center;
        color: #2c3e50;
        font-size: 2rem;
        box-sizing: border-box;
        padding: 0 10px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    @media only screen and (max-width: 500px) {
         .loading-text{
            font-size: 1.5rem;
         }
    }
    .fadeout {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    /* logo出现动画 */
    @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
    @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
 </style>
 <script>
(function () {
    const loaded = function(){
       setTimeout(function(){
            const loader = document.getElementById("loading-container");
            loader.className="fadeout" ;//使用渐隐的方法淡出loading page
            // document.getElementById("body-wrap").style.display="flex";
            setTimeout(function(){
                loader.style.display="none";
            },2500); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
</script>

然后在主题的 layout 目录找到 layout.ejs 文件

在

<body>

附近添加内容后如下：

    <!DOCTYPE HTML>
    <html lang="<%= config.language %>">
    <%- partial('_partial/head') %>

     <% if (theme.loadingPages.enable) { %>
        <%- partial('_partial/loading-pages') %>
     <% } %>
     <body>
    <% if (theme.loadingPages.enable) { %>
        <div id="loading-container">
             <p class="loading-text">嘘~  正在从服务器偷取页面 . . . </p> 
             <div class="loading-image">
                 <div></div>
                 <div></div>
                 <div></div>
                 <div></div> 
                 <div></div>
             </div>
        </div>
    <% } %>

    <%- partial('_partial/header') %>
    ...

然后到主题配置文件（_config.yml）添加开关配置

    loadingPages:
    enable: true

然后

    hexo clean && hexo g && hexo s

即可看到效果。

添加导航页

导航页1

导航页2

更换网站字体

下载字体

先去字体网站下载自己喜欢的字体。

引入字体

引入字体也很简单，在css 文件引入即可:

    @font-face{
    font-family: 'hl';
    src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/hl.ttf');
    }

    @font-face{
    font-family: 'ming';
    src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.otf');
    }

针对元素使用:

    /* 针对全局的使用 */
    body{
        font-family: 'YaHei';
    }

    /* 针对元素的class属性里包含 mytitle 的使用 */
    .mytitle {
        font-family: 'ming' !important;
    }

/* 针对元素的id属性等于 main-content 的使用 */

#main-content{
 font-family: '仿宋',"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",'sans-serif';
}

.diyFont{
    font-family: 'hl';
}

然后

    hexo cl && hexo g && hexo s

即可看到效果

Matery 主题添加 ArtiTalk 说说模块

请参考我朋友的这篇文章。

添加音乐页面

请参考我朋友的文章

添加小视频页面

新建md文件，打开Git bash，输入:

hexo new page "xsp"

然后添加以下内容:

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

然后到主题下的layout文件夹下新建xsp.ejs文件，添加以下内容:

<%- partial('_partial/bg-cover') %>
        <!-- 视频模块 -->
        <div class="biye">
            <p>没有人可以让我回头，唯有铠甲勇士</p>

            <div style="position: relative; padding: 30% 45%;">
                <iframe style="
                    position: absolute; 
                    width: 100%; 
                    height: 100%; 
                    left: 0; top: 0;" 
                    src="//player.bilibili.com/player.html?aid=415502163&bvid=BV16V41187CS&cid=264102761&page=1&high_quality=1" 
                    scrolling="no" 
                    border="0" 
                    frameborder="no" 
                    framespacing="0" 
                    allowfullscreen="true">
                </iframe>
            </div>
        </div>
</main>

然后你自己看放几个视频，按照复制即可。替换bilibili链接即可观看。自己想新建其他页面可参考这个教程。