本文修改主题为AnZhiYu主题，若使用其他主题，请自行确认修改位置。
写在前面
Anzhiyu主题的顶栏菜单使用了和风天气的API提供天气服务，但是和风天气已经在2024年5月1日停止服务，所以即便填写了key，也无法获取到天气数据。此时，我们需要寻找其他的天气API来替换掉和风天气。本文将介绍如何使用心知天气API替换掉Anzhiyu主题顶栏的天气功能。
效果预览
修改步骤
心知天气API
首先，需要到 心知天气 注册一个账号，并创建一个Widget应用。此步骤在 顶栏菜单重写 文章中有给出。
插件类型随意选择，需要吸附顶栏则选择固定极简，其余根据需要选择
点击生成后会得到一段HTML，将其script部分记录下来，后面需要使用
修改样式
- 修改
[Blogroot]\themes\anzhiyu\layout\includes\anzhiyu\clock.pug文件，可以接替换为如下样式：
其中location和token需要替换为自己的心知天气API信息
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
| #he-plugin-simple
script.
(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: "XXXXXXXXXXXX",
geolocation: true,
language: "auto",
unit: "c",
theme: "auto",
token: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
hover: "enabled",
container: "he-plugin-simple"
});
document.addEventListener('DOMContentLoaded', function () {
const pageHeader = document.getElementById('page-header');
if (pageHeader && pageHeader.classList.contains('nav-fixed')) {
const elements = document.querySelectorAll('#he-plugin-simple .sw-bar-slim-location');
elements.forEach(function (element) {
element.style.color = 'var(--font-color)';
element.style.setProperty('color', 'var(--font-color)', 'important');
});
} else if (pageHeader && pageHeader.classList.contains('not-top-img')) {
const elements = document.querySelectorAll('#he-plugin-simple .sw-bar-slim-location');
elements.forEach(function (element) {
element.style.color = 'var(--font-color)';
element.style.setProperty('color', 'var(--font-color)', 'important');
});
}
});
|
- 修改
[Blogroot]\themes\anzhiyu\source\_extra\clock\clock.css文件，可以接替换为如下样式：
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
|
#he-plugin-simple {
z-index: 92;
transition: 0.3s;
position: relative;
left: -110%;
}
#he-plugin-simple .sw-bar-slim-location,
#he-plugin-simple .sw-bar-slim-temperature {
font-family: "base";
font-size: 1.1rem;
color: var(--light-grey);
}
body:has(#sidebar-menus.open) #he-plugin-simple {
z-index: 104;
left: 95px !important;
opacity: 1;
display: block;
transition: 0.3s;
}
#page-header.nav-fixed #he-plugin-simple .sw-bar-slim-location,
#page-header.nav-fixed #he-plugin-simple .sw-bar-slim-temperature {
color: var(--font-color);
}
[data-theme="dark"] #he-plugin-simple .sw-bar-slim-locationy,
[data-theme="dark"] #he-plugin-simple .sw-bar-slim-temperature {
color: var(--font-color);
}
body[data-type=music] #he-plugin-simple .sw-bar-slim-location,
body[data-type=music] #he-plugin-simple .sw-bar-slim-temperature {
color: var(--anzhiyu-white) !important;
}
body[data-type=games] #he-plugin-simple .sw-bar-slim-location,
body[data-type=games] #he-plugin-simple .sw-bar-slim-temperature {
color: var(--font-colore);
}
#page-header.not-top-img #he-plugin-simple .sw-bar-slim-location,
#page-header.not-top-img #he-plugin-simple .sw-bar-slim-temperature {
color: var(--font-color);
}
div.sw-ui-main-title > p > a,
div.sw-ui-brand > a {
color: unset !important;
}
@media screen and (max-width: 1400px) {
#he-plugin-simple {
display: none;
}
}
@media screen and (min-width: 1400px) and (max-width: 1690px) {
#he-plugin-simple {
left: 262px !important;
}
}
|
开启天气功能
最后，在[Blogroot]\_config.anzhiyu.yml中将nav.clock设置为true即可开启天气功能。
1
2
3
4
| nav:
enable: true
travelling: false
clock: true
|
