本文最后更新于 <span id="expire-date"></span> 天前,文中部分描述可能已经过时。
已经打算尽量不碰主题修改了 😅每次更新主题还得改改改,太耗费时间,多水几篇博文不好吗?
24字社会主义核心价值观
这里用到 Hexo 5 注入器
实例: 在根目录 scripts 文件夹下新建 values.js 并填入以下代码
点击展开
hexo.extend.injector.register('body_end', ` |
一言诗词
首页logo底部的description换成一言诗词
主题的 layout 文件夹内找到 cover.ejs
,注释掉原来的描述,替换成<span id="jinrishici-sentence">既见君子 云胡不喜</span>
,如下👇
点击展开
<% if (theme.cover.description) { %> |
最后再加上
<script defer src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script> |
赞赏功能
hexo博客引入一个漂亮的赞赏码动画插件
效果
也可以直接打开 https://loafing.cn/Donate/simple/ 查看
一行代码调用(嗯主站 liuyifei.club 也可以直接插入)
<iframe src="https://loafing.cn/Donate/simple/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:100px; width:100%;" frameborder="0" scrolling="no"></iframe> |
源码来自:https://github.com/Kaiyuan/sponsor-page
具体操作:
- 下载源码解压后放在自己站点的source文件夹下面,我这里的位置是
source/Donate/simple
,所用到的图片、html、js、css文件都在这儿。 - 使用 iframe 嵌入页面的代码,高度至少 240px,宽度至少 310px!
我加在footer.ejs合适的位置,240px的高度会产出过多空白,这里改成100px也能使赞赏码显示完整。src=后面是赞赏页面的地址,记得提前在hexo根目录配置文件添加<iframe src="/Donate/simple" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:100px; width:100%;" frameborder="0" scrolling="no"></iframe>
避免md和html文件被hexo主题渲染。skip_render:
- Donate/** #赞赏插件存放位置 - 修改simple/index.html
不必要的内容都删除或者注释掉,只保留支付宝和微信赞赏码;
删除/替换.js文件,否则加载太慢;
跳转GitHub换成发邮件;
点击展开
|
- 修改simple/style.css
整体下移沉底;
把原来的GitHub图标换成小飞机,去 阿里巴巴矢量库 下载合适的svg图片予以替换
点击展开
html, html>body { |
images文件夹下面的图片全部改成自己的,建议使用webp格式压缩。
放在FAQ页面或者按需插入文章页就好。(放了也白放🤦♂️)
Cards 主题更新至1.1.0之后,新增 fold 折叠插件,所以可以使用以下方式插入赞赏码,更简便。
赞赏码🍻
Artitalk说说
引入Artitalk说说系统
方法: 新建一个页面,命名为thoughts,修改index.md
点击展开
<script type="text/javascript" src="https://unpkg.com/artitalk"></script> |
网站运行时间
页脚添加网站运行时间
- 在主题的layout文件夹下面找到footer.ejs,将以下代码加进
</footer>
前面
点击展开
<div> <center> |
其它美化
- 首页LOGO加圆框、光晕
方形头像太丑太尖锐,又懒得每次动手裁剪成圆形 - 友链卡片圆角
- 首页文章卡片彩色光晕动画
步骤:
- 先将主题配置文件里面的固定样式用#号注释掉
style: #https://cdn.jsdelivr.net/npm/hexo-theme-cards@0.6.1/dist/css/style.min.css
- 自定义css或者找个已有的
_defines.styl
文件加入
点击展开
//顶部logo圆框、光晕 |
便签仿Fluid主题
放弃修改
- 注释掉主题配置文件里的note样式,换成本地的css:
note: /css/note.css #https://cdn.jsdelivr.net/npm/hexo-theme-cards@0.6/dist/css/note.min.css
- 修改
cards/source/css/note.styl
点击展开
.blockquote-note |
设置作者邮箱
见文章底部 Copyright 栏目。
点击展开
修改主题 copyright.ejs
将<%= theme.meta.author.name %>
替换为
<a href="mailto:<%= theme.meta.author.mail %>"><%= theme.meta.author.name %></a> |
修改 Cards 主题配置文件,在 author
的下一层级新增 mail: xxx@qq.com
(期待主题作者有更好的方案)
或者干脆一步到位,直接写进 copyright.ejs
<a href="mailto:自定义邮箱@qq.com"><%= theme.meta.author.name %></a> |
评论