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

发表于 | 更新于 | 分类于
本文字数： 9.9k | 阅读时长 ≈ 9 分钟

修改文章底部带 # 的标签

修改模板 /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

最后更新:2020年06月15日 - 22:06

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

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