【学习之博客美化】matery主题

IsQiya

已于 2022-02-08 14:16:38 修改

阅读量2.6k

点赞数 5

分类专栏：个人博客搭建文章标签：博客

于 2021-01-09 11:59:48 首次发布

本文链接：https://blog.csdn.net/qq_45351292/article/details/112271581

版权

个人博客搭建专栏收录该内容

6 篇文章 0 订阅

订阅专栏

为了方便我们这里使用 "Visual Studio Code"打开文件

将博客改为中文

目录：E:\IsQiyaBlog

将 " _config.yml " 文件中代码段 language: en 改为 language: zh-CN
在这里插入图片描述

修改主题菜单栏

将它们填上内容
在这里插入图片描述
新建分类 categories 页：

hexo new page "categories"

目录：E:\IsQiyaBlog\source\categories

在 “index.md” 文件中配置下面相关配置
在这里插入图片描述
应用分类标签：

目录：E:\IsQiyaBlog\source\ _posts

在 “hello-world.md” 文件中修改，将这篇文章分类为说明
在这里插入图片描述

类似的配置还有:

配置选项	描述	代码
tag	标签	`hexo new page "tags"` — title: tags date: 2018-09-30 18:23:38 type: "tags" layout: “tags” —
about	关于	`hexo new page "about"` — title: about date: 2018-09-30 18:23:38 type: "about " layout: "about " —
contact	留言板	`hexo new page "contact "` — title: tags date: 2018-09-30 18:23:38 type: "about " layout: "about " —
friends	友情链接	`hexo new page "friends "` — title: tags date: 2018-09-30 18:23:38 type: "tags" layout: "about " —
404	404页面	`hexo new page 404` — title: 404 date: 2018-09-30 18:23:38 type: "404" layout: "404" description: “Oops～，我崩溃了！找不到你想要的页面 😦” —

修改主题站点运行时间

目录：E:\IsQiyaBlog\themes\matery

在这里插入图片描述

将 " _config.yml " 文件中代码段改为下图样式

在这里插入图片描述
样子：

修改主题站名

目录：E:\IsQiyaBlog

在这里插入图片描述

添加搜索查找插件

安装命令：

npm install hexo-generator-search --save

在目录：E:\IsQiyaBlog下， "_config.yml " 文件中新增代码：

search:
  path: search.xml
  field: post

文章字数统计插件

安装命令：

npm i --save hexo-wordcount

在目录：E:\IsQiyaBlog下， "_config.yml " 文件中新增代码：

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.

打开功能
在这里插入图片描述

修改社交链接

在这里插入图片描述

在目录：E:\IsQiyaBlog\themes\matery\layout_partial下， "social-link.ejs " 文件中新增代码：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.CSDN %>" class="tooltipped" target="_blank" data-tooltip="访问我的CSDN" data-position="top" data-delay="50">
        <i class="fab fa-CSDN">c</i>
    </a>
<% } %>

添加到目录：E:\IsQiyaBlog\themes\matery， "_config.yml " 文件中
在这里插入图片描述

去掉右上角的猫

在目录：E:\IsQiyaBlog\themes\matery下， "_config.yml " 文件中修改代码：

在这里插入图片描述

去掉主页的第二个按钮

去掉它：
在这里插入图片描述

在这里插入图片描述

打赏图片

目录：E:\IsQiyaBlog\themes\matery\source\medias\reward中的图片换成自己的图片即可，注意名字也要换成一样的

安装代码高亮插件

安装代码：

npm i -S hexo-prism-plugin

在目录：E:\IsQiyaBlog下， "_config.yml " 文件中修改代码：
在这里插入图片描述

在目录：E:\IsQiyaBlog下， "_config.yml " 文件中新增代码：

#代码高亮
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

添加友情链接

在目录 E:\IsQiyaBlog\source 下创建 " _data"文件夹，并在文件夹中创建 " friends.json "文件

在" friends.json "文件中填写形式如下：

[{
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "https://qinng.now.sh/medias/avatar.jpg",
    "name": "有风自南",
    "introduction": "也无风雨也无晴",
    "url": "https://qingwave.github.io/",
    "title": "前去学习"
}]

修改页脚

目录：E:\IsQiyaBlog\themes\matery\layout_partial ， footer.ejs文件下
在这里插入图片描述

天气插件

来自于：

文章链接: https://blog.nmslwsnd.com/matery-zhu-ti-she-zhi/

在 E:\IsQiyaBlog\themes\matery\layout_widget 新建文件 weather.ejs，把代码添加进入,可以设置只有桌面端显示,如下修改:

<!-- 天气接口-->
<script type="text/javascript">
    WIDGET = {FID: '1tFpFZ5Mtj'}
  </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>

然后在 " E:\IsQiyaBlog\themes\matery\layout " layout.ejs 文件中添加下面这串代码：

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

然后在 E:\IsQiyaBlog\themes\matery 文件中 _config.yml 中再添加一个下面这串代码：

# 是否激活天气接口
weather:
  enable: true

关闭首页蒙版效果

在 E:\IsQiyaBlog\themes\matery\source\css 中 matery.css 文件中修改（注释）：

在这里插入图片描述

动态标签栏

在目录：E:\IsQiyaBlog\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>

效果：
在这里插入图片描述

在这里插入图片描述

标题栏透明效果

目录：E:\IsQiyaBlog\themes\matery\source\css 下 matery.css 文件中修改代码：

.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
    opacity: 0.8  /* 透明效果 */
}

在这里插入图片描述

永久链接（暂时还没成功）

安装插件

npm install hexo-abbrlink --save

在目录 E:\IsQiyaBlog 下 _config.yml 文件中新增：

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

修改：
在这里插入图片描述

添加动态诗词

参考：https://blog.csdn.net/victoryxa/article/details/105841309

目录： E:\IsQiyaBlog\themes\matery\layout_partial\bg-cover-content.ejs下修改代码” ”变为 ”<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>”

目录： E:\IsQiyaBlog\themes\matery\layout_partial\head.ejs下新增代码”

  <!-- 今日诗词特效 -->
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

最后要将目录：E:\IsQiyaBlog\themes\matery_config.yml 文件下主题的subtitle值改为false
在这里插入图片描述

鼠标点击特效

参考：https://blog.csdn.net/victoryxa/article/details/105841309

在目录：E:\IsQiyaBlog\themes\matery\source\js 下新建 click_show_text.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");
}

进入目录：E:\IsQiyaBlog\themes\matery\layout\layout.ejs中新增代码，引用特效

  <!-- 鼠标点击特效  富强民主文明 -->
    <script src="/js/click_show_text.js"></script>

自定义鼠标样式

参考：博主

下载鼠标样式网址为：https://www.easyicon.net/
下载格式：16px ico
在这里插入图片描述
将下载的图片命名为cursor1.ico放到目录：E:\IsQiyaBlog\themes\matery\source\medias下，并在目录：E:\IsQiyaBlog\themes\matery\source\css\my.css文件下新增代码

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

持续更新……

IsQiya

关注

5
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
5
评论
【学习之博客美化】matery主题

为了方便我们这里使用 "Visual Studio Code"打开文件将博客改为中文目录：E:\IsQiyaBlog将 " _config.yml " 文件中代码段 language: en 改为 language: zh-CN修改主题菜单栏将它们填上内容新建分类 categories 页：hexo new page "categories"目录：E:\IsQiyaBlog\source\categories在 “index.md” 文件中配置下面相关配置应用分类标签：
复制链接

扫一扫