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

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

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

24字社会主义核心价值观

实例： 在根目录 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 许可协议，如有转载请注意遵循。

最后更新于：2020 九月 19日 , 星期六 , 14:21 下午

# 教程 # 美化 # hexo

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

24字社会主义核心价值观

一言诗词

赞赏功能

Artitalk说说

网站运行时间

其它美化

便签仿Fluid主题

设置作者邮箱

评论