icarus个性化配置

博客搭建12 分钟读完 (大约1791个字)0次访问

前言

  icarus主题本身比较完善，基本配置官方文档都有给出，但是部分内容没有给出直接配置的接口，这里对我自己的配置做一个记录。

导航栏汉化

  主题本身已经包括汉化，但是导航栏需要单独汉化，只需要在_config.icarus.yml中直接修改为中文即可。

修改博客默认字体

  修改themes\icarus\layout\common\head.jsx中fontCssUrl的字体，由于默认使用Google CDN，直接到fonts.google.com中找想要的字体再填入即可

themes\icarus\layout\common\head.jsx
1
2
3
4
5
const fontCssUrl = {
            //default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),
            default: fontcdn('Noto+Sans+SC:wght@400;600&family=Roboto+Mono', 'css2'),
            cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
};

补全配置文件

  除了自动生成的_config.icarus.yml以外，还可以通过_config.post.yml和_config.page.yml来配置页面，其中_config.post.yml是配置文章页面的文件，两个文件的配置内容如下

_config.post.yml
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
56
57
58
59
60
61
62
63
64
65
# _config.post.yml中的配置对所有“文章”生效
widgets:
    # 个人信息组件
    # -
    #     type: profile
    #     position: right
        
    # 最新文章组件
    # -
    #     type: recent_posts
    #     position: left

    # 分类组件
    # -
    #     type: categories
    #     position: right

    # 标签组件
    # -
    #     type: tags
    #     position: right

    # 时间轴|归档组件
    # -
    #     type: archives
    #     position: right

    # 链接组件
    # -
    #     type: links
    #     position: right

    # 目录组件
    -
        type: toc
        position: left

    # 订阅更新组件
    # -
    #     type: subscribe_email
    #     position: right

    # 广告组件
    # -
    #     type: adsense
    #     position: right

##################################################################################################################### 侧边栏滚动
# Sidebar configurations.
# Please be noted that a sidebar is only visible when it has at least one widget
# 侧边栏
###### 设置sidebar中某个侧边栏的sticky为true来让它的位置固定而不跟随页面滚动。
sidebar:
    # Left sidebar configurations
    # 左侧边栏设置
    left:
        # Whether the sidebar sticks to the top when page scrolls
        # 是否不随页面滚动
        sticky: true
    # Right sidebar configurations
    # 右侧边栏设置
    right:
        # Whether the sidebar sticks to the top when page scrolls
        # 是否不随页面滚动
        sticky: false
_config.page.yml
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
# _config.page.yml中的配置对所有自定义页面生效，比如“关于我”
widgets:
    # 个人信息组件
    # -
    #     type: profile
    #     position: right
        
    # 最新文章组件
    # -
    #     type: recent_posts
    #     position: left

    # 分类组件
    # -
    #     type: categories
    #     position: right

    # 标签组件
    # -
    #     type: tags
    #     position: right

    # 时间轴|归档组件
    # -
    #     type: archives
    #     position: right

    # 链接组件
    # -
    #     type: links
    #     position: right

    # 目录组件
    # -
    #     type: toc
    #     position: right

    # 订阅更新组件
    # -
    #     type: subscribe_email
    #     position: right

    # 广告组件
    # -
    #     type: adsense
    #     position: right

为文章创建分类、标签以及目录

  在markdown文件开头添加title、toc、tags、categories字段，其中toc为开启文章目录，具体样式如下

1
2
3
4
5
6
---
title: 文章标题
toc: true
tags: [标签1,标签2……]
categories: 你的分类
---

修改布局宽度

修改宽度占比

  通过修改themes\icarus\layout\layout.jsx和themes\icarus\layout\common\widget.jsx中不同列布局下的参数，可以改变两列或三列布局时文章和两边widget所占比例，由于主题采用12格布局，修改过程中要保证不同分辨率下的数值相加为12。

layout.jsx
1
2
3
4
5
6
7
8
9
//layout.jsx
<div class={classname({
	column: true,
    'order-2': true,
    'column-main': true,
    'is-12': columnCount === 1,
    'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
    'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
})} dangerouslySetInnerHTML={{ __html: body }}></div>
widget.jsx
1
2
3
4
5
6
7
8
9
10
//widget.jsx
function getColumnSizeClass(columnCount) {
    switch (columnCount) {
        case 2:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
        case 3:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
    }
    return '';
}

修改页面宽度

  修改\themes\icarus\include\style\responsive.styl中fullhd所减的gap数值，可以改变整个页面所占屏幕的比例，缩小两侧空白边缘的占比

responsive.styl
1
2
3
4
5
6
7
8
9
//responsive.styl
+fullhd()
    .is-2-column .container
        max-width: $widescreen - 0 * $gap
        width: $widescreen - 0 * $gap

    .is-1-column .container
        max-width: $desktop - 2 * $gap
        width: $desktop - 2 * $gap

增加卡片圆角值

  修改\themes\icarus\include\style\base.styl中$card-radius的值为15px

给文章的日期、分类等添加图标

  在themes\icarus\layout\common\article.jsx中修改文章的布局，以发表时间为例，添加图标标签<i class="fa fa-calendar-alt"></i>，直接添加可能导致图标和文字距离太近，可以用fa-fw进行填充，修改为<i class="fa fa-calendar-alt fa-fw"></i>

themes\icarus\layout\common\article.jsx
1
2
3
4
5
6
7
{page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
	<div class="level-left">
	{/* Creation Date */}
+   <i class="fa fa-calendar-alt"></i>
    {page.date && <span class="level-item" dangerouslySetInnerHTML={{
	  __html:_p('article.created_at',`<timedateTime="${date_xml(page.date)}"  title="${new Date(page.date).toLocaleString()}">${date(page.date)}</time>`)
	}}></span>}

添加评论系统

  参考valine官方的快速开始文档，创建LeanCloud应用，修改_config.icarus.yml中comment的配置项，填入对应的app_id和app_key即可

_config.icarus.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
comment:
    type: valine
    app_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    app_key: xxxxxxxxxxxxxxxxxxxxxx
    placeholder: ""                 # 可选填
    avatar: mm                      # 可选填
    avatar_force: false             # 可选填
    meta: ["nick", "mail", "link"]  # 可选填
    page_size: 10                   # 可选填
    lang: zh-CN                     # 可选填
    visitor: false                  # 可选填
    highlight: true                 # 可选填
    record_ip: false                # 可选填
    server_urls:                    # 可选填
    emoji_cdn:                      # 可选填
    emoji_maps:                     # 可选填
    enable_qq: false                # 可选填
    required_fields: []             # 可选填

给文章添加分享功能

  直接在_config.icarus.yml中修改插件为sharejs即可

_config.icarus.yml
1
2
3
4
5
6
# Share plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share/
share:
    type: sharejs
    # URL to the ShareThis share plugin script
#    install_url: ''

为博客添加nest动态线条特效

  在themes\icarus\layout\layout.jsx的body中添加如下代码，CDN可根据自己使用的修改

themes\icarus\layout\layout.jsx
1
<script type="text/javascript" color="30,144,255" opacity='0.5' zIndex="-1" count="150" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

除了通过CDN加载，也可以下载到本地使用，详见官方文档

页脚添加网站运行时间

  网上找到的都是ejs的写法，其实jsx的写法也很简单，只要把js的代码嵌入jsx中就可以了。在themes\icarus\layout\common\head.jsx中找到要添加运行时间的位置，比如在不蒜子前面添加，代码如下

themes\icarus\layout\common\head.jsx
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
<p class="is-size-7">
	<span dangerouslySetInnerHTML={{ __html: `&copy; ${siteYear} ${author || siteTitle}` }}></span>
	&nbsp;&nbsp;Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>&nbsp;&&nbsp;
	<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
	<br />
+	<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
+	<script dangerouslySetInnerHTML={{
+		__html: `
+		var now = new Date();
+		function createtime() {
+			var grt= new Date("2/27/2020 16:23:00");//此处修改你的建站时间或者网站上线时间
+			now.setTime(now.getTime()+250);
+			days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
+			hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
+			if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
+			mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
+			seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
+			snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
+			document.getElementById("timeDate").innerHTML = "| 本站已运行 "+dnum+" 天 ";
+			document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
+		}
+		setInterval("createtime()",250);
+		`,
+	}}
+  	/>
	{showVisitorCounter ? <br /> : null}
	{showVisitorCounter ? <span id="busuanzi_container_site_uv"
		dangerouslySetInnerHTML={{ __html: visitorCounterTitle }}></span> : null}
</p>

修改页脚不蒜子，增加总访问量统计

  在render()中添加变量visitCountTitle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
render() {
        const {
            logo,
            logoUrl,
            siteUrl,
            siteTitle,
            siteYear,
            author,
            links,
            showVisitorCounter,
            visitorCounterTitle,
+           visitCounterTitle
        } = this.props;
        ……
        ……
}

  在原来不蒜子的位置新增总访问量统计的代码

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
<p class="is-size-7">
	<span dangerouslySetInnerHTML={{ __html: `&copy; ${siteYear} ${author || siteTitle}` }}></span>
	&nbsp;&nbsp;Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>&nbsp;&&nbsp;
	<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
	<br />
	<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
	<script dangerouslySetInnerHTML={{
        __html: `
        var now = new Date();
        function createtime() {
            var grt= new Date("2/27/2020 16:23:00");//此处修改你的建站时间或者网站上线时间
            now.setTime(now.getTime()+250);
            days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
            hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
            if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
            seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
            document.getElementById("timeDate").innerHTML = "| 本站已运行 "+dnum+" 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
        setInterval("createtime()",250);
        `,
	}}
  	/>
	{showVisitorCounter ? <br /> : null}
	{showVisitorCounter ? <span id="busuanzi_container_site_uv"
		dangerouslySetInnerHTML={{ __html: visitorCounterTitle }}></span> : null}
+	{showVisitorCounter ? <span> | </span> : null}
+	{showVisitorCounter ? <span id="busuanzi_container_site_pv"
+		dangerouslySetInnerHTML={{ __html: visitCounterTitle }}></span> : null}
</p>

  在module.exports中添加visitCounterTitle的返回值

1
2
3
4
5
6
7
8
9
10
11
12
return {
	logo,
    logoUrl: url_for(logo),
    siteUrl: url_for('/'),
    siteTitle: title,
    siteYear: date(new Date(), 'YYYY'),
    author,
    links,
    showVisitorCounter: plugins && plugins.busuanzi === true,
    visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>'),
+    visitCounterTitle: _p('plugin.visit_count_total', '<span id="busuanzi_value_site_pv">0</span>')
};

  在\themes\icarus\languages\zh-CN.yml中的plugin添加visit_count_total字段

\themes\icarus\languages\zh-CN.yml
1
2
3
4
5
plugin:
    backtotop: '回到顶端'
    visit_count: '%s次访问'
    visitor_count: '共%s个访客'
+   visit_count_total: '总访问量%s'

未完待续……

参考

https://angericky.github.io/2018/12/24/icarus个性定制/#给文章日期-分类-标签增加图标

https://shuyelife.github.io/post/“为next主题添加nest背景特效”/

https://imqyn.com/2020/02/12/configuration_icarus/

https://www.weizhang.site/2020/11/19/11_Hexo博客搭建之二/#config-page-yml-配置文件

https://www.ccyh.xyz/p/f79a.html#网站访问量与访客量统计

https://blog.csdn.net/sinat_38728634/article/details/106424097

https://cloudy-liu.github.io/2019/06/23/Hexo主题迁移到icarus/#总访问量统计

http://yearito.cn/posts/hexo-writing-skills.html

icarus个性化配置

http://yoursite.com/2021/03/26/icarus个性化配置/

作者

OKC

发布于

2021-03-26

更新于

2021-04-18

许可协议

喜欢这篇文章？打赏一下作者吧

评论

×