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

article/2025/9/24 18:46:49

为了方便我们这里使用 "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 "

404404页面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.xmlfield: post

文章字数统计插件


安装命令:

npm i --save hexo-wordcount

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

postInfo:date: trueupdate: falsewordCount: 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/preprocesstheme: 'tomorrow'line_number: false    # default falsecustom_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 crc32rep: 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下修改代码” <!-- <%= config.description %> -->”变为 ”<%- '<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;
}
持续更新……

http://chatgpt.dhexx.cn/article/STbWXk9I.shtml

相关文章

Hexo博客美化之蝴蝶(butterfly)主题魔改

这里写自定义目录标题 首先下载主题配置博客主题_config.yaml配置前须知_config.yaml配置简单介绍 如果参考我的脚手架&#xff0c;大家可以阅读readme和changelog文件&#xff0c;和蝴蝶主题官方文档。 tip: 由于butterfly主题升级至3.0.1&#xff0c;所提供的源码不在进行维护…

Vuepress博客美化技巧

文章目录 导航栏透明背景图填充跳转样式悬浮气泡背景图填充导航栏透明图片中的点击向下跳转的样式悬浮气泡 导航栏透明背景图填充跳转样式悬浮气泡 背景图填充 效果图&#xff1a; 下面的小框扩展到大框&#xff0c;让后面的导航栏透明更完善一些。 编辑Theme/components/Ho…

个人博客美化界面

先看一下我的界面 进入个人博客———管理——设置 在CSS代码框中输入一段代码&#xff0c;如下&#xff1a; /*simplememory*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter t…

Wordpress(Argon)主题博客美化

前言 常言道&#xff1a;工欲善其事必先利其器&#xff0c;在发表文章前&#xff0c;美化博客&#xff0c;使其利于自己的观看与管理极其重要&#xff0c;所以我四处搜寻&#xff0c;得到了以下美化代码。 但是&#xff0c;有时候我们走得太远&#xff0c;会忘了为什么出发。…

Hexo博客美化

Hexo博客美化 我们搭建好自己的博客以后&#xff0c;可以在hexo官网的 主题 中选择自己喜欢的博客主题&#xff0c;可以直接在主题中点开预览主题样式或者打开主题项目的 github 地址&#xff0c;将该主题下载到我们自己的博客项目中的 theme 文件夹中&#xff0c;然后在 _con…

个人博客美化

文章目录 Butterfly 主题安装修改博主头像生成文章唯一链接本地搜索SitemapRSS追番插件夜间模式繁星&#xff08;宇宙&#xff09;背景添加页脚徽标和计时器关于页面 总体参考&#xff1a; Butterfly 文档&#xff1a;https://butterfly.js.organzhiyu &#xff1a;https://anz…

个人博客美化(总结、分享)

博客美化&#xff08;经验&#xff09; |主题&#xff1a;EVA、新世纪福音战士、初号机、二号机 |颜色&#xff1a;基础黑白、紫色、绿色、红色 |取材&#xff1a;P站、贴吧eva |我这里只写我的经验&#xff0c;具体的参考主题作者写的笔记具体 修改主题为中文 ​ 这个其实我解…

个人博客网站的美化

文章目录 更换Next主题网站基本设置添加页面动态背景鼠标点击效果图设置站点建立时间设置头像修改网站图标添加RSS添加fork me Github修改文章底部带#号的标签在每篇文章末尾统一添加“本文结束”标记博文压缩修改代码块自定义样式侧边栏社交链接小图标添加热度添加音乐网站底部…

博客园美化教程

博客园美化教程 一、进入管理>设置>勾选下面的JS权限&#xff0c;然后填写一下开通的理由等待管理员进行审核通过。 二、选择下面的博客皮肤 三、贴入以下CSS代码到自定义&#xff0c;并禁用CSS默认模板 *,.Cal{padding:0}::-moz-selection{background:#807dd4;color:#…

Hexo 博客优化之博客美化系列(持续更新)

2022-01-25 更新&#xff1a;博客新地址&#xff1a;https://www.itbob.cn/&#xff0c;文章距上次编辑时间较远&#xff0c;部分内容可能已经过时&#xff01; 本文将讲述一些 Hexo 博客的美化&#xff0c;本文以作者 luuman 的 spfk 主题和作者 xaoxuu 的 Material X 主题为例…

选股+择时策略组合

导语&#xff1a;本文讨论交易中两个非常重要的命题&#xff1a;选股择时&#xff0c;并将其两者结合起来开发策略。下文会给出样例并附上源码链接&#xff0c;感兴趣的朋友可以直接前往BigQuant一键克隆进一步研究。 选股就是要选一只好股票&#xff0c;而择时就是选一个好的买…

量化选股策略模型大全

原文链接&#xff1a;原文 量化选股就是利用数量化的方法选择股票组合&#xff0c;期望该股票组合能够获得超越基准收益率的投资行为。量化选股策略总的来说可以分为两类&#xff1a;第一类是基本面选股&#xff0c;第二类是市场行为选股。 基本面选股主要有多因子模型、风格…

如何通过形态选股构建量化策略?

形态选股是各类炒股软件必备的重要功能&#xff0c;用户手动选择股票及其K线区间后&#xff0c;软件能够基于给定“形态匹配度”筛选出最相似的股票。 然而&#xff0c;手动的方式往往覆盖面较低&#xff0c;也较为麻烦。所以&#xff0c;我们将通过形态选股的方式构建量化策略…

二、量化选股

文章目录 总体介绍一、基本面选股1、因子选股判断方法五个步骤 2、风格轮动3、行业轮动 二、市场行为选股1、资金流2、动量反转基本概念&#xff08;1&#xff09;行为金融学&#xff08;2&#xff09;阿尔法动量模型 3、一致预期4、 趋势追踪基本概念 5、筹码选股基本概念1. 筹…

股票:巧用均线多头排列选股

讲多头排列之前&#xff0c;有两个概念要明白。 短期均线从下向上突破中长期均线&#xff0c;形成的交叉叫黄金交叉&#xff0c;简称金叉&#xff0c;预示股价短期走强。 当短期均线向下跌破中长期均线&#xff0c;形成的交叉叫做死亡交叉&#xff0c;简称死叉&#xff0c;预示…

通达信口袋支点选股公式编写和设置方法答疑

1、口袋支点选股公式成交量条件 在我编写的口袋支点选股公式中&#xff0c;成交量条件为成交量创10日新高。有网友提出&#xff0c;根据书中的定义&#xff0c;口袋支点成交量条件是成交量大于近10日下跌时的最大成交量。 这个问题确实是我没考虑周全&#xff0c;成交量创10日…

常用的几种量化选股方法

量化选股就是用数量化的方法选择确定的投资组合&#xff0c;期望这样的投资组合可以获得超越大盘的投资行为。下面我们来简单介绍一下机构常用的量化选股方法。 1、多因子选股 多因子选股是最经典的选股方法&#xff0c;该方法采用采用一系列的因子&#xff08;比如市盈率PE&…

史上最有效地选出第二天一定能大幅上涨的选股方法

今天买入第二天大涨的股票是每一个股民梦寐以求的方法&#xff0c;然而这样的方法到底有没有呢&#xff1f;下面几个方法就能让你轻松实现&#xff1a; 方法一&#xff0c;从涨停板中选出 每天都会有涨停板的股票&#xff0c;而股票又有一个特征“强者恒强&#xff0c;弱者恒…

选股的方法与技巧

股市新手刚开始投资时&#xff0c;面对大A数千只股票&#xff0c;往往会感到眼花缭乱。对于每个投资者来说&#xff0c;选择一只赚钱的好股票很关键。通常来讲&#xff0c;可以通过以下几种方法结合来选择股票&#xff1a; 一、板块选择 看看宏观经济政策、舆论导向有利于哪一…