玩命加载中 . . .

Hexo+Matery搭建个人博客(二):主题优化


本篇文章是介绍如何使用并修改Matery的主题,以及对博客的一些魔改及优化

💡 Note: Matery 主题

Matery 主题是我找到的十分好看的一个主题,也是本博客目前所使用的主题,由 blinkfox 大佬开发,其功能完善,视觉体验简单又漂亮, GitHub 中文文档 里关于一些基础配置文档里说的很清楚,大家可以按部就班进行配置,下面我只介绍自己「魔改」的部分。

修改主题配色

每个人的博客都有自己的风格,作者大大喜欢的配色想必也有人不感冒,所以关于主题配色的修改大家可以去 themes/hexo-theme-matery/source/css/matery.css 文件中探索,这里提几点:

导航栏、页脚颜色修改

在文件中搜素 .bg-color,即可更改颜色,比如我的配色,代码如下:

主题配色

上面一行是颜色,下面一行改的是透明度。另外主页图片有蒙板,也可也更改颜色和透明度,搜索 @keyframes rainbow 修改。

文章配色修改

在这个文件的开始一部分有各个格式的文字样式和颜色的修改,比如我想修改正文的颜色,我就修改如下这部分:

修改正文文字

如果想给加粗的文字换个醒目的颜色,就修改下面这部分:

修改粗体颜色

再比如你想修改引用框的颜色,你可以修改下面这部分:

修改引用框样式

还有其他各种地方的修改可以去探索,教一个方法,想修改哪处的颜色时,先取色得到这个颜色值,然后在文件里搜索就行了,方便快速找出。

修改字体

如果对默认字体不满意的话,可以找一个自己喜欢的字体做更换 (注意字体的版权问题) 。然后放在 themes/hexo-theme-matery/source/font/,目录下,如果没有 font 文件夹的话,就自己创建一个 。然后在 themes/hexo-theme-matery/source/css/my.css 文件内输入:

@font-face{
    font-family: 'myFont';
    src: url('../font/yourfont.ttf');	/*这里改为你准备好的字体文件*/
}

body{
    font-family: 'myFont';
}

⚠️ Warning:

注意有可能在更换字体后,一些特殊字符无法正常显示。这些特殊字符可以用其他字体显示,在 my.css 文件中再加一部分:

.boxs{
font-family: 'Courier New', Courier, monospace;
}

然后在要改变字体的部分用 Html 的形式这样写:
<a class="boxs">特殊字符</a>

给页脚加个「徽标」

GitHub Badge ,也可以叫它徽标,是像下面这两个一样的东西:

相信大家肯定在很多 GitHub 上的 Readme 文档里见过它。我们可以在这个网站 👉 https://shields.io/ 上制作徽标,然后得到 svg 图像,并将其插入页面中。一个更直接的方式,它支持以这样的网址直接链接到你要的图标:

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

比如我想要一个标注 Theme 为 Matery 的绿色徽标,那我可以用这样的网址:https://img.shields.io/badge/Theme-Matery-brightgreen ,通过这个网址我就可以直接得到:

Badge

我还可以在后面加一个选项让它更「立体」一些:https://img.shields.io/badge/Theme-Matery-brightgreen?style=plastic

plastic badge

如果要在页脚加徽标,就需要在 footer.ejs 文件夹中你想要加徽标的地方加入如下代码:

<a href="https://hexo.io/" target="_blank"> 
	<img src="https://img.shields.io/badge/xxx"
		style="vertical-align: text-bottom;" />
</a>

注意网站链接和徽标链接的修改

加一只猫

这个,虽然没什么用……,但我喜欢猫,所以我在我的博客里也加了一只猫。用的是 hexo-helper-live2d 插件,先用指令安装这个插件:

npm install hexo-helper-live2d --save

然后安装模型:

npm install live2d-widght-model-tororo

这是我用的模型,一只白色猫咪,其他的模型大家可以去 https://huaji8.top/post/live2d-plugin-2.0/ 这里预览和选择。

安装完成之后,在主目录下的 _config.yml 文件中加入如下配置:

live2d:
  enable: true
  scriptFrom: local
  pluginModelPath: assets/moc/ # 模型文件相对与插件根目录路径
  model:
    use: live2d-widget-model-tororo # 模型名字
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150 # 显示位置及大小
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: true # 手机显示开关,建议关闭
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

然后重新部署,你应该就能看到猫咪啦。

加入 Loading Page

如果你不想让读者在你的网页加载时感到尴尬,或许你应该加入 Loading Page,在根目录下新建一个 scripts 文件夹,然后在里面新建一个 loading-pages.js 文件,写入如下内容:

/* global hexo */
"use strict";
hexo.extend.filter.register('after_render:html', function (htmlContent) {
    const injectHead =
        `<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";
            },1000); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
 </script>`;
    const injectBody = `
 <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>`;
    if (/<\/head>/gi.test(htmlContent)) {
        let lastIndex = htmlContent.lastIndexOf('</head>');
        htmlContent = htmlContent.substring(0, lastIndex) + injectHead + htmlContent.substring(lastIndex, htmlContent.length);
    }
    if (/<body>/gi.test(htmlContent)) {
        let index = htmlContent.indexOf('<body>');
        htmlContent = htmlContent.substring(0, index) + injectBody + htmlContent.substring(index, htmlContent.length);
    }
    return htmlContent;
}, 1);

点击文字特效

theme/matery/layout/layout.ejs 文件最后加入如下一段代码:

var a_idx = 0;
jQuery(document).ready(function ($) {
    $("body").click(function (e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            3000,
            function () {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

可以把括号里的字改成你想要的文字即可。


参考内容

过客~励む 的博客


文章作者: Mond
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC 4.0 许可协议。转载请注明来源 Mond !
  目录