玩命加载中 . . .

Hexo+Github博客搭建之Matery主题个性化修改篇

首先声明一下,一定要分清什么是站点配置文件,什么是主题文件,比如我在F盘新建我的博客文件夹,名称为blog,那么站点配置文件的路径为F:/blog/_config.yml,而你的主题配置文件路径为F:/blog/themes/matery/_config.yml。

修改主题的基本信息

#这是根目录下的配置文件信息
title: 过客~励む   #这是网站标题
subtitle: 励む    #这是网站副标题subtitle
# 下面两个description,keywords,需要填上,如果想让搜索引擎收录,这个做SEO优化必不可忽视的两个属性
description: 专注于Web,分享生活,分享知识  #网站描述
keywords: [HTML, CSS, JavaScript, JQuery, React, Vue.js等]  #网站的关键词
author: YangAir  #作者,文章版权所显示的
language: zh-CN  #网站语言,不填写,默认为英文
timezone:   #时区,可以不填写

修改主题的logo图和favicon图标

打开你的主题配置文件,找到如下的配置,将其更改为你的logo和favicon路径即可:

# 配置网站favicon和网站LOGO
favicon: /favicon.png
logo: /favicon.png

去掉右上角的github图标

打开你的主题配置文件,找到下面的配置:

# Whether to display fork me on github icon and link, default true, You can change it to your repo address
# 配置是否在 header 中显示 fork me on github 的图标,默认为true,你可以修改为你的仓库地址.
githubLink:
  enable: true
  url: https://github.com/blinkfox/hexo-theme-matery
  title: Fork Me

enable的属性值由true改为false即可。

去掉主页的Github按钮

打开主题配置文件,找到下面的配置:

# 首页 banner 中的第二个按钮的配置,包括按钮的显示名称、font awesome图标和按钮的超链接.
indexbtn:
  enable: true
  name: Github
  icon: fab fa-github-alt
  url: https://github.com/blinkfox/hexo-theme-matery

enable属性值由true改为false即可。

修改社交链接

主页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

如果想添加简书,CSDN,掘金,博客园等等,需要在主题配置文件添加相关配置,如下是我个人的配置:

socialLink:
  qq: 1035800145
  weixin: https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/wechat.png
  github: https://github.com/Yafine
  email: mailto:1035800145@qq.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  weibo: # https://weibo.com/xxx
  zhihu: https://www.zhihu.com/people/xuan-tian-40-64/activities
  juejin: https://juejin.im/user/5a902053f265da4e7527ae71/activities
  csdn: https://blog.csdn.net/victoryxa
  jianshu: https://www.jianshu.com/u/3b3856869772
  cnblogs: https://www.cnblogs.com/yafine/
  rss: true # true、false

其中的weixin我是用的图片链接,会跳转到一个新的标签页,之后还需要修改ejs文件,文件在主题目录下的layout文件夹下的_partial文件夹,修改social-link.ejs,添加相关的配置,我个人添加的配置如下:

<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="关注我的简书: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-jianshu"></i>
    </a>
<% } %>

<% if (theme.socialLink.csdn) { %>
    <a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" data-tooltip="关注我的CSDN: <%= theme.socialLink.csdn %>" data-position="top" data-delay="50">
        <i class="fab fa-csdn">C</i>
    </a>
<% } %>
<% if (theme.socialLink.juejin) { %>
    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="关注我的掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin"></i>
    </a>
<% } %>

<% if (theme.socialLink.cnblogs) { %>
    <a href="<%= theme.socialLink.cnblogs %>" class="tooltipped" target="_blank" data-tooltip="关注我的博客园: <%= theme.socialLink.cnblogs %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin"></i>
    </a>
<% } %>
<% if (theme.socialLink.weixin) { %>
    <a href="<%= theme.socialLink.weixin %>" class="tooltipped" target="_blank" data-tooltip="微信联系我: <%= theme.socialLink.weixin %>" data-position="top" data-delay="50">
        <i class="fab fa-weixin"></i>
    </a>
<% } %>

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

  1. 去掉动态滤镜颜色

打开themes/matery/source/css/matery.css文件,查找rainbow属性,然后将其注释即可。如下:

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

打开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,看情况自己修改
}

修改banner图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片,主题代码中是每天动态切换一张,只需 7 张即可。如果你会 JavaScript 代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中:

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

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

如果想改为每小时或者每分钟切换banner图的话,需要将getDay()改为getHours()或者getMinutes()即可。

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

在主题配置文件中,找到下面的配置:

# 网站副标题,打字效果
# 如果有符号 ‘ ,请在 ’ 前面加上 \
subtitle: 
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub1: 志之所向,金石为开,谁能御之?
  sub2: 花开不是为了花落,而是为了开的更加灿烂。
  sub3: 没有伞的孩子必须努力奔跑!
  sub4: 欲望以提升热忱,毅力以磨平高山。
  sub5: 如果放弃太早,你永远都不知道自己会错过什么。
  sub6: 没有礁石,就没有美丽的浪花;没有挫折,就没有壮丽的人生。

注意:

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

 <div class="description center-align">
     <% if (theme.subtitle.enable) { %>
         <span id="subtitle"></span>
         <script src="https://cdn.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.sub4 %>',
                          '<%= theme.subtitle.sub5 %>',
                          '<%= theme.subtitle.sub6 %>'],
                 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>

动态标题

先放上效果图再说:

离开当前页面时 返回当前页面时

实现方法,引入js文件,在主题文件下的/source/js/下新建FunnyTitle.js,然后在添加到themes/matery/layout/layout.ejs或者添加到themes/matery/layout/_partial/head.ejs,其代码如下:

<!--浏览器搞笑标题-->
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png");
         document.title = 'ヽ(●-`Д´-)ノ你要玩捉迷藏嘛';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png");
         document.title = 'ヾ(Ő∀Ő3)ノ好哦!' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

我的链接:https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.4/source/js/FunnyTitle.js(理论上一直有效)

或者直接在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="(Ő∀Ő3)ノ好哦!",st=setTimeout(function(){document.title=OriginTitile},3e3))
    })
</script>

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

打开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,看情况自己修改
}

添加动态诗词

采用的是今日诗词,每次返回一句诗词,根据时间、地点、天气、事件智能推荐。官网有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 %>修改为把<%= config.description %>改为<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>,这个使用前提是将主题配置文件的subtitle的值改为false

鼠标点击文字特效

实现方法,引入js文件,在主题文件下的/source/js/下新建click_show_text.js,其代码如下:

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");
}

或者使用我的cdn链接,理论上一直有效https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.4/source/js/click_show_text.js,然后在添加到themes/matery/layout/layout.ejs

鼠标点击礼花特效

先看效果:

文件地址:传送门

matery/source/js/目录下新建lihua.js,然后打开上面的传送门网址,将代码复制粘贴进js文件里,然后在layout.ejs文件里引用,最后本地运行查看效果即可。

自定义鼠标样式

建议大家下载鼠标指针样式的格式为ico格式,大小为16*16,或者24*24的。

首先将鼠标样式下载到本地,推荐大家一个网站,可以免费下载,不过需要登录一下:网址为:https://www.easyicon.net/

以我的为例,我将鼠标指针样式放在了主题文件夹下的medias目录下,然后打开主题文件夹下的my.css文件,添加内容如下:

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

然后在本地运行查看效果即可

添加鼠标彩虹星星掉落跟随效果

先看看效果,再决定要不要用。

themes/matery/source/js目录下新建cursor.js文件,打开这个网址传送门,将内容复制粘贴到cursor.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容:

<script src="/js/cursor.js"></script>

修改原有相册

参考教程:https://yafine-blog.cn/posts/3b98.html

matery主题自定义字体

参考教程:https://yafine-blog.cn/posts/49fb.html

添加天气小插件

首先去中国天气官网:https://cj.weather.com.cn/plugin/pc

配置自己的插件,选择自定义插件—>自定义样式——>生成代码,然后会生成一段代码,复制粘贴到 themes/matery/layout/layout.ejs即可。

关于我页面添加个人简历

打开theme/matery/layout/about.ejs文件,大约在13行。有一个<div class="card">标签,找出其对应结尾的标签,大约在61行左右,然后在新增如下代码:

<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下面写上你的简历了(就像写博客一样)。

豆瓣书单电影页面

  1. 首先在博客站点目录执行下面的命令安装豆瓣插件:
npm install hexo-douban --save    
  1. 紧接着在博客站点目录的配置文件_config.yml下,添加如下配置:
douban: 
  user: 252345665    #这个需要修改为你个人的id  
  builtin: false   #如果想生成豆瓣页面,这个需要设置为true
  book: 
      title: 'This is my book title' 
      quote: 'This is my book quote' 
  movie: 
      title: 'This is my movie title' 
      quote: 'This is my movie quote' 
  game: 
      title: 'This is my game title' 
      quote: 'This is my game quote' 
  timeout: 10000
  • user::你的豆瓣ID。打开豆瓣,登入账户,然后在右上角点击 ”个人主页“,这时候地址栏的URL大概是这样:https://www.douban.com/people/xxxxxx/ ,其中的”xxxxxx”就是你的个人ID了。
  • builtin:是否将生成页面的功能嵌入 hexo shexo g 中,默认是 false ,另一可选项为 true
  • title: 该页面的标题。
  • quote: 写在页面开头的一段话,支持html语法。
  • timeout: 爬取数据的超时时间,默认是 10000ms,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

如果只想显示某一个页面(比如movie),那就把其他的配置项注释掉即可。

  1. 然后再主题配置文件_config.yml中添加关于此页面的菜单:(下面是我的配置)
menu:
    媒体:
       url: /
       icon: fas fa-list
       children:
         - name: 电影
           url: /movies
           icon: fas fa-film
         - name: 书单
           url: /books
           icon: fas fa-book
         - name: 游戏
           url: /games
           icon: fas fa-gamepad
  1. 适配Matery主题:在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件,并将下面的内容复制进去:
<%- partial('_partial/post-cover') %> 
<style> 
    .hexo-douban-picture img {
        width: 100%; 
    } 
</style>
<main class="content"> 
    <div id="contact" class="container chip-container"> 
        <div class="card"> 
            <div class="card-content" style="padding: 30px"> 
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                <%- page.content %> 
            </div> 
        </div> 
        <div class="card"> 
            <div class="card-content" style="text-align: center"> 
                <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐,欢迎在下面留言!</h3> 
            </div> 
        </div> 
        <div class="card"> 
            <% if (theme.gitalk && theme.gitalk.enable) { %>
                <%- partial('_partial/gitalk') %>
            <% } %> 
            <% if (theme.gitment.enable) { %> 
                <%- partial('_partial/gitment') %> 
            <% } %> 
            <% if (theme.disqus.enable) { %> 
                <%- partial('_partial/disqus') %> 
            <% } %> 
            <% if (theme.livere && theme.livere.enable) { %> 
                <%- partial('_partial/livere') %> 
            <% } %> 
            <% if (theme.valine && theme.valine.enable) { %> 
                <%- partial('_partial/valine') %> 
            <% } %> 
        </div> 
    </div> 
</main>
  1. 然后在博客站点目录下的node_modules文件夹下找到hexo-douban/lib,文件夹下有三个js文件,分别为:books-generator.jsgames-generator.jsmovies-generator.js,用文本编辑器打开这三个文件,并将其文件内容末尾的代码修改为一下内容:
/* 原文件内容为 layout: [`page`, `post`] ,将其修改为下面的内容*/
layout: [`page`, `douban`]
  1. 最后就是使用并生成相应的页面,执行命令如下:
hexo douban

需要注意的是,通常大家都喜欢用 hexo d 来作为 hexo deploy 命令的简化,但是当安装了 hexo douban 之后,就不能用 hexo d 了,因为 hexo doubanhexo deploy 的前缀都是 hexo d ,你以后执行的 hexo d 将不再是 Hexo 页面的生成,而是豆瓣页面的生成。

以下是可选的命令参数:

-h, --help    # 帮助页面
-b, --books   # 只生成书单页面
-g, --games   # 只生成游戏页面
-m, --movies  # 只生成电影页面

当站点配置文件的builtin的值为true时,生成页面的功能会嵌入到hexo ghexo s中,在进行部署生成操作,会自动生成相应的页面

外链跳转插件

hexo-external-link是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。 比如 设置target=’_blank’, rel=’external nofollow noopener noreferrer’ 告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html;

使用 npm 或者 yarn 安装

## npm 安装
npm install hexo-external-link --save
## yarn 安装
yarn add hexo-external-link

之后再hexo博客站点根目录下添加如下配置:

hexo_external_link:
  enable: true
  enable_base64_encode: true
  url_param_name: 'u'
  html_file_name: 'go.html'
  target_blank: true
  link_rel: 'external nofollow noopener noreferrer'
  domain: 'your_domain' # 如果开启了防盗链,填写你的域名
  safety_chain: true
  • enable - 是否开启hexo_external_link插件 - 默认 false
  • enable_base64_encode - 是否对跳转url使用base64编码 - 默认 fasle
  • url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 ‘u’
  • html_file_name - 跳转到外链的页面文件路径 - 默认 ‘go.html’
  • target_blank - 是否为外链的a标签添加target='_blank' - 默认 true
  • link_rel - 设置外链的a标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’
  • domain - 如果开启了防盗链,除了 localhost 和 domain(你的域名) 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
  • safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false

添加动态科技线条背景

themes/matery/layout/layout.ejs文件中添加如下代码:

<!--动态线条背景-->
<script type="text/javascript"
color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

其中:

  • color:表示线条颜色,三个数字分别为(R,G,B),默认:(0,0,0)
  • opacity:表示线条透明度(0~1),默认:0.5
  • count:表示线条的总数量,默认:150
  • zIndex:表示背景的z-index属性,css属性用于控制所在层的位置,默认:-1

添加鼠标点击烟花爆炸效果

首先在themes/matery/source/js目录下新建fireworks.js文件,打开这个网址传送门,将内容复制粘贴到fireworks.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容:

<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>

然后hexo clean && hexo g && hexo s即可,就可以看到效果了。

添加樱花飘落效果

先看效果:

themes/matery/source/js目录下新建sakura.js文件,打开这个网址传送门,将内容复制粘贴到sakura.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容:

<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
    document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

添加雪花飘落效果

先看看效果吧!

themes/matery/source/js目录下新建snow.js文件,打开这个网址传送门,将内容复制粘贴到cursor.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容:

<script src="/js/snow.js"></script>

添加自定义页面

首先看一下效果吧,我自己写的,写的不好,不要笑我哦!

以我的配置为例:

首先在站点目录下的source文件夹下新建aboutme文件,文件名可自定义,然后编写一个index.html放入aboutme文件夹下,然后在主题配置文件下的导航配置信息添加下面的配置:

About:
    url: /
    icon: fas fa-address-card
    children:
      - name: 关于我
        url: /about
        icon: fas fa-user-circle
      - name: Another    #这是新添加的,在原有配置基础上添加
        url: /aboutme
        icon: fa fa-user-secret

然后在站点配置文件下,找到skip_render,在后面添加属性,如下:

skip_render: aboutme/**  # 其意思为在对文件进行渲染时跳过aboutme文件下的所有文件

如果添加需要跳过多个目录下的文件时,配置如下:

skip_render: 
    - aboutme/** 
    - box/**
    - 2020/**

知道方法后,你可以添加你自己想要添加的页面,让你的博客内容更加充实。

添加404页面

我的404页面是这样的:

开始说一下配置步骤,首先再站点根目录下的source文件夹下新建404.md文件,里面内容如下:

---
title: 404
date: 2019-10-28 16:41:10
type: "404"
layout: "404"
description: "Oops~,我崩溃了!找不到你想要的页面了"
---

紧接着再新建主题文件夹的layout目录下新建404.ejs文件,添加内容如下:

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 90.2vh;
    }
</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(https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.4/source/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

然后部署,再看看效果即可。

文章生成永久链接

主题默认的文章链接配置是

permalink: :year/:month/:day/:title

这种生成的链接地址很长,文章版权的链接地址会出现一大串字符编码,一点也不好看。因此需要修改文章生成链接的格式。

首先再根目录下执行下面的命令:

hexo-abbrlinkGitHub地址

npm install hexo-abbrlink --save

然后再站点配置文件下添加如下配置:

abbrlink:
    alg: crc16   #算法: crc16(default) and crc32
    rep: hex     #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制

再将站点配置文件的permalink的值修改为:

permalink: posts/:abbrlink.html  # 此处可以自己设置,也可以直接使用 :/abbrlink

生成文章的链接格式就会是如下样例(官方样例):

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

生成完后,原md文件的Front-matter 内会增加abbrlink 字段,值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。

页面获取标题(可选)

看两个图就知道是怎么回事了。

客官说:小二儿,上图。

小二儿说:来喽!

看图中所指出的文字,和你的比较一下,你就知道差别在哪了!不说这么多的废话了,上教程!看下面。

以我的博客位置为例,修改F:\blog\themes\matery\layout\_partial中的bg-cover-content.ejs文件,其中原主题中这个文件的代码为(大约在第4行):

<div class="title center-align">
     <% if (config.subtitle && config.subtitle.length > 0) { %>
            <%= config.subtitle %>
     <% } else { %>
              subtitle
     <% } %>
</div>

修改过后的代码为:

<div class="title center-align">
     <% if (is_home() && config.subtitle && config.subtitle.length > 0) { %>
        <%= config.subtitle %>
     <% } else { %>
        <%= page.title %>
     <% } %>
</div>

这个有一点bug,归档页面标题无法显示,解决办法目前还没有,以后如果解决,会更新文档的!

然后保存,执行hexo cl && hexo g && hexo s查看效果即可。

注意:获取的title标题在md文档中的fromt-matter属性中title的值,可自定义,你只需要去本地找到页面所在的md文档中,将其值修改为中文或者英文即可。

例如:友情链接这一块,你去博客文件的F:\blog\source\friends(这是我的本地路径)目录,打开目录下的index.md文档,将title后面的值由原来的friends值修改为中文的友情链接或者友人帐或者其他(自定义),然后保存,执行命令,查看效果即可,如没有问题,在部署到代码托i管平台。完美!


--------本文结束感谢您的阅读!---------
文章作者: YangAir
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 YangAir !
如果文章能够帮到您的话,不妨就支持一下小编呗!
评论
  目录