hexo及icarus主题个性定制

2018-12-24 2019-11-14 10 分钟读完 (大约 1456 个字)

icarus

hexo / icarus

icarus个性定制配置修改的一些内容。

前言

此篇不介绍hexo的搭建，网上教程已经很完善，这里讲我用icarus做的一些个性化配置。

语言切换

Icarus提供多语言切换，默认是英文的。
为了改成中文，进入项目目录，修改_config.yml 中的language: zh-CN

增加文章字间距

icarus中文显示字体有点挤。
在icarus/xiansource/css/style.styl中
.article .content的部分加上letter-spacing: 0.08rem;

加宽中心文章的布局

icarus默认的文章区域比较窄，我想改得宽一点，突出文章内容。
解决办法：
打开themes/icarus/layout/layout.ejs
改变main_column_class()中case 3的返回值
原值为is-8-tablet is-8-desktop is-6-widescreen
我改成了is-10-tablet is-10-desktop is-8-widescreen

但是重新部署的时候，会出现整体内容不居中
解决办法：
通过开发者工具可以看到生成的container.saas文件里，margin-left和margin-right都是auto
在icarus/source/css/style.sytl中加上属性

	.container 
 		margin-left: 2rem;
  		margin-right: 2rem;
``
同时为了让navbar居中把在同一个文件中@media screen and (mid-width: screen-fullhd)的部分里把@media screen and (min-width: screen-fullhd) 部分改成
```css
    @media screen and (min-width: screen-fullhd)
        .is-3-column .container
            max-width: 1600px
            margin-left: 2rem;
            margin-right: 2rem;
        .is-2-column .container
            max-width: screen-widescreen - 2 * gap
            width: screen-widescreen - 2 * gap
            margin-left: auto;
            margin-right: auto;
        .is-1-column .container
            max-width: screen-desktop - 2 * gap
            width: screen-desktop - 2 * gap

更改友情链接布局

icarus本身的链接布局是一列一列的，左边昵称，右边链接。
我为了省空间，把跳转链接直接加到昵称上，让两个昵称左右分布。
更改links.ejs文件里div class="card-content"部分

<div class="menu links">
    <h3 class="menu-label">
        <%= __('widget.links') %>
    </h3>
    <ul class="menu-list">
        <% let flag = 1; for (let i in links) { %>
            <% if (flag == 1) { %>
                <li>
                <a class="level is-mobile" href="<%- links[i] %>" target="_blank">
                    <span class="level-left" style="text-decoration: underline">
                        <span class="level-item"><%= i %></span>
                    </span> 
                </a>      
                <% flag = 0;} else {%>
                <a class="level is-mobile" href="<%- links[i] %>" target="_blank">
                    <span class="level-right" style="text-decoration: underline">
                        <span class="level-item"><%= i %></span>
                    </span>
                </a>
                </li>
            <% flag = 1;} %>
        <% } %>
    </ul>
</div>

style.style中widget部分改为

.widget
    .media
        border: none
    .media + .media
        margin-top: 0
    .menu-list 
        li ul
            margin-right: 0
        a.level
            display: flex
    .links .menu-list a.level
        display: inline-block

给博客增加自定义目录

在主题的配置文件config.yml里添加：

    widgets:
    -
        type: toc
        position: lef
`

对于需要添加目录的博客，在header中添加toc: true

为博客增加分享功能

icarus提供多个分享插件。

AddThis
AddToAny
Baidu Share
Share.js
ShareThis

我选择share.js插件，它可以一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站。
设置步骤：

1
2
3

_config.yml
share:
    type: sharejs

给blog增加点击爱心效果

创建js文件

在/themes/icarus/source/js/src下新建文件clicklove.js，接着把该链接下的代码拷贝粘贴到clicklove.js文件中。

!function(e,t,a){
    function n(){
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
        o(),
        r()
    }
    function r(){
        for(var e=0;e<d.length;e++)
            d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");
        requestAnimationFrame(r)
    }
    function o(){
        var t="function"==typeof e.onclick&&e.onclick;
        e.onclick=function(e){
            t&&t(),i(e)
        }
    }function i(e){
            var a=t.createElement("div");
            a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
    }
    function c(e){
        var a=t.createElement("style");a.type="text/css";
        try{
            a.appendChild(t.createTextNode(e))
        }
        catch(t){
            a.styleSheet.cssText=e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function s(){
        return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
    }
    var d=[];
    e.requestAnimationFrame=function(){
        return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){
            setTimeout(e,1e3/60)
        }
    }(),
    n()
}
(window,document);

修改layout.ejs文件

在/theme/icarus/layout/layout.ejs的<!DOCTYPE html>之后增加语句

1	<script src="/js/clicklove.js"></script>

增加看板娘插件live2D

安装

使用 npm 安装：
在 Hexo 项目的根目录运行命令：

1	npm install --save hexo-helper-live2d

3.0.1 版本存在的 bug：
存在代码注入 bug，与 hexo-tag-dplayer 插件产生冲突，导致相关脚本无法加载。
解决方法：在项目中使用 npm 命令手动卸载 “hexo-tag-dplayer”: “^0.3.1”。
参阅GitHub issue

给文章日期/分类/标签增加图标

Icarus主题下的这些没有图标，但我想加图标的话怎么办？
hexo里可以使用FontAwesome图标CSS样式加上字体库实现图标的引用。
其它网站开发中也可以使用。

引入

Icarus主题源文件中已经引用了CSS文件，可直接跳过这部分。

使用图标之前需要引入 CSS 文件,这里选用 FontAwesome 4.4.0 版本。

1	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

当然,还可以使用离线包,我们可以去官网下载它。http://fontawesome.io/

使用

1	<i class="fa fa-home"></i>

图标CSS清单可参考博客

文章做成两格布局

文件改动

includes/helpers/layout.js中

1 2	hexo.extend.helper.register('column_count', function () { let columns = 1;

后添加

1
2
3

if (this.page.__post === true || this.page.__page === true) {
    return 2;
}

layout/common/widget.ejs中

1	<%- partial('common/widget', { position: 'right' }) %>

改成

1
2
3

<% if (page.__page !== true && page.__post !== true) { %>
    <%- partial('common/widget', { position: 'right' }) %>
<% } %>

layout/layout.ejs中
hexo.extend.helper.register('column_count', function () { let columns = 1;
后添加

1
2
3

 if (this.page.__post === true || this.page.__page === true) {
     return 2;
}

但这样左边栏显示变宽了，我觉得不是很好看，怎么办呢？

把layout/common/widget.ejs中side_column_class()的case 2
的返回值改成return 'is-4-tablet is-4-desktop is-3-widescreen';就好啦！

更多细则可以参考作者项目的issue(作者是个勤于回复的人！特别好！)

添加文章更新时间

修改（博客主目录/themes/icarus/layout/common/article.ejs文件，在<time class="level-item has-text-grey" datetime="<%= date_xml(post.date) %>"><%= date(post.date) %></time>标签后添加

<% if (post.updated && post.updated > post.date) { %>
    <i class="fas fa-calendar-check">&nbsp</i>
    <time class="level-item has-text-grey" datetime="<%= date_xml(post.updated) %>"><%= date(post.updated) %></time>
<% } %>

根据博客配置文件中的 language 参数修改对应的语言配置文件（博客主目录）/themes/icarus/languages/zh_CN.yml
1
2
post:
updated: 更新于
修改主题配置文件（博客主目录）/themes/icarus/_config.yml，增加一行
1
display_updated: true

写文章的时候可以直接在文章开头设置更新时间
updated: 2018-01-01 12:00:00
没有这参数的话将会显示md文件的修改日期

优化访问速度

To be continued…

# hexo, icarus

本文总阅读量次