Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Hexo在顶部增加天气小部件

Hexo在顶部增加天气小部件

作者头像
花猪
发布于 2022-02-16 07:36:26
发布于 2022-02-16 07:36:26
54300
代码可运行
举报
运行总次数:0
代码可运行

前言

本文将介绍如何在顶部增加天气小部件,效果在顶部即可看到。

教程链接:https://surpsec.cn/3178170368.html

操作

去中国天气官网:https://cj.weather.com.cn/ 先注册一个账号,然后点击自定义插件

根据自己的需求创建插件样式,并生成代码:

复制图中框选的代码

在\themes\butterfly\source\js目录下创建一个weather.js文件,将刚刚复制的代码写入该文件:

(注意:key处要替换为你自己的key值)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
WIDGET = {
  CONFIG: {
    "modules": "01234",
    "background": 1,
    "tmpColor": "FFFFFF",
    "tmpSize": 16,
    "cityColor": "FFFFFF",
    "citySize": 16,
    "aqiSize": 16,
    "weatherIconSize": 24,
    "alertIconSize": 18,
    "padding": "10px 10px 10px 10px",
    "shadow": "1",
    "language": "auto",
    "borderRadius": 5,
    "fixed": "false",
    "vertical": "middle",
    "horizontal": "center",
    "key": "替换为你自己的key"
  }

找到主题配置文件_config.butterfly.yml,在inject的bottom处引入两个js文件,一个是刚刚创建的weather.js,另一个是如下文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
- <script src="https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0"></script>

在\themes\butterfly\layout\includes\header路径下找到nav.pug文件,添加如下代码(注意缩进);

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
span#weather-v2-plugin-simple

重新部署,启动,就可以看到效果啦。

结尾

慢慢地开始接触并修改源文件了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-02-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Butterfly 主题添加天气小部件
  如果你想要做一件事情,首先,你应该去了解这件事情,了解这件事情别人有没有做过。第二,这件事情你可不可以做的比别人更好。
小孙同学
2022/01/17
9610
Butterfly 主题添加天气小部件
在Handsome主题中添加和风天气插件
2.复制生成后,打开Handsome主题目录下打开 component文件夹,编辑里面的 headnav.php文件,在大约在122行后(handsome版本6、7通用)加入复制的代码
kenvie
2022/01/20
4680
hexo-butterfly-首页改造
​ 基于Vercel自建API构建引用的是:python-github-calendar-api
hahah
2022/06/15
1.4K0
魔改笔记三:网站插件添加及显示效果美化
前些天,LongHe站长评论了我说,猫猫挡住我的备案号了,我看了一下我的电脑上其实显示正常,就回了一句正在搞(其实是之前研究过但是懒得搞搁置了QAQ),但是这两天搜索了一下,故意遮挡备案号会被吊销备案号,并且罚款,有点害怕赶紧添加了一个,但是感觉一个这个功能有点水,所以又分享了今天才加上的毛玻璃背景特效和右上角和风天气插件。
柳神
2024/05/30
1190
魔改笔记三:网站插件添加及显示效果美化
博客顶栏菜单重写
顶栏算是目前首页唯二还能看出来是Butterfly的版块了,另一个是侧栏按钮。因为之前的SAO-controller没有达到预期。
Akilar
2022/04/17
8440
个人小站折腾后记
🧑个人简介:大家好,我是 shark-Gao,一个想要与大家共同进步的男人😉😉
程序员Leo
2023/08/08
1.2K0
个人小站折腾后记
Hexo-Butterfly主题魔改
本文章首发于语雀! 通过各种高科技功能同步到Hajeekn 的博客 由于每个人的博客目录都不相同,这里博客目录使用%brt%代替 本文章除 Pace wowjs 普通引入法以外,其他魔改都不适合 Butterfly3.6.0 及以上
FloatSheep
2022/04/25
2.6K0
Hexo-Butterfly主题魔改
Hexo增添公告栏计时器小部件
找到主题配置文件_config.butterfly.yml,在inject的bottom处引入该js文件:
花猪
2022/02/16
1.2K0
Hexo增添公告栏计时器小部件
请收下这只可爱的猫咪吧
制作一个盛放内容的盒子,在BlogRoot/themes/butterfly/layout/includes/head.pug最后一行加入如下代码:
唐志远
2023/08/01
2220
请收下这只可爱的猫咪吧
Hexo用wowjs给博客添加动画效果
本篇仅使用butterfly_v3.6.0 +的主题版本,如果是在这之前的版本,请移步下方教程链接。
花猪
2022/02/22
1K0
Hexo用wowjs给博客添加动画效果
Hexo页脚养鱼效果
页脚养鱼效果我也是折腾了蛮久的,奈何自己太菜,出现了一些问题也不知道怎么解决,查询一些博客,相关的描述也很简单。这里参考了Ln大佬的博客,总算是搞定了。
花猪
2022/02/16
1.6K1
Hexo页脚养鱼效果
Hexo添加首页置顶轮播图
在写系列博文时对于某一篇文章的寻找过程会比较繁琐(对于博主而言自然会简单些,但是对于访客来讲就没那么轻松),因此参考Akilar的博文弄了一个置顶轮播图。可以把系列博文的链接汇总起来做一个索引,放置在轮播图中。这样既可以展示博主想对外展示的内容,又方便快速进行文章跳转。
花猪
2022/02/22
1.1K0
Hexo添加首页置顶轮播图
首页置顶公告栏轮播
在\themes\butterfly\layout\includes\page目录下新建notice.pug模板:
花猪
2022/10/28
1.2K0
首页置顶公告栏轮播
hexo-butterfly添加日历插件
下载 calendar.js 和 languages.js 文件,保存到 themes/Butterfly/source/js/ 目录
匿名用户的日记
2021/12/14
2.6K0
hexo-butterfly添加日历插件
Hexo侧边栏添加微博热搜
无意中浏览到了Lucifer三思而后行的博客,看到了首页侧边栏的微博热搜板块,比较感兴趣,自己尝试做一个(样式一致)。
花猪
2022/06/27
7220
Hexo侧边栏添加微博热搜
Hexo添加当前访客信息
前言 本文将介绍如何在主页侧边栏添加当前访客信息,具体效果如下: 教程链接:Hexo博客搭建 与 美化教程 | 卓越科技的Blog (zykj.js.org) 操作 注意:必须确保使用了Hexo tag 外挂标签的span的样式(👈点击跳转),否则显示的内容没有彩色样式。 1.在 themes\Butterfly\layout\includes\widget\ 下创建 card_ip.pug 文件,并写入以下内容: .card-widget.card-ip .card-content
花猪
2022/02/22
1K0
Hexo添加当前访客信息
基于 Hexo 从零开始搭建个人博客(六)
2021-04-27 butterfly3.4.0 -> butterfly3.7.1
唐志远
2022/10/27
1.1K0
基于 Hexo 从零开始搭建个人博客(六)
友联样式美化
新建文件 博客根目录\source\_data\link.yml ,没有 _data 文件夹的话也请自己新建 打开 博客根目录\source\_data\link.yml ,输入
公爵
2022/09/28
5390
Hexo-悬挂灯笼
[{"url":"https://bu.dusays.com/2021/05/06/2b5a9214222ff.jpg","alt":""},{"url":"https://bu.dusays.com/2021/05/06/44bdb2b03f327.jpg","alt":""},{"url":"https://bu.dusays.com/2021/05/06/848c6b4dbb123.jpg","alt":""},{"url":"https://bu.dusays.com/2021/05/06/2da209dcf5e72.jpg","alt":""}]
唐志远
2023/08/01
1780
Hexo-悬挂灯笼
SAO-UI-PLAN-LINK-START
又到了店长的执念时间。ヾ(≧▽≦*)o 这次在浏览codepen上的有趣项目时看到了一个星际穿越效果的项目-Hyperspace,瞬间来了兴趣,只要稍加变形,把底图从星空换成一张彩色点阵图就可以实现刀剑神域里经典的登录画面了。
Akilar
2022/03/30
7390
SAO-UI-PLAN-LINK-START
相关推荐
Butterfly 主题添加天气小部件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验