配置Icarus主题
版权申明：本文为原创文章，转载请注明原文出处
原文链接：http://blog.pp6f.com/2022/02/09/Hexo/config_Icarus_theme/
本文记录在使用Icarus主题时的一些配置！所有配置 不分先后 遇到随手记录！
索引
Icarus是基于Hexo静态博客生成器的一款主题。
这里主要介绍如何配置Icarus的自定义化。
如果你还没有使用，可以参考我的其他文章 Hexo安装使用 和 Icarus主题使用及问题。
可以帮助你从零建设你的个人博客。
配置CDN
在_config.icarus.yml找到providers。全部修改为loli
国内网络环境很多国外的cdn被墙，所以需要修改cdn改善访问速度。
1 | providers: |
配置highlight主题 代码高亮
首先 在_config.yml中找到highlight 设置enable: trueHexo提供了2个代码高亮插件 但同时只能开启一个 所以prismjs要设置为false
1 | highlight: |
在_config.icarus.yml中找到article highlight修改theme
可以在 highlight主题列表 找到更多的主题 也可以在 highlight主题预览 预览这些主题
1 | article: |
修改页面宽度
Icarus初始的页面宽度在PC端浏览很窄，而且使用3列更小。所以需要加宽显示，看起来更为大气！
具体操作：
1.打开themes\icarus\include\style\responsive.styl。按下面的项修改
1 | +fullhd() |
2.这可以宽一点 但还不够 继续！
进入themes\icarus\source\css\文件夹，新建一个styl文件。如：brucebin.styl
编辑填入以下代码
1 | screen-tablet = 769px |
3.打开themes\icarus\source\css\style.styl插入以下代码。将我们新建的styl文件引用进去
1 | @import 'brucebin' |
至此完成显示宽度的增加 刷新测试下吧！
增加深色模式
增加深色模式
本文给icarus增加一个深色模式。借鉴了imaegoo的icarus魔改版 和 jeam-xyz的icarus修改版。以下使用的一些代码源自于这两位网友！在此表示感谢！
1.增加一个按钮
在导航页增加一个按钮。打开themes\icarus\layout\common\navbar.jsx。增加以下代码 复制时清除前面的加号
1 | <div class="navbar-end"> |
2.新建一个js文件
创建文件themes\icarus\source\js\night.js。代码如下
1 | (function () { |
3.引用js文件
打开themes/icarus/layout/common/scripts.jsx文件。增加以下代码 复制时清除前面的加号
1 | return <Fragment> |
4.新建一个styl文件
创建文件themes/icarus/source/css/night.styl。代码如下
1 | dark-primary-color = rgb(55, 61, 72) |
5.引用styl文件
打开themes/icarus/source/css/style.styl文件。插入以下代码
1 | @import 'night' |
增加深色logo图标
1.增加导航页logo深色图标
打开themes\icarus\layout\common\navbar.jsx 增减以下代码
1 | class Navbar extends Component { |
2.增加脚页logo深色图标
打开themes\icarus\layout\common\footer.jsx 增减以下代码
1 | class Footer extends Component { |
3.增加css代码
打开themes\icarus\source\css\night.styl 增加以下代码
1 | .night |
4.增加深色模式的logo图标
制作一个深色模式显示的logo图标，存放在themes\icarus\source\img\ 命名为 logo-dark.png。
5.修改配置文件
打开_config.icarus.yml配置文件，增加以下代码。
1 | # Version of the configuration file |
提示
在复制以上代码时切忌删除代码前的"+"
深色模式覆盖不完全未经严谨的筛查如有遗漏 可以留言或自行检查
文章分享按钮
在_config.icarus.yml找到 share 进行配置。可以参考Icarus提供的文档
1 | # Share plugin configurations |
修改在手机页面宽度
打开themes\icarus\include\style\responsive.styl 修改padding的值
1 | +mobile() |
在手机页面隐藏小部件
打开themes\icarus\include\style\responsive.styl 在+mobile()增加一下代码
1 | +mobile() |
修改Icarus主题字体
- 打开
themes\icarus\include\style\base.styl修改$family-sans-serif的值 - 默认值(
Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif) - 修改为(
-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")
修改code背景颜色
- 打开
themes\icarus\include\style\article.styl找到.article .code添加background-color: #f5f5f5themes\icarus\include\style\article.styl 1
2
3&.article
code
background-color: #f5f5f5
给文章增加 原创/转载 标签
- 给每篇文章加上 原创/转载 的标签
找到
themes\icarus\layout\common\article.jsx增删以下代码themes\icarus\layout\common\article.jsx >folded 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
47const moment = require('moment');
const { Component, Fragment } = require('inferno');
const Share = require('./share');
const Donates = require('./donates');
const Comment = require('./comment');
const ArticleLicensing = require('hexo-component-inferno/lib/view/misc/article_licensing');
+ const CopyRight = require('./copyright');
.../* 省略代码 */
render() {
const { config, helper, page, index } = this.props;
const { article, plugins } = config;
- const { url_for, date, date_xml, __, _p } = helper;
+ const { url_for, date, date_xml, __, _p, is_post } = helper;
const indexLaunguage = config.language || 'en';
const language = page.lang || page.language || config.language || 'en';
const cover = page.cover ? url_for(page.cover) : null;
const updateTime = article && article.update_time !== undefined ? article.update_time : true;
const isUpdated = page.updated && !moment(page.date).isSame(moment(page.updated));
const shouldShowUpdated = page.updated && ((updateTime === 'auto' && isUpdated) || updateTime === true);
+ const copy = page.copy_from ? url_for(page.copy_from) : null;
.../* 省略代码 */
+ {/* 原创or转载 */}
+ <span class={`level-item copyright article-title type-${copy ? '1' : '2'}`}>{copy ? '转载' : '原创'}</span>
{/* Creation Date */}
{page.date && <span class="level-item" dangerouslySetInnerHTML={{
__html: _p('article.created_at', `<time dateTime="${date_xml(page.date)}" title="${new Date(page.date).toLocaleString()}">${date(page.date)}</time>`)
}}></span>}
.../* 省略代码 */
{/* Title */}
{page.title !== '' ? <h1 class="title is-3 is-size-4-mobile">
{index ? <a class="link-muted" href={url_for(page.link || page.path)}>{page.title}</a> : page.title}
</h1> : null}
+ { /* 版权声明 */}
+ {is_post() ? <CopyRight config={config} page={page} helper={helper} /> : null}新建
themes\icarus\layout\common\copyright.jsx文件 输入以下代码themes\icarus\layout\common\copyright.jsx >folded 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19const { Component } = require('inferno');
module.exports = class extends Component {
render() {
const { page, config } = this.props;
const { article } = config;
const isCopy = page.copy_from // 是否为转载的文章
const url = isCopy ? page.copy_from : page.permalink // 来源链接地址
if (article.copyright == 'false') {
return null;
}
return <div class={'copyright article-block ' + (isCopy ? 'type-1' : 'type-2') }>
{ !isCopy ? <p>版权申明：本文为原创文章，转载请注明原文出处</p> : null }
<p>原文链接：<a href={ url } target="_blank">{ url }</a></p>
</div>;
}
};新建
themes\icarus\include\style\copyright.styl文件 输入以下代码themes\icarus\include\style\copyright.styl >folded 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$copyright-color-1 ?= #74cf59
$copyright-color-2 ?= #ca0c16
$copyright-background-color-1 ?= #eaf9e3
$copyright-background-color-2 ?= #f9ecec
.copyright
&.article-title
padding: 2px 5px
border-radius: 3px
&.type-1
color: $copyright-color-1
background-color: $copyright-background-color-1
&.type-2
color: $copyright-color-2
background-color: $copyright-background-color-2
&.article-block
padding: 0.4em 0.8em
margin-bottom: 1em
border-radius: 0.3rem
border-left: 5px solid #ca0c16
P
word-wrap: break-word
word-break: break-all
overflow: hidden
&.type-1
border-left: 5px solid $copyright-color-1
background-color: $copyright-background-color-1
&.type-2
border-left: 5px solid $copyright-color-2
background-color: $copyright-background-color-2引用
styl文件 打开themes\icarus\source\css\style.styl追加以下代码themes\icarus\source\css\style.styl >folded 1
2
3
4...
@import '../../include/style/copyright'添加好以上代码后 现在介绍如何使用
在每篇的文章markdown文件的头 指定copy_from项的连接 即为转载文章 如果不指定copy_from则表示原创文章# 转载文章 不指定则是原创文章 copy_from: https://blog.pp6f.com/
修改busuanzi显示uv和pv
- 增加显示PV
- 编辑
themes\icarus\layout\common\footer.jsx修改以下代码themes\icarus\layout\common\footer.jsx 1
2- visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>')
+ visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>') + _p('plugin.visit_count', ', <span id="busuanzi_value_site_pv">0</span>') - 编辑
themes\icarus\layout\common\scripts.jsx增添以下代码themes\icarus\layout\common\scripts.jsx >folded 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+ // busuanzi
+ const busuanzi_init = `if (${config.plugins.busuanzi} == true) {
+ $(document).ready(function () {
+ var int = setInterval(fixCount, 100);
+ var uvOffSet = parseInt(${config.busuanzi.site_uv_offset | 0});
+ var pvOffSet = parseInt(${config.busuanzi.site_pv_offset | 0});
+
+ function fixCount() {
+ var realUv = parseInt($("#busuanzi_value_site_uv").html())
+ var realPv = parseInt($("#busuanzi_value_site_pv").html())
+ if ($("#busuanzi_container_site_uv").css("display") != "none" && realUv > 0) {
+ clearInterval(int);
+ $("#busuanzi_value_site_uv").html(realUv + uvOffSet);
+ $("#busuanzi_value_site_pv").html(realPv + pvOffSet);
+ }
+ }
+ });
+ }`;
return <Fragment>
<script src={cdn('jquery', '3.3.1', 'dist/jquery.min.js')}></script>
<script src={cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')}></script>
{clipboard && <script src={cdn('clipboard', '2.0.4', 'dist/clipboard.min.js')} defer></script>}
<script dangerouslySetInnerHTML={{ __html: `moment.locale("${language}");` }}></script>
<script dangerouslySetInnerHTML={{ __html: embeddedConfig }}></script>
<script src={url_for('/js/column.js')}></script>
<Plugins site={site} config={config} page={page} helper={helper} head={false} />
<script src={url_for('/js/main.js')} defer></script>
<script src={url_for( '/js/night.js' )} defer={ true }></script>
+ <script dangerouslySetInnerHTML={{ __html: busuanzi_init }}></script> {/* busuanzi */}
</Fragment>; - 打开博客根目录的
_config.yml添加以下代码_config.yml 1
2
3busuanzi:
site_uv_offset: 100 # 初始uv值
site_pv_offset: 200 # 初始pv值
