hexo及icarus主题个性定制

文章目录
  1. 1. 前言
    1. 1.1. 语言切换
    2. 1.2. 增加文章字间距
    3. 1.3. 加宽中心文章的布局
    4. 1.4. 更改友情链接布局
    5. 1.5. 给博客增加自定义目录
    6. 1.6. 为博客增加分享功能
    7. 1.7. 给blog增加点击爱心效果
      1. 1.7.1. 创建js文件
      2. 1.7.2. 修改layout.ejs文件
    8. 1.8. 增加看板娘插件live2D
      1. 1.8.1. 安装
    9. 1.9. 给文章日期/分类/标签增加图标
      1. 1.9.1. 引入
      2. 1.9.2. 使用
    10. 1.10. 文章做成两格布局
      1. 1.10.1. 文件改动
    11. 1.11. 添加文章更新时间
    12. 1.12. 优化访问速度


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中加上属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	.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"部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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部分改为

1
2
3
4
5
6
7
8
9
10
11
12
.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

给博客增加自定义目录

article.ejs中添加

1
2
3
4
5
6
7
8
9
<div class="content">
<% if(!index && post.ttoc == true){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<% } %>
<%- index && post.excerpt ? post.excerpt : post.content %>
</div>

对于需要添加目录的博客,在header中添加ttoc: 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文件中。

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
!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.ejsside_column_class()case 2
的返回值改成return 'is-4-tablet is-4-desktop is-3-widescreen';就好啦!

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

添加文章更新时间

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

    1
    2
    3
    4
    <% 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>
    <% } %>
  2. 根据博客配置文件中的 language 参数修改对应的语言配置文件(博客主目录)/themes/icarus/languages/zh_CN.yml

    1
    2
    post:
    updated: 更新于
  3. 修改主题配置文件(博客主目录)/themes/icarus/_config.yml,增加一行

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

优化访问速度

To be continued…

本文总阅读量

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×