「折腾」Hexo-Cards主题自定义

原创

本文最后更新于 <span id="expire-date"></span> 天前,文中部分描述可能已经过时。

已经打算尽量不碰主题修改了 😅
每次更新主题还得改改改,太耗费时间,多水几篇博文不好吗?

24字社会主义核心价值观

这里用到 Hexo 5 注入器

实例: 在根目录 scripts 文件夹下新建 values.js 并填入以下代码

点击展开
hexo.extend.injector.register('body_end', `
<script type="text/javascript">
//定义获取词语下标
var a_idx = 0;
jQuery(document).ready(function ($) {
//点击body时触发事件
$("body").click(function (e) {
//需要显示的词语
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
//设置词语给span标签
var $i = $("<span/>").text(a[a_idx]);
//下标等于原来下标+1 余 词语总数
a_idx = (a_idx + 1) % a.length;
//获取鼠标指针的位置,分别相对于文档的左和右边缘。
//获取x和y的指针坐标
var x = e.pageX, y = e.pageY;
//在鼠标的指针的位置给$i定义的span标签添加css样式
$i.css({
"z-index": 999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": rand_color()
});
// 随机颜色
function rand_color() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
}
//在body添加这个标签
$("body").append($i);
//animate() 方法执行 CSS 属性集的自定义动画。
//该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
//详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
$i.animate({
//将原来的位置向上移动180
"top": y - 180,
"opacity": 0
//1500动画的速度
}, 1500, function () {
//时间到了自动删除
$i.remove();
});
});
})
;
</script>
`);

一言诗词

首页logo底部的description换成一言诗词
主题的 layout 文件夹内找到 cover.ejs,注释掉原来的描述,替换成<span id="jinrishici-sentence">既见君子 云胡不喜</span>,如下👇

点击展开
<% if (theme.cover.description) { %>
<div class="cover__intro">
<span id="jinrishici-sentence">既见君子 云胡不喜</span>
<!--首页logo下方文字 <%- markdown(theme.cover.description) %> -->
</div>
<% } %>

最后再加上

<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也能使赞赏码显示完整。
    <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>
    src=后面是赞赏页面的地址,记得提前在hexo根目录配置文件添加
    skip_render:
    - Donate/** #赞赏插件存放位置
    避免md和html文件被hexo主题渲染。
  • 修改simple/index.html
    不必要的内容都删除或者注释掉,只保留支付宝和微信赞赏码;
    删除/替换.js文件,否则加载太慢;
    跳转GitHub换成发邮件;
点击展开
  <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Sponsor-Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" /><!--禁止缩放-->
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
clipboard.js 是 JS 复制文本的库 用不着-->
<script src="script.js"></script>
</head>
<body>
<a id="github" href="mailto:123456@qq.com" class="pos-f tr3" title="给我发邮件"></a>
<div id="DonateText" class="tr3">Sponsor</div>
<ul id="donateBox" class="list pos-f tr3">
<!--没有这两个东西 <li id="PayPal"><a href="https://www.paypal.me/forzqx" target="_blank">PayPal</a></li>
<li id="BTC" data-footnote="Copy addres and show QRCod"><button id="BTCBn" data-clipboard-target="#btc-key" alt="Copy to clipboard">Bitcoin</button></li> -->
<li id="AliPay">AliPay</li>
<li id="WeChat">WeChat</li>
</ul>
<div id="QRBox" class="pos-f left-100">
<div id="MainBox"></div>
</div>
<!-- Bitcoin 账号 -->
<input id="btc-key" type="text" value="lyfnull" readonly="readonly">
</body>
</html>
  • 修改simple/style.css
    整体下移沉底;
    把原来的GitHub图标换成小飞机,去 阿里巴巴矢量库 下载合适的svg图片予以替换
点击展开
  html, html>body {
margin: 0px !important;
padding: 0px !important;
height: 100%;
width: 100%;
}
body {
font-family: "Helvetica Neue", Ubuntu, "WenQuanYi Micro Hei", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", Arial, sans-serif;
-webkit-font-smoothing:antialiased;
line-height: 1.8em;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
background: rgba(255, 255, 255,0);
}
img {border-width: 0px;}
a{
color: #000;
text-decoration: none;
outline:none;
border:none;
}
.list, .list li, .list-left li {
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.pos-f {
position: fixed;
}
.left-100 {
width: 100%;
height: 100%;
}
.blur {
-webkit-filter: blur(3px);
filter: blur(3px);
}
.tr3 {
transition: all .3s;
}
#DonateText {
position: fixed;
font-size: 12px;
width: 70px;
height: 70px;
line-height: 70px;
color: #fff;
background: #ffd886 url(images/like.svg) no-repeat center 10px;
background-size: 20px;
border-radius: 35px;
text-align: center;
left: calc(50% - 36px);
top: calc(90% - 60px);
z-index: -1;
transform: rotatez(-15deg );
}
#donateBox {
left: calc(50% - 76px);
top: calc(90% - 15px);
background-color: #fff;
border: 1px solid #ddd;
border-radius: 6px;
width: auto;
height: 28px;
float: left;
z-index: 1;
}
#donateBox li {
width: 74px;
float: left;
text-align: center;
border-left: 1px solid #ddd;
background: no-repeat center center;
background-color: rgba(204, 217, 220,0.1);
background-size: 45px;
transition: all .3s;
cursor: pointer;
overflow: hidden;
line-height: 600px;
height: 28px;
-webkit-filter: grayscale(1);
filter: grayscale(1);
opacity: 0.5;
}
#donateBox li:hover {
background-color: rgba(204, 217, 220,0.3);
-webkit-filter: grayscale(0);
filter: grayscale(0);
opacity: 1;
}
#donateBox>li:first-child {
border-width: 0;
}
#donateBox a {
display: block;
}
#donateBox #PayPal {
background-image: url(images/paypal.svg);
}
#donateBox>#BTC {
background-image: url(images/bitcoin.svg);
line-height: 28px;
}
#donateBox>#BTC:hover {
overflow: visible;
}
#BTC>button {
opacity: 0;
cursor: pointer;
}
#donateBox #AliPay {
background-image: url(images/alipay.svg);
}
#donateBox #WeChat {
background-image: url(images/wechat.svg);
}
#QRBox {
top: 0;
left: 0;
z-index: 1;
background-color: rgba(255,255,255,0);
display: none;
perspective: 400px;
}
#MainBox {
cursor: pointer;
position: absolute;
text-align: center;
width: 200px;
height: 200px;
left: calc(50% - 100px);
top: calc(50% - 100px);
background: #fff no-repeat center center;
background-size: 190px;
border-radius: 6px;
box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
opacity: 0;
transition: all 1s ease-in-out;
transform-style: preserve-3d;
transform-origin: center center;
overflow: hidden;
}
#btc-key {
opacity: 0;
width: 2px;
height: 8px;
overflow: hidden;
left: -2px;
top: -8px;
}
#github {
width: 24px;
height: 24px;
left: calc(50% + 50px);
top: calc(90% - 36px);
background: no-repeat center center url(images/plane.svg);
background-size: contain;
opacity: 0.3;
transform: rotatez(0deg );
}
[data-footnote] {
position: relative;
overflow: hidden;
}
[data-footnote]:hover {
overflow: visible;
}
[data-footnote]::before, [data-footnote]::after {
position: absolute;
transition: all .3s;
transform: translate3d(-50%,0,0);
opacity: 0;
left: 37px;
z-index: 10;
}
[data-footnote]::before {
content: attr(data-footnote);
border-radius: 6px;
background-color: rgba(100,100,100,0.8);
color: #fff;
height: 24px;
line-height: 24px;
padding: 0 6px;
font-size: 12px;
white-space: nowrap;
top: -24px;
left: 37px;
}
[data-footnote]::after {
content: '';
border: 5px solid #333;
border-color: rgba(100,100,100,0.8) transparent transparent transparent;
top: 0;
left: 37px;
}
[data-footnote]:hover::before,[data-footnote]:hover::after {
opacity: 1;
}
[data-footnote]:hover::before,[data-footnote]:hover::after {
transform: translate3d(-50%,-7px,0);
}

#MainBox.showQR {
opacity: 1;
animation-name:showQR;
animation-duration:3s;
animation-timing-function:ease-in-out;
animation-iteration-count:1;
animation-fill-mode:forwards;
-webkit-animation:showQR 3s ease-in-out 0s 1 normal forwards;
}
@keyframes showQR {
from {
transform: rotateX(90deg);
}
8% {
opacity: 1;
transform: rotateX(-60deg);
}
18% {
opacity: 1;
transform: rotateX(40deg);
}
34% {
opacity: 1;
transform: rotateX(-28deg);
}
44% {
opacity: 1;
transform: rotateX(18deg);
}
58% {
opacity: 1;
transform: rotateX(-12deg);
}
72% {
opacity: 1;
transform: rotateX(9deg);
}
88% {
opacity: 1;
transform: rotateX(-5deg);
}
96% {
opacity: 1;
transform: rotateX(2deg);
}
to {
opacity: 1;
}
}
#MainBox.hideQR {
opacity: 1;
animation-name:hideQR;
animation-duration:0.5s;
animation-timing-function:ease-in-out;
animation-iteration-count:1;
animation-fill-mode:forwards;
-webkit-animation:hideQR 0.5s ease-in-out 0s 1 normal forwards;
}
@keyframes hideQR {
from {
}
20%,50% {
transform: scale(1.08,1.08);
opacity: 1;
}
to {
opacity: 0;
transform: rotateZ(40deg) scale(0.6,0.6);
}
}

  • images文件夹下面的图片全部改成自己的,建议使用webp格式压缩。

  • 放在FAQ页面或者按需插入文章页就好。(放了也白放🤦‍♂️)


Cards 主题更新至1.1.0之后,新增 fold 折叠插件,所以可以使用以下方式插入赞赏码,更简便。

赞赏码🍻


Artitalk说说

引入Artitalk说说系统

预览

方法: 新建一个页面,命名为thoughts,修改index.md

点击展开
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<div id="artitalk_main"></div>
<script>
new Artitalk({
appId: 'xxx',
appKey: 'xxx',
bgImg: 'https://cdn.jsdelivr.net/gh/forliuyifei/forliuyifei.github.io@master/img/loading.gif',
atEmoji: {
jump: "https://cdn.jsdelivr.net/gh/forliuyifei/img@mater/img/2020-6/jump.gif",
eat:"https://cdn.jsdelivr.net/gh/forliuyifei/img@mater/img/2020-6/eat.gif",
run:"https://cdn.jsdelivr.net/gh/forliuyifei/img@mater/img/2020-6/run.gif",
lalala:"https://cdn.jsdelivr.net/gh/forliuyifei/img@mater/img/2020-6/lalala.gif",
sexy:"https://cdn.jsdelivr.net/gh/forliuyifei/img@mater/img/2020-6/sexy_rabbit.gif",
wawawa:"https://cdn.jsdelivr.net/gh/forliuyifei/img@mater/img/2020-6/wawawa.gif",
wolf:"https://cdn.jsdelivr.net/gh/forliuyifei/img@mater/img/2020-6/wolf.gif",
}
})
</script>

网站运行时间

页脚添加网站运行时间

  • 在主题的layout文件夹下面找到footer.ejs,将以下代码加进</footer>前面
点击展开
<div> <center>
<span id="timeDate">世间安得双全法</span>
<span id="times">不负如来不负卿</span>
<script>
var now = new Date();
function createtime(){
var grt= new Date("07/09/2020 08:00:00");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){
hnum = "0" + hnum;
}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){
mnum = "0" + mnum;
}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){
snum = "0" + snum;
}
document.getElementById("timeDate").innerHTML = "⌛ 本站已安全运行&nbsp"+dnum+"&nbsp天";
document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
}
setInterval("createtime()",250);
</script> </center>
</div>

其它美化

  • 首页LOGO加圆框、光晕
    方形头像太丑太尖锐,又懒得每次动手裁剪成圆形
  • 友链卡片圆角
  • 首页文章卡片彩色光晕动画

步骤:

  • 先将主题配置文件里面的固定样式用#号注释掉style: #https://cdn.jsdelivr.net/npm/hexo-theme-cards@0.6.1/dist/css/style.min.css
  • 自定义css或者找个已有的_defines.styl文件加入
点击展开
//顶部logo圆框、光晕
.cover .cover__logo img {
max-width: 72px;
border-radius: 100px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 2px 10px 0px;
cursor: pointer
transition: all 0.4s
&:hover {box-shadow:0 2px 6px 1px rgba(36,146,165,0.4) }
}

//友链卡片圆角
.links-list .links-content .links-card {
border-radius: 0 0 5px 5px;
}

//首页文章卡片彩色光晕
.post-entry
cursor: pointer
&:hover
box-shadow:0px 8px 15px rgba(36,146,165,0.4) !important
border-radius: 8px

便签仿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
margin 1rem calc(0rem - var(--space))
padding 1rem var(--space)
transition transform .3s, background-color .3s, box-shadow .6s
/*注释掉,使侧边条显示border none !important*/
margin-left: 5px;
margin-right: 5px;
border-radius: .35rem;
border-left: .45rem solid;

.blockquote-note__header
font-family miriam libre, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, pingfang sc, source han sans sc, noto sans cjk sc, sarasa gothic sc, microsoft yahei, sans-serif, Apple Color Emoji, Segoe UI Emoji, Varela Round
font-size 1.125em
font-weight 550
margin-bottom 0px
margin-left: -18px;
margin-top: -10px;

.blockquote-note__content
color var(--body-color) !important
margin-left: -18px;
margin-right: -18px;
margin-bottom: -20px;


.blockquote-note__info
color #2492a5 !important
background-color rgba(0,113,243,0.1)
border-color: #2492a5;
cursor: pointer
transition: all 0.5s
&:hover
transform: scale(1.0) translate(0px,-2px)
box-shadow:6px 6px 16px rgba(36,146,165,0.4)
border-radius: 0.25rem

.blockquote-note__success
color #49a75f !important
background-color rgba(25,204,150,0.1)
border-color: #49a75f;
cursor: pointer
transition: all 0.5s
&:hover
transform: scale(1.0) translate(0px,-2px)
box-shadow:6px 6px 16px rgba(73,167,95,0.4)
border-radius: 0.25rem

.blockquote-note__tip
color #d400ff !important
background-color rgba(212,0,255,0.1)
border-color: #d400ff;
cursor: pointer
transition: all 0.5s
&:hover
transform: scale(1.0) translate(0px,-2px)
box-shadow:6px 6px 16px rgba(212,0,255,0.4)
border-radius: 0.25rem

.blockquote-note__warning
color #f5a623 !important
background-color rgba(245,166,35,0.1)
border-color: #c2a442;
cursor: pointer
transition: all 0.5s
&:hover
transform: scale(1.0) translate(0px,-2px)
box-shadow:6px 6px 16px rgba(194,164,66,0.4)
border-radius: 0.25rem

.blockquote-note__danger
color #e00 !important
background-color rgba(224,0,0,0.1)
border-color: #e45460;
cursor: pointer
transition: all 0.5s
&:hover
transform: scale(1.0) translate(0px,-2px)
box-shadow:6px 6px 16px rgba(228,84,96,0.4)
border-radius: 0.25rem

.blockquote-note__primary
color #0070f3 !important
background-color rgba(23, 106, 196,0.1)
border-color: #176ac4;
cursor: pointer
transition: all 0.5s
&:hover
transform: scale(1.0) translate(0px,-2px)
box-shadow:6px 6px 16px rgba(23,106,196,0.4)
border-radius: 0.25rem

.blockquote-note__secondary
color #58595a !important
background-color rgba(88, 89, 90,0.1)
border-color: #58595a;
cursor: pointer
transition: all 0.5s
&:hover
transform: scale(1.0) translate(0px,-2px)
box-shadow:6px 6px 16px rgba(88,89,90,0.4)
border-radius: 0.25rem

设置作者邮箱

见文章底部 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>

本文作者:冼仙

本文链接: https://loafing.cn/posts/hexo-cards-diy.html

文章默认采用 CC BY-NC-SA 4.0 许可协议,如有转载请注意遵循。

评论

您所在的地区可能无法访问 Disqus 评论系统,请切换网络环境再尝试。