[Hexo 博客系列-04] 主题改造

修改文章底部带 # 的标签

修改模板 /themes/next/layout/_macro/post.swig, 搜索 rel="tag">#, 将 # 换成 <i class="fa fa-tag"></i>

网站运行时间

themes/layout/_parrials/footer.swing 中添加:


代码

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
<span id="sitetime"></span>
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var t1 = Date.UTC(2018,06,07,12,00,00); // 设置建立网站的时间
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
}
siteTime();
</script>


NexT 主题添加多字体

  1. 修改 /themes/next/source/css/_variables/base.styl 文件中的字体获取方法:
1
2
3
4
5
get_font_family(config) {
custom_family = hexo-config('font.' + config + '.family')
// 在这里把引号去除
return custom_family is a 'string' ? unquote(custom_family) : null
}
  1. 再修改主题配置文件:
1
2
3
4
global:
# external: true will load this font family from host.
external: true
family: "Consolas, 'Helvetica Neue', Helvetica, Arial"

注意, 其中 family 的设置,必须以 " 包含,里面的字体名称如果含有空格,则用 '
两个顺序不能反了,否则生成的 index.html 中,有一部分引用该字体作为 url 时会出错,导致 gulp 压缩也会失败。

自定义样式

文字增加背景色

theme/next/source/css/_custom 中的 custom.styl 文件里增加:


css

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}


使用方式:

1
2
3
4
<span id="inline-blue"> 站点配置文件 </span>
<span id="inline-purple"> 主题配置文件 </span>
<span id="inline-yellow"> 站点配置文件 </span>
<span id="inline-green"> 主题配置文件 </span>

下载按钮样式

同样,在 theme/next/source/css/_custom 中的 custom.styl 文件里增加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}

使用方式:

1
<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>

优化友链样式

友链(links) 的样式文件在 themes\next\source\css\_common\components\sidebar\sidebar-blogroll.styl, 可以在此处修改样式。
模板位于 themes\next\layout\_macro\sidebar.swig 文件中的 标记处。
阁主博客的友链主要增加了以十二支为索引,以及友链的图标和说明。
本文的友链模板即样式代码如下所示,读者可自行更改样式和模板,有不懂的可留言或右下角call阁主~


模板部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
</div>
<ul class="links-of-blogroll-list">
{% for blogrollText, blogrollURL in theme.links %}
<li class="links-of-blogroll-item">
{% set url = blogrollURL.split('||')[0] | trim %}
{% set icon = blogrollURL.split('||')[1] | trim %}
{% set comment = blogrollURL.split('||')[2] | trim | default(blogrollText) %}
<a href="{{url}}" title="{{comment}}" rel="noopener" target="_blank">
<img src="{{icon}}" />
{{ blogrollText }}
</a>
{#{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }#}
</li>
{% endfor %}
</ul>
</div>
{% endif %}



样式部分

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
38
39
.links-of-blogroll {
margin-top: 10px;
font-size: 13px;
}

.links-of-blogroll-title {
margin-top: 0;
font-size: 14px;
font-weight: $font-weight-bold;
}
.links-of-blogroll-list {
margin: 0;
padding: 0;
list-style:cjk-earthly-branch;
}

.links-of-blogroll-item {
padding: 2px 10px;
text-align: left;
margin: 15px;

a, span.exturl {
max-width: 280px;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: none;
display: inline-table;
}

img{
height: 35px;
width: 35px;
display: inline;
vertical-align: middle;
margin-right: 15px;
}
}


文章末尾结束标记

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文至此结束<i class="fa fa-heartbeat"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

接着打开 \themes\next\layout\_macro\post.swig 文件, 在 post-body 之后, post-footer 之前添加代码(post-footer之前两个DIV):

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

最后再主题配置文件中启用:

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

文章底部版权信息+复制文本版权信息

theme/next/layout/_macro/ 下增加文件 my-copyright.swig:


代码

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
{% if page.copyright %}
<div class="my_post_copyright">
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a></p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
function addLink() {
var body_element = document.body;
var selection = window.getSelection();
var line1 = "原文出自[Memento 博客](https://memento1990.github.io/)";
var line2 = "除特别声明外,署名-非商业性使用-禁止演绎 4.0 国际";
var line3 = "转载请保留原文链接及作者: " + document.location.href;
if (window.clipboardData) { // Internet Explorer
var copytext = selection + "\r\n\r\n" + line1 + "\n" + line2 + "\n" + line3;
window.clipboardData.setData("Text", copytext);
return false;
}
else {
var copytext = selection + "<br /><br />" + line1 + "<br />" + line2 + "<br />" + line3;
var newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function () {
body_element.removeChild(newdiv);
}, 0);
}
}
document.oncopy = addLink;
</script>
{% endif %}


其中 div 部分,会在文章底部生成版权声明板块,script 脚本代码则是处理复制文章文本时,自动在复制内容下面追加版权声明内容;

然后在 theme/next/layout/_macro/post.swig 中增加该模块配置(在 END POST BODY 注释标记后即可):

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>

--------------------本文至此结束  感谢您的阅读--------------------

本文标题:[Hexo 博客系列-04] 主题改造

文章作者:Memento

发布时间:2019年03月30日 - 21:03

最后更新:2019年12月12日 - 22:12

原始链接:http://memento.net.cn/post/bc92e064.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Memento wechat
欢迎您扫一扫上面的微信公众号, 订阅阁主公众号!
坚持原创技术分享, 您的支持将鼓励我继续创作