关于hexo icarus主题定制化

1 - 添加天气组件

使用 心知天气 API 即可

1
2
3
<a class="navbar-item">
<div id="tp-weather-widget"></div>
</a>
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
(function (a, h, g, f, e, d, c, b) {
b = function () {
d = h.createElement(g);
c = h.getElementsByTagName(g)[0];
d.src = e;
d.charset = "utf-8";
d.async = 1;
c.parentNode.insertBefore(d, c);
};
a["SeniverseWeatherWidgetObject"] = f;
a[f] ||
(a[f] = function () {
(a[f].q = a[f].q || []).push(arguments);
});
a[f].l = +new Date();
if (a.attachEvent) {
a.attachEvent("onload", b);
} else {
a.addEventListener("load", b, false);
}
})(
window,
document,
"script",
"SeniverseWeatherWidget",
"//cdn.sencdn.com/widget2/static/js/bundle.js?t=" +
parseInt((new Date().getTime() / 100000000).toString(), 10)
);
window.SeniverseWeatherWidget("show", {
flavor: "slim",
location: "WX4FBXXFKE4F",
geolocation: true,
language: "en",
unit: "c",
theme: "light",
token: "ebb2adc5-xxxx-xxxx-xxxx-7e7102ba8185",
hover: "disabled",
container: "tp-weather-widget",
});

注意夜间模式样式冲突

2 - 解锁 RSS 功能

  • 进入本地 hexo 根目录键入npm install hexo-generator-feed
  • 更改访问路径rss: /atom.xml
  • clean & g重启服务即可

3 - 解锁邮件订阅功能

Icarus 的邮件订阅功能由 Google Feedburner 提供。 按照如下步骤即可启用此插件:

  1. 首先,你要完成第二步骤,确认你的 Hexo 网站的 RSS 源正常。
  2. 然后登录Google Feedburner,在输入框内输入你的 RSS 地址并点击“下一步”(Next) 来添加你的 RSS 源。
  3. 然后,在下一页中填写“源标题”。 点击“下一步”(Next)来继续自定义你的源,或者点击“直接跳到源管理”(Skip directly to feed management)来完成配置。
  4. 完成添加源后,点击网页顶部的”我的源“(My Feeds)链接。 点击“我的源”(My Feeds)页面上新添加的源。
  5. 切换到”宣传“(Publicize)标签页并点击页面左侧的”邮件订阅“(Email Subscription)链接。 点击“激活”(Activate)按钮来开启“邮件订阅”(Email Subscription)功能。
  6. 在”邮件订阅“(Email Subscription)页面上从 HTML 代码中找到如下信息:

    来自 Google Feedburner URL:https://feedburner.google.com/fb/a/mailverify?uri=**


然后复制uri=后的 ID(如feedforall/ABCD)到挂件配置的feedburner_id设置中,_config.yml 设置示例如下

1
2
3
4
5
6
7
widgets:
-
position: left
type: subscribe_email
# (可选) 描述文字
description: 邮件订阅,更新早知道
feedburner_id: feedforall/ABCD

4 - 解锁 Google 广告收入

Google AdSense上新建广告。 然后,复制广告 HTML 代码中的data-ad-clientdata-ad-slot值分别填入到挂件配置的client_idslot_id项中,_config.yml 设置示例如下

1
2
3
4
5
6
widgets:
-
position: left
type: adsense
client_id: ca-pub-xxxxxxxx
slot_id: xxxxxxx

5 - 解锁分享功能

_config.yml 设置中的 share 的 type 更改为sharejs
在 icarus 主题下还提供以下几种分享:
AddThis AddToAny Baidu Share Share.js ShareThis
具体详情可以分别查看官方文档。

6 - 添加一言/今日诗词

浏览一言今日诗词的对接文档添加到相应到头部、尾部或 weight 即可。
这里列举一个引用一言的方法:

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
<p id="hitokoto">:D 获取中...</p>
<!-- 以下写法,选取一种即可 -->
<!-- 现代写法,推荐 -->
<!-- 兼容低版本浏览器 (包括 IE),可移除 -->
<script src=https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js></script>
<!--End-->
<script>
fetch('https://v1.hitokoto.cn')
.then(function (res){
return res.json();
})
.then(function (data) {
var hitokoto = document.getElementById('hitokoto');
hitokoto.innerText = data.hitokoto;
})
.catch(function (err) {
console.error(err);
})
</script>
<!-- 老式写法,兼容性最忧 -->
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://v1.hitokoto.cn');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
var hitokoto = document.getElementById('hitokoto');
hitokoto.innerText = data.hitokoto;
}
}
xhr.send();
</script>
<!-- 新 API 方法, 十分简洁 -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer=""></script>

7 - 夜间模式

Hexo 主题 icarus 配置夜间模式 Night Mode

写在最后

更多的功能解锁可以查阅 来自官方的插件功能,其包含画廊、TEX/MathJax 数学公式显示、浏览器升级提醒和网页载入动画等。

作者

Catooilg

发布于

2020-08-05

更新于

2023-02-05

许可协议

评论