头像昵称同时显示 | 名称下今日诗词 | 添加代码块复制功能 | 添加 RSS 订阅功能 | 添加文章加密功能 | hexo cards 主题添加 rel=’me’标签进行mastodon身份验证
1. cards主题头像名称同时显示
打开文件cover.ejs修改 if else 语句，这里判断有头像 avatar 就不显示名称 sitename 了，
文件地址：\themes\cards\layout\_partial\source\cover.ejs
1
2
3
4
5
6
7
8
9
10
| <div class="cover__logo">
<% if (theme.cover.avatar) { %>
<img no-lazy alt="author Image" class="cover__avatar" src="<%= url_for(theme.cover.avatar) %>">
<% } %>
<% if (theme.cover.sitename) { %>
<h1 class="cover__title" ><%= theme.cover.sitename %></h1>
<% } else if (config.title) { %>
<h1 class="cover__title" ><%= config.title %></h1>
<% } %>
</div>
|
注意：
如果参照博客 hexo cards主题添加背景图片 进行了修改，相同路径下的cover_banner.ejs也要对应修改。
2. 名称下今日诗词
打开文件cover.ejs,将此行注释掉<%- markdown(theme.cover.description) %>,并在上方插入<span id="jinrishici-sentence">今日诗词</span>
文件地址：\themes\cards\layout\_partial\source\cover.ejs
1
2
3
4
5
6
| <% if (theme.cover.description) { %>
<div class="cover__intro">
<span id="jinrishici-sentence">今日诗词</span>
<!--首页logo下方文字 <%- markdown(theme.cover.description) %> -->
</div>
<% } %>
|
3. 添加代码块复制功能
创建clipboard_use.js
在 \themes\cards\source\js 目录下，新建文件clipboard_use.js,添加内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| $(".highlight").wrap("<div class='code-wrapper' style='position:relative'></div>");
/*页面载入完成后，创建复制按钮*/
!function (e, t, a) {
/* code */
var initCopyCode = function () {
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += ' <i class="fa fa-clipboard"></i><span>复制</span>';
copyHtml += '</button>';
/* $(".highlight .code").before(copyHtml); */
$(".code-wrapper .highlight table").before(copyHtml);
var clipboard = new ClipboardJS('.btn-copy', {
target: function (trigger) {
var tablee = trigger.nextElementSibling;
<!-- return trigger.nextElementSibling; -->
return tablee.firstElementChild.firstElementChild.firstElementChild.nextElementSibling;
}
});
clipboard.on('success', function (e) {
e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制成功</span>"
setTimeout(function () {
e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
}, 1000)
e.clearSelection();
});
clipboard.on('error', function (e) {
e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制失败</span>"
setTimeout(function () {
e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
}, 1000)
e.clearSelection();
});
}
initCopyCode();
}(window, document);
|
为按钮创建样式
在 \themes\cards\source\css\style\_base\markdown.styl 样式中添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| /* 代码块复制按钮 */
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
}
.btn-copy span {
margin-left: 5px
}
.code-wrapper:hover .btn-copy {
opacity: 1;
}
|
引入font-awesome
按钮上面添加了一个小图标美化，需要引入font-awesome
在 \themes\cards\layout\_partial\head\index.ejs中的之前添加如下代码：
1
| <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
最后，引用js
在 themes\cards\layout\layout.ejs 文件中的
评论