📚 文档目录

01-添加自定义css和js文件02-footer栏03-友链卡片样式04-站点图片批量半自动截图05-分类磁贴插件版06-添加侧边栏电子钟07-侧边栏归档、分类修改08-标签云增加文章数上下标09-顶部加载渐变条10-导航栏魔改11.1-返回顶部按钮显示网页阅读进度11.2-添加白天夜间模式转换动画11.3-增加分享本页11.4-直达底部12-添加51统计13-404页面展示最近文章14-分类标签归档页增加文章索引15-新标签打开文章16-使用Algolia搜索17-文章双栏布局插件18-动态分类标签导航栏19-增加评论热评轮播功能20-链接卡片标签外挂21-新年倒计时卡片22-文章统计图页面23-隐藏部分文章不在首页显示

安装插件

安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

1
npm install hexo-butterfly-clock-anzhiyu --save

增加配置信息

在主题配置文件_config.butterfly.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 侧边栏电子钟
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: /img/loading.gif #加载动画自定义
  clock_css: /css/clock.min.css
  clock_js: /js/clock.min.js
  ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
  qweather_key: # 和风天气key
  gaud_map_key: # 高得地图web服务key
  default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
  rectangle: 104.065735,30.659462 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置

创建css、js文件

在source\css文件夹下新建clock.min.css文件并添加如下代码

1
@font-face {font-family:LED;src: url(/fonts/UniDreamLED-Regular.woff2) format('woff2');font-display:swap}.card-clock-location,.card-clock-windDir,span.card-clock-weather{font-family:LXGWFont}span.temp{font-family:LED}#hexo_electric_clock{padding:10px}.card-clock{padding:0!important}.card-background{height:153px;margin:0 10px;border-radius:8px;background-color:transparent;z-index:2}.clock-row{font-family:LED;font-weight:400;color:#000;display:flex;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.card-clock-clockdate,.card-clock-ip{text-align:left}.card-clock-location,.card-clock-weather{letter-spacing:-2px;text-align:center}.card-clock-dackorlight,.card-clock-humidity{text-align:right}.card-clock-time{flex:1;font-family:LED;font-size:3rem;text-align:center;margin:.5rem 0;letter-spacing:5px;line-height:normal}[data-theme=dark] .card-background{background-color:#212121;}[data-theme=dark] .clock-row{color:#fff}@font-face{font-family:"qweather-icons";src:url("/fonts/qweather-icons.woff2") format("woff2")}[class^="qi-"]::before,[class*=" qi-"]::before{display:inline-block;font-family:"qweather-icons" !important;font-style:normal;font-weight:normal !important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.qi-100::before{content:"\f101"}.qi-101::before{content:"\f102"}.qi-102::before{content:"\f103"}.qi-103::before{content:"\f104"}.qi-104::before{content:"\f105"}.qi-150::before{content:"\f106"}.qi-151::before{content:"\f107"}.qi-152::before{content:"\f108"}.qi-153::before{content:"\f109"}.qi-300::before{content:"\f10a"}.qi-301::before{content:"\f10b"}.qi-302::before{content:"\f10c"}.qi-303::before{content:"\f10d"}.qi-304::before{content:"\f10e"}.qi-305::before{content:"\f10f"}.qi-306::before{content:"\f110"}.qi-307::before{content:"\f111"}.qi-308::before{content:"\f112"}.qi-309::before{content:"\f113"}.qi-310::before{content:"\f114"}.qi-311::before{content:"\f115"}.qi-312::before{content:"\f116"}.qi-313::before{content:"\f117"}.qi-314::before{content:"\f118"}.qi-315::before{content:"\f119"}.qi-316::before{content:"\f11a"}.qi-317::before{content:"\f11b"}.qi-318::before{content:"\f11c"}.qi-350::before{content:"\f11d"}.qi-351::before{content:"\f11e"}.qi-399::before{content:"\f11f"}.qi-400::before{content:"\f120"}.qi-401::before{content:"\f121"}.qi-402::before{content:"\f122"}.qi-403::before{content:"\f123"}.qi-404::before{content:"\f124"}.qi-405::before{content:"\f125"}.qi-406::before{content:"\f126"}.qi-407::before{content:"\f127"}.qi-408::before{content:"\f128"}.qi-409::before{content:"\f129"}.qi-410::before{content:"\f12a"}.qi-456::before{content:"\f12b"}.qi-457::before{content:"\f12c"}.qi-499::before{content:"\f12d"}.qi-500::before{content:"\f12e"}.qi-501::before{content:"\f12f"}.qi-502::before{content:"\f130"}.qi-503::before{content:"\f131"}.qi-504::before{content:"\f132"}.qi-507::before{content:"\f133"}.qi-508::before{content:"\f134"}.qi-509::before{content:"\f135"}.qi-510::before{content:"\f136"}.qi-511::before{content:"\f137"}.qi-512::before{content:"\f138"}.qi-513::before{content:"\f139"}.qi-514::before{content:"\f13a"}.qi-515::before{content:"\f13b"}.qi-800::before{content:"\f13c"}.qi-801::before{content:"\f13d"}.qi-802::before{content:"\f13e"}.qi-803::before{content:"\f13f"}.qi-804::before{content:"\f140"}.qi-805::before{content:"\f141"}.qi-806::before{content:"\f142"}.qi-807::before{content:"\f143"}.qi-900::before{content:"\f144"}.qi-901::before{content:"\f145"}.qi-999::before{content:"\f146"}.qi-1001::before{content:"\f147"}.qi-1002::before{content:"\f148"}.qi-1003::before{content:"\f149"}.qi-1004::before{content:"\f14a"}.qi-1005::before{content:"\f14b"}.qi-1006::before{content:"\f14c"}.qi-1007::before{content:"\f14d"}.qi-1008::before{content:"\f14e"}.qi-1009::before{content:"\f14f"}.qi-1010::before{content:"\f150"}.qi-1011::before{content:"\f151"}.qi-1012::before{content:"\f152"}.qi-1013::before{content:"\f153"}.qi-1014::before{content:"\f154"}.qi-1015::before{content:"\f155"}.qi-1016::before{content:"\f156"}.qi-1017::before{content:"\f157"}.qi-1018::before{content:"\f158"}.qi-1019::before{content:"\f159"}.qi-1020::before{content:"\f15a"}.qi-1021::before{content:"\f15b"}.qi-1022::before{content:"\f15c"}.qi-1023::before{content:"\f15d"}.qi-1024::before{content:"\f15e"}.qi-1025::before{content:"\f15f"}.qi-1026::before{content:"\f160"}.qi-1027::before{content:"\f161"}.qi-1028::before{content:"\f162"}.qi-1029::before{content:"\f163"}.qi-1030::before{content:"\f164"}.qi-1031::before{content:"\f165"}.qi-1032::before{content:"\f166"}.qi-1033::before{content:"\f167"}.qi-1034::before{content:"\f168"}.qi-1035::before{content:"\f169"}.qi-1036::before{content:"\f16a"}.qi-1037::before{content:"\f16b"}.qi-1038::before{content:"\f16c"}.qi-1039::before{content:"\f16d"}.qi-1040::before{content:"\f16e"}.qi-1041::before{content:"\f16f"}.qi-1042::before{content:"\f170"}.qi-1043::before{content:"\f171"}.qi-1044::before{content:"\f172"}.qi-1045::before{content:"\f173"}.qi-1046::before{content:"\f174"}.qi-1047::before{content:"\f175"}.qi-1048::before{content:"\f176"}.qi-1049::before{content:"\f177"}.qi-1050::before{content:"\f178"}.qi-1051::before{content:"\f179"}.qi-1052::before{content:"\f17a"}.qi-1053::before{content:"\f17b"}.qi-1054::before{content:"\f17c"}.qi-1055::before{content:"\f17d"}.qi-1056::before{content:"\f17e"}.qi-1057::before{content:"\f17f"}.qi-1058::before{content:"\f180"}.qi-1059::before{content:"\f181"}.qi-1061::before{content:"\f182"}.qi-1064::before{content:"\f183"}.qi-1101::before{content:"\f184"}.qi-1302::before{content:"\f185"}.qi-1402::before{content:"\f186"}.qi-1601::before{content:"\f187"}.qi-1602::before{content:"\f188"}.qi-1603::before{content:"\f189"}.qi-1604::before{content:"\f18a"}.qi-1605::before{content:"\f18b"}.qi-1606::before{content:"\f18c"}.qi-1607::before{content:"\f18d"}.qi-2001::before{content:"\f18e"}.qi-2002::before{content:"\f18f"}.qi-2003::before{content:"\f190"}.qi-2004::before{content:"\f191"}.qi-2005::before{content:"\f192"}.qi-2006::before{content:"\f193"}.qi-2007::before{content:"\f194"}.qi-2008::before{content:"\f195"}.qi-2009::before{content:"\f196"}.qi-2010::before{content:"\f197"}.qi-2011::before{content:"\f198"}.qi-2012::before{content:"\f199"}.qi-2013::before{content:"\f19a"}.qi-2014::before{content:"\f19b"}.qi-2015::before{content:"\f19c"}.qi-2016::before{content:"\f19d"}.qi-2017::before{content:"\f19e"}.qi-2018::before{content:"\f19f"}.qi-2019::before{content:"\f1a0"}.qi-2020::before{content:"\f1a1"}.qi-2021::before{content:"\f1a2"}.qi-2022::before{content:"\f1a3"}.qi-2023::before{content:"\f1a4"}.qi-2024::before{content:"\f1a5"}.qi-2025::before{content:"\f1a6"}.qi-2026::before{content:"\f1a7"}.qi-2027::before{content:"\f1a8"}.qi-2028::before{content:"\f1a9"}.qi-9998::before{content:"\f1aa"}.qi-9999::before{content:"\f1ab"}.qi-100-fill::before{content:"\f1ac"}.qi-101-fill::before{content:"\f1ad"}.qi-102-fill::before{content:"\f1ae"}.qi-103-fill::before{content:"\f1af"}.qi-104-fill::before{content:"\f1b0"}.qi-150-fill::before{content:"\f1b1"}.qi-151-fill::before{content:"\f1b2"}.qi-152-fill::before{content:"\f1b3"}.qi-153-fill::before{content:"\f1b4"}.qi-300-fill::before{content:"\f1b5"}.qi-301-fill::before{content:"\f1b6"}.qi-302-fill::before{content:"\f1b7"}.qi-303-fill::before{content:"\f1b8"}.qi-304-fill::before{content:"\f1b9"}.qi-305-fill::before{content:"\f1ba"}.qi-306-fill::before{content:"\f1bb"}.qi-307-fill::before{content:"\f1bc"}.qi-308-fill::before{content:"\f1bd"}.qi-309-fill::before{content:"\f1be"}.qi-310-fill::before{content:"\f1bf"}.qi-311-fill::before{content:"\f1c0"}.qi-312-fill::before{content:"\f1c1"}.qi-313-fill::before{content:"\f1c2"}.qi-314-fill::before{content:"\f1c3"}.qi-315-fill::before{content:"\f1c4"}.qi-316-fill::before{content:"\f1c5"}.qi-317-fill::before{content:"\f1c6"}.qi-318-fill::before{content:"\f1c7"}.qi-350-fill::before{content:"\f1c8"}.qi-351-fill::before{content:"\f1c9"}.qi-399-fill::before{content:"\f1ca"}.qi-400-fill::before{content:"\f1cb"}.qi-401-fill::before{content:"\f1cc"}.qi-402-fill::before{content:"\f1cd"}.qi-403-fill::before{content:"\f1ce"}.qi-404-fill::before{content:"\f1cf"}.qi-405-fill::before{content:"\f1d0"}.qi-406-fill::before{content:"\f1d1"}.qi-407-fill::before{content:"\f1d2"}.qi-408-fill::before{content:"\f1d3"}.qi-409-fill::before{content:"\f1d4"}.qi-410-fill::before{content:"\f1d5"}.qi-456-fill::before{content:"\f1d6"}.qi-457-fill::before{content:"\f1d7"}.qi-499-fill::before{content:"\f1d8"}.qi-500-fill::before{content:"\f1d9"}.qi-501-fill::before{content:"\f1da"}.qi-502-fill::before{content:"\f1db"}.qi-503-fill::before{content:"\f1dc"}.qi-504-fill::before{content:"\f1dd"}.qi-507-fill::before{content:"\f1de"}.qi-508-fill::before{content:"\f1df"}.qi-509-fill::before{content:"\f1e0"}.qi-510-fill::before{content:"\f1e1"}.qi-511-fill::before{content:"\f1e2"}.qi-512-fill::before{content:"\f1e3"}.qi-513-fill::before{content:"\f1e4"}.qi-514-fill::before{content:"\f1e5"}.qi-515-fill::before{content:"\f1e6"}.qi-900-fill::before{content:"\f1e7"}.qi-901-fill::before{content:"\f1e8"}.qi-999-fill::before{content:"\f1e9"}.qi-sunny::before{content:"\f101"}.qi-cloudy::before{content:"\f102"}.qi-few-clouds::before{content:"\f103"}.qi-partly-cloudy::before{content:"\f104"}.qi-overcast::before{content:"\f105"}.qi-clear-night::before{content:"\f106"}.qi-cloudy-night::before{content:"\f107"}.qi-few-clouds-night::before{content:"\f108"}.qi-partly-cloudy-night::before{content:"\f109"}.qi-shower-rain::before{content:"\f10a"}.qi-heavy-shower-rain::before{content:"\f10b"}.qi-thundershower::before{content:"\f10c"}.qi-heavy-thunderstorm::before{content:"\f10d"}.qi-thundershower-with-hail::before{content:"\f10e"}.qi-light-rain::before{content:"\f10f"}.qi-moderate-rain::before{content:"\f110"}.qi-heavy-rain::before{content:"\f111"}.qi-extreme-rain::before{content:"\f112"}.qi-drizzle-rain::before{content:"\f113"}.qi-storm::before{content:"\f114"}.qi-heavy-storm::before{content:"\f115"}.qi-severe-storm::before{content:"\f116"}.qi-freezing-rain::before{content:"\f117"}.qi-light-to-moderate-rain::before{content:"\f118"}.qi-moderate-to-heavy-rain::before{content:"\f119"}.qi-heavy-rain-to-storm::before{content:"\f11a"}.qi-storm-to-heavy-storm::before{content:"\f11b"}.qi-heavy-to-severe-storm::before{content:"\f11c"}.qi-shower-rain-night::before{content:"\f11d"}.qi-heavy-shower-rain-night::before{content:"\f11e"}.qi-rain::before{content:"\f11f"}.qi-light-snow::before{content:"\f120"}.qi-moderate-snow::before{content:"\f121"}.qi-heavy-snow::before{content:"\f122"}.qi-snowstorm::before{content:"\f123"}.qi-sleet::before{content:"\f124"}.qi-rain-and-snow::before{content:"\f125"}.qi-shower-snow::before{content:"\f126"}.qi-snow-flurry::before{content:"\f127"}.qi-light-to-moderate-snow::before{content:"\f128"}.qi-moderate-to-heavy-snow::before{content:"\f129"}.qi-heavy-snow-to-snowstorm::before{content:"\f12a"}.qi-shower-snow-night::before{content:"\f12b"}.qi-snow-flurry-night::before{content:"\f12c"}.qi-snow::before{content:"\f12d"}.qi-mist::before{content:"\f12e"}.qi-foggy::before{content:"\f12f"}.qi-haze::before{content:"\f130"}.qi-sand::before{content:"\f131"}.qi-dust::before{content:"\f132"}.qi-duststorm::before{content:"\f133"}.qi-sandstorm::before{content:"\f134"}.qi-dense-fog::before{content:"\f135"}.qi-strong-fog::before{content:"\f136"}.qi-moderate-haze::before{content:"\f137"}.qi-heavy-haze::before{content:"\f138"}.qi-severe-haze::before{content:"\f139"}.qi-heavy-fog::before{content:"\f13a"}.qi-extra-heavy-fog::before{content:"\f13b"}.qi-new-moon::before{content:"\f13c"}.qi-waxing-crescent::before{content:"\f13d"}.qi-first-quarter::before{content:"\f13e"}.qi-waxing-gibbous::before{content:"\f13f"}.qi-full-moon::before{content:"\f140"}.qi-waning-gibbous::before{content:"\f141"}.qi-last-quarter::before{content:"\f142"}.qi-waning-crescent::before{content:"\f143"}.qi-hot::before{content:"\f144"}.qi-cold::before{content:"\f145"}.qi-unknown::before{content:"\f146"}.qi-typhoon::before{content:"\f147"}.qi-tornado::before{content:"\f148"}.qi-rainstorm::before{content:"\f149"}.qi-snow-storm::before{content:"\f14a"}.qi-cold-wave::before{content:"\f14b"}.qi-gale::before{content:"\f14c"}.qi-sandstorm-warning::before{content:"\f14d"}.qi-low-temperature-freeze::before{content:"\f14e"}.qi-high-temperature::before{content:"\f14f"}.qi-heat-wave::before{content:"\f150"}.qi-dry-hot-air::before{content:"\f151"}.qi-downburst::before{content:"\f152"}.qi-avalanche::before{content:"\f153"}.qi-lightning::before{content:"\f154"}.qi-hail::before{content:"\f155"}.qi-frost::before{content:"\f156"}.qi-heavy-fog-warning::before{content:"\f157"}.qi-low-level-wind-shearl::before{content:"\f158"}.qi-haze-warning::before{content:"\f159"}.qi-thunder-gust::before{content:"\f15a"}.qi-road-icing::before{content:"\f15b"}.qi-drought::before{content:"\f15c"}.qi-gale-at-sea::before{content:"\f15d"}.qi-heat-stroke::before{content:"\f15e"}.qi-wildfire::before{content:"\f15f"}.qi-grassland-fire::before{content:"\f160"}.qi-freeze::before{content:"\f161"}.qi-space-weather::before{content:"\f162"}.qi-heavy-air-pollution::before{content:"\f163"}.qi-low-temperature-rain-and-snow::before{content:"\f164"}.qi-strong-convection::before{content:"\f165"}.qi-ozone::before{content:"\f166"}.qi-heavy-snow-warning::before{content:"\f167"}.qi-cold-warning::before{content:"\f168"}.qi-continuous-rain::before{content:"\f169"}.qi-waterlogging::before{content:"\f16a"}.qi-geological-hazard::before{content:"\f16b"}.qi-heavy-rainfall::before{content:"\f16c"}.qi-severely-falling-temperature::before{content:"\f16d"}.qi-snow-disaster::before{content:"\f16e"}.qi-wildfire-grassland::before{content:"\f16f"}.qi-medical-meteorology::before{content:"\f170"}.qi-thunderstorm::before{content:"\f171"}.qi-school-closure::before{content:"\f172"}.qi-factory-closure::before{content:"\f173"}.qi-maritime-risk::before{content:"\f174"}.qi-spring-dust::before{content:"\f175"}.qi-falling-temperature::before{content:"\f176"}.qi-typhoon-and-rainstorm::before{content:"\f177"}.qi-severe-cold::before{content:"\f178"}.qi-sand-dust::before{content:"\f179"}.qi-sea-thunderstorms::before{content:"\f17a"}.qi-sea-fog::before{content:"\f17b"}.qi-sea-thunder::before{content:"\f17c"}.qi-sea-typhoon::before{content:"\f17d"}.qi-low-temperature::before{content:"\f17e"}.qi-road-ice-and-snow::before{content:"\f17f"}.qi-thunderstorm-and-gale::before{content:"\f180"}.qi-continuous-low-temperature::before{content:"\f181"}.qi-strong-dust::before{content:"\f182"}.qi-short-lived-heavy-shower-rain::before{content:"\f183"}.qi-flood::before{content:"\f184"}.qi-mudflow::before{content:"\f185"}.qi-storm-surge::before{content:"\f186"}.qi-very-hot-weather::before{content:"\f187"}.qi-strong-monsoon-signal::before{content:"\f188"}.qi-landslip::before{content:"\f189"}.qi-tropical-cyclone::before{content:"\f18a"}.qi-fire-danger::before{content:"\f18b"}.qi-flooding-in-the-northern-new-territories::before{content:"\f18c"}.qi-cold-weather::before{content:"\f18d"}.qi-wind::before{content:"\f18e"}.qi-snow-ice::before{content:"\f18f"}.qi-fog::before{content:"\f190"}.qi-coastal-event::before{content:"\f191"}.qi-forest-fire::before{content:"\f192"}.qi-rain-warning::before{content:"\f193"}.qi-rain-flood::before{content:"\f194"}.qi-freezing-rain-icing::before{content:"\f195"}.qi-ground-frost::before{content:"\f196"}.qi-dust-raising-winds::before{content:"\f197"}.qi-strong-surface-winds::before{content:"\f198"}.qi-hot-day::before{content:"\f199"}.qi-warm-night::before{content:"\f19a"}.qi-cold-day::before{content:"\f19b"}.qi-thunderstorm-and-lightning::before{content:"\f19c"}.qi-hailstorm::before{content:"\f19d"}.qi-sea-area-warning::before{content:"\f19e"}.qi-fishermen-warning::before{content:"\f19f"}.qi-low-humidity::before{content:"\f1a0"}.qi-accumulated-rain::before{content:"\f1a1"}.qi-hazardous-surf-warning::before{content:"\f1a2"}.qi-marine-wind-warning::before{content:"\f1a3"}.qi-road-weather-alert::before{content:"\f1a4"}.qi-thunder-rain::before{content:"\f1a5"}.qi-thunder-rain-and-fog::before{content:"\f1a6"}.qi-damaging-winds::before{content:"\f1a7"}.qi-veld-fire-conditions::before{content:"\f1a8"}.qi-weather-advisory::before{content:"\f1a9"}.qi-severe-weather-warning::before{content:"\f1aa"}.qi-warning-default::before{content:"\f1ab"}.qi-sunny-fill::before{content:"\f1ac"}.qi-cloudy-fill::before{content:"\f1ad"}.qi-few-clouds-fill::before{content:"\f1ae"}.qi-partly-cloudy-fill::before{content:"\f1af"}.qi-overcast-fill::before{content:"\f1b0"}.qi-clear-night-fill::before{content:"\f1b1"}.qi-cloudy-night-fill::before{content:"\f1b2"}.qi-few-clouds-night-fill::before{content:"\f1b3"}.qi-partly-cloudy-night-fill::before{content:"\f1b4"}.qi-shower-rain-fill::before{content:"\f1b5"}.qi-heavy-shower-rain-fill::before{content:"\f1b6"}.qi-thundershower-fill::before{content:"\f1b7"}.qi-heavy-thunderstorm-fill::before{content:"\f1b8"}.qi-thundershower-with-hail-fill::before{content:"\f1b9"}.qi-light-rain-fill::before{content:"\f1ba"}.qi-moderate-rain-fill::before{content:"\f1bb"}.qi-heavy-rain-fill::before{content:"\f1bc"}.qi-extreme-rain-fill::before{content:"\f1bd"}.qi-drizzle-rain-fill::before{content:"\f1be"}.qi-storm-fill::before{content:"\f1bf"}.qi-heavy-storm-fill::before{content:"\f1c0"}.qi-severe-storm-fill::before{content:"\f1c1"}.qi-freezing-rain-fill::before{content:"\f1c2"}.qi-light-to-moderate-rain-fill::before{content:"\f1c3"}.qi-moderate-to-heavy-rain-fill::before{content:"\f1c4"}.qi-heavy-rain-to-storm-fill::before{content:"\f1c5"}.qi-storm-to-heavy-storm-fill::before{content:"\f1c6"}.qi-heavy-to-severe-storm-fill::before{content:"\f1c7"}.qi-shower-rain-night-fill::before{content:"\f1c8"}.qi-heavy-shower-rain-night-fill::before{content:"\f1c9"}.qi-rain-fill::before{content:"\f1ca"}.qi-light-snow-fill::before{content:"\f1cb"}.qi-moderate-snow-fill::before{content:"\f1cc"}.qi-heavy-snow-fill::before{content:"\f1cd"}.qi-snowstorm-fill::before{content:"\f1ce"}.qi-sleet-fill::before{content:"\f1cf"}.qi-rain-and-snow-fill::before{content:"\f1d0"}.qi-shower-snow-fill::before{content:"\f1d1"}.qi-snow-flurry-fill::before{content:"\f1d2"}.qi-light-to-moderate-snow-fill::before{content:"\f1d3"}.qi-moderate-to-heavy-snow-fill::before{content:"\f1d4"}.qi-heavy-snow-to-snowstorm-fill::before{content:"\f1d5"}.qi-shower-snow-night-fill::before{content:"\f1d6"}.qi-snow-flurry-night-fill::before{content:"\f1d7"}.qi-snow-fill::before{content:"\f1d8"}.qi-mist-fill::before{content:"\f1d9"}.qi-foggy-fill::before{content:"\f1da"}.qi-haze-fill::before{content:"\f1db"}.qi-sand-fill::before{content:"\f1dc"}.qi-dust-fill::before{content:"\f1dd"}.qi-duststorm-fill::before{content:"\f1de"}.qi-sandstorm-fill::before{content:"\f1df"}.qi-dense-fog-fill::before{content:"\f1e0"}.qi-strong-fog-fill::before{content:"\f1e1"}.qi-moderate-haze-fill::before{content:"\f1e2"}.qi-heavy-haze-fill::before{content:"\f1e3"}.qi-severe-haze-fill::before{content:"\f1e4"}.qi-heavy-fog-fill::before{content:"\f1e5"}.qi-extra-heavy-fog-fill::before{content:"\f1e6"}.qi-hot-fill::before{content:"\f1e7"}.qi-cold-fill::before{content:"\f1e8"}.qi-unknown-fill::before{content:"\f1e9"}

在source\js文件夹下新建clock.min.js文件并添加如下代码

1
function clockUpdateTime(e,c){let a="#000";switch(e.now.icon){case"100":a="#fdcc45";break;case"101":a="#fe6976";break;case"102":case"103":a="#fe7f5b";break;case"104":case"150":case"151":case"152":case"153":case"154":case"800":case"801":case"802":case"803":case"804":case"805":case"806":case"807":a="#2152d1";break;case"300":case"301":case"305":case"306":case"307":case"308":case"309":case"310":case"311":case"312":case"313":case"314":case"315":case"316":case"317":case"318":case"350":case"351":case"399":a="#49b1f5";break;case"302":case"303":case"304":a="#fdcc46";break;case"400":case"401":case"402":case"403":case"404":case"405":case"406":case"407":case"408":case"409":case"410":case"456":case"457":case"499":a="#a3c2dc";break;case"500":case"501":case"502":case"503":case"504":case"507":case"508":case"509":case"510":case"511":case"512":case"513":case"514":case"515":a="#97acba";break;case"900":case"999":a="red";break;case"901":a="#179fff;"}var t=document.getElementById("hexo_electric_clock");clock_box_html=`\n  <div class="clock-row">\n    <span id="card-clock-clockdate" class="card-clock-clockdate"></span>\n    <span class="card-clock-weather"><i class="qi-${e.now.icon}-fill" style="color: ${a}"></i> ${e.now.text} <span>${e.now.temp}</span> ℃</span>\n    <span class="card-clock-humidity">💧 ${e.now.humidity}%</span>\n  </div>\n  <div class="clock-row">\n    <span id="card-clock-time" class="card-clock-time"></span>\n  </div>\n  <div class="clock-row">\n    <span class="card-clock-windDir"> <i class="qi-gale"></i> ${e.now.windDir}</span>\n    <span class="card-clock-location">${c}</span>\n    <span id="card-clock-dackorlight" class="card-clock-dackorlight"></span>\n  </div>\n  `;var s=["SUN","MON","TUE","WED","THU","FRI","SAT"],n=document.getElementById("card-clock-loading");function r(){var e,c=new Date,a=o(c.getHours(),2)+":"+o(c.getMinutes(),2)+":"+o(c.getSeconds(),2),t=o(c.getFullYear(),4)+"-"+o(c.getMonth()+1,2)+"-"+o(c.getDate(),2)+" "+s[c.getDay()],n=c.getHours();if(n>12?(n-=12,e=" P M"):e=" A M",document.getElementById("card-clock-time")){var r=document.getElementById("card-clock-time"),l=document.getElementById("card-clock-clockdate"),i=document.getElementById("card-clock-dackorlight");r.innerHTML=a,l.innerHTML=t,i.innerHTML=e}}function o(e,c){for(var a="",t=0;t<c;t++)a+="0";return(a+e).slice(-c)}n&&(n.innerHTML=""),t.innerHTML=clock_box_html;setInterval(r,1e3);r()}function getIpInfo(){let e={city:"长沙市",qweather_url:""};"true"===clock_default_rectangle_enable&&e?fetch(`https://restapi.amap.com/v3/geocode/regeo?key=${gaud_map_key}&location=${clock_rectangle}`).then((e=>e.json())).then((e=>{if("1"===e.status){const c=e.regeocode.addressComponent;return Array.isArray(c.city)?c.province:c.city}})).then((c=>{fetch(`https://devapi.qweather.com/v7/weather/now?location=${clock_rectangle}&key=${qweather_key}`).then((e=>e.json())).then((a=>{if(document.getElementById("hexo_electric_clock")){clockUpdateTime(a,Array.isArray(c)?e.city:c)}}))})):fetch(`https://restapi.amap.com/v3/ip?key=${gaud_map_key}`).then((e=>e.json())).then((c=>{let a=Array.isArray(c.rectangle)?clock_rectangle:c.rectangle.split(";")[0];e.qweather_url=`https://devapi.qweather.com/v7/weather/now?location=${a}&key=${qweather_key}`,Array.isArray(c.rectangle)?fetch(`https://restapi.amap.com/v3/geocode/regeo?key=${gaud_map_key}&location=${clock_rectangle}`).then((e=>e.json())).then((a=>{if("1"===a.status){const c=a.regeocode.addressComponent;e.city=Array.isArray(c.city)?c.province:c.city}return c})).then((c=>{fetch(e.qweather_url).then((e=>e.json())).then((a=>{if(document.getElementById("hexo_electric_clock")){clockUpdateTime(a,Array.isArray(c.city)?e.city:c.city)}}))})):fetch(e.qweather_url).then((e=>e.json())).then((a=>{if(document.getElementById("hexo_electric_clock")){clockUpdateTime(a,Array.isArray(c.city)?e.city:c.city)}}))}))}getIpInfo();

需要将以下两个字体文件下载并保存到source\fonts文件夹下；

  1. qweather-icons.woff2
  2. UniDreamLED-Regular.woff2

可以直接用原教程的方式更加简单，因为上面用到的LED字体的数字1️⃣是本人修改过的，占用的字宽和其他数字一样，更加真实。

参数释义

参数 备选值/类型
释义
priority number 【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enable true/false 【必选】控制开关
enable_page path/all 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all
exclude path 【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type id/class 【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.name text 【必选】挂载容器名称
layout.index 0 和正整数 【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
loading URL 【可选】电子钟加载动画的图片
clock_css URL 【可选】电子钟样式 CDN 资源
clock_js URL 【可选】电子钟执行脚本 CDN 资源
ip_api URL 【可选】获取时钟 IP 的 API
qweather_key text 【可选】和风天气 key
gaud_map_key text 【可选】高得地图 web 服务 key
default_rectangle text 【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气
rectangle text 【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置

服务key申请

qweather_key申请地址: https://id.qweather.com/#/login

登录后进入控制台

创建应用

填写应用名称和key名称随意

选择WebApi

复制key

gaud_map_key 申请地址: https://lbs.amap.com/

登录后进入控制台

创建应用，名称随意，类型选其他

点击添加, key名称随意，服务平台选择Web服务,点击提交

复制key

参考链接

07-侧边栏归档、分类修改 05-分类磁贴插件版