经验分享 未读
Hexo的Butterfly魔改教程:我的装备,分享你在用的设备受到林木木的好物界面影响,制作了一个装备界面,你可以非常方便的分享你正在使用的商品和设备,算是朋友之间推荐的一种吧。也避免了大家询问“你用的是什么电脑啊”,“博主用的是什么好东西啊”这种情况。我经常写一些文章来介绍产品的使用体验,通过这个功能也能很方便的链接到文章。所以我认为这个功能可以和博客无缝配合。我认为博客的一切功能都是尽可能展示文章,而这个功能肯定能明显提升陈旧文章的访问。所以这也是为什么我跟随林木木而写这个功能的原因。
至于为什么是装备推荐而没有软件推荐,主要是因为软件推荐不太适合这种橱窗或者一句话的展示形式,而是需要更加深度的的展示和更加丰富的预览图。目前还没有这方面的计划(也许未来会有?)。
下面就写一下教程吧,步骤过程非常简单。
样式预览
预览地址:点击访问
此教程不包含顶部图片与评论功能。
创建pug页面文件创建themes/butterfly/layout/includes/page/equipment.pug
123456789101112131415161718192021#equipment if site.data.equipment each i ...
经验分享 未读
让网页支持iOS添加到主屏幕全屏应用,webapp启动图生成工具好久没有写魔改了,这次写一个提升网页体验的魔改教程吧!因为比较喜欢打开APP的感觉,但是为了博客做一个app显然是大材小用了。毕竟也不是社交媒体社区之类的。所以一个简单的类似应用内一样的app是最好的。看到了爱发电的iOS版本用的就是添加网页到桌面的方式,但是没开启pwa,所以我就尝试一下复刻。
这里展示的是Hexo的Butterfly主题的修改方法。其他网页的修改方法大同小异,无非是head标签里面添加一些meta和link代码。
至于为什么不用原生的PWA,主要还是bug太多了,要做的兼容性适配太多了。
废话不多说,我们开始吧!
修改head文件themes/butterfly/layout/includes/head.pug
1234567891011121314151617181920212223242526272829303132333435//- pwameta(name='apple-mobile-web-app-capable', content='yes')meta(name=' ...
我的项目 未读
如何让博客支持AI摘要,使用TianliGPT自动生成文章的AI摘要最近研究AI在博客和文章领域的应用,发现AI摘要是一个很不错的方向,研究了很久给搞出来了。在这篇文章中,我将帮助大家如何让你的博客接入TianliGPT。
访问项目Github仓库
随机访问已经支持TianliGPT的网站
效果预览
什么是TianliGPTTianliGPT是一个专业的文字摘要生成工具,你可以将需要提取摘要的文本内容发送给TianliGPT,稍等一会他就可以给你发送一个基于这段文本内容的摘要。
实时生成的摘要
自动生成,无需人工干预
一次生成,再次生成无需消耗key
包含文字审核过滤,适用于中国大陆
支持中国大陆访问
如何部署TianliGPT我们可以通过在网页中嵌入TianliGPT的服务支持,让TianliGPT能够获取到你需要提交的内容。
在博客靠后的位置位置引入js和css(需要在文章之后)
123456<link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.11/tianli_gpt.css">& ...
经验分享 未读
通过alias自定义终端命令实现Hexo博客的高效使用,简化你的终端命令使用Hexo的小伙伴都比较擅长Hexo的三连了,分别是
Hexo clean
Hexo g
Hexo d
我之前一直使用utools来完成这三步动作。但是因为utools数据莫名其妙丢失,并且官方因为为了收费而不提供配置备份,导致所有脚本都失踪了。万般无奈之下使用了Hapigo作为我的Mac启动工具。
Hapigo支持终端运行,但是对终端支持有限,只支持输入命令而已,甚至历史记录功能还失效了。
研究了半天发现alias相当于给你的命令起一个名字,让你使用自定义命令来执行很长的命令。
以下是基于Mac的设置方法,windows可以自行上网搜索。
设置alias在Mac的用户文件夹下创建.bashrc文件
我的这个文件目录为/Users/zhheo/.bashrc
文件内容填写格式为
1alias <名称>=<要执行的命令>
例如我本地运行Hexo的命令就填写
1alias bk="cd /Users/zhheo/Desktop/我的项目/blog/zhheo && ...
我的项目 未读
友链朋友圈5 - 我的部署历程与主题样式分享友链朋友圈已经是一个历史悠久的项目了,这次yyyz开发了全新版本为这个老项目焕发生机。
部署项目我个人用的方案是:Docker+Sqlite
使用这个方案你需要一个服务器。没有服务器的小伙伴请看更多部署方式。
预览我的部署效果
后端部署后端部署非常容易。你需要有python3.8即以上和机器安装docker,之后的部分按照文档中来就可以。
首先进入宝塔新建一个网站,然后在进ssh,cd进网站目录中,例如我的文件地址是/www/wwwroot/moments.zhheo.com我就在ssh中输入:
1cd /www/wwwroot/moments.zhheo.com
然后下载仓库:
1git clone https://github.com/Rock-Candy-Tea/hexo-circle-of-friends
如果你的服务器无法直连GitHub,那就需要手动去GitHub下载文件,然后将压缩包放在网站目录中,点击解压。
然后进入解压后的文件夹
1cd /www/wwwroot/ ...
经验分享 未读
腾讯云COS配置教程:我是如何将COS加入到Hexo博客写作和工作流程中的最开始打造低成本博客的时候,使用的是GitHub转七牛云图床上的。当时流量小,加上七牛云有无限期10G免费额度,所以就用着了。后来因为转HTTPS,再因为自己域名服务器都在腾讯云,所以也将七牛云转到腾讯云上了。还有一个原因就是腾讯COS比七牛云便宜。
转移图床得益于转移过程非常的简单,也加速了我用腾讯云COS的过程。
过程非常简单,也不需要什么基础,也很快就转移完了。修改好域名配置好设置,整个数据迁移过程就结束了。
接下来说说我是如何将cos加入到我的博客写作流程的。
数据万象配置因为需要将图片添加水印,之前是使用七牛云进行添加的。在腾讯云上这个是使用数据万象服务进行添加。
配置方法也比较简单,设置好图片参数再设置图片样式即可。
比如我的图片链接格式。
红色部分是分隔符,用于区分链接和图片样式参数;蓝色部分是具体图片要更改成什么样子。
我设置了几种常见的图片参数
一种用于图片封面展示:图片质量要求高,图片尺寸不会很大。无水印。
一种用于文章内部图片展示:图片质量要求低,图片尺寸要于文章页面显示尺寸接近。有水印。
一种用于文章点开大图的样式展示:图片质量要求中等偏高,图片尺寸较大。 ...
我的项目 未读
Twikoo评论回复邮件模板:Acrylic Mail 粉今天定制了一下邮件的回复样式,之前Twikoo默认的比较简洁,我做了一个和我博客比较相近的样式。定制了一下。
有需要的小伙伴可以自取。
邮件样式
其实也是比较偏简洁的那种吧。
兼容移动端和电脑端。
移动端样式:
电脑端样式:
代码1<div class="page flex-col"><div class="box_3 flex-col" style=" display: flex; position: relative; width: 100%; height: 206px; background: #ef859d2e; top: 0; left: 0; justify-content: center;"><div class="section_1 flex-col" style=" background-image: url("这里更改为你的网站图标"); position: absolute; wid ...
经验分享 未读
让你的网站适配Safari书签页和iOS桌面图标教程我发现很多人的网站并没有对Safari进行一个适配,导致使用iOS的小伙伴在收藏这些网站或者将这些网站添加到桌面时会有一个比较奇怪的展示样式。
样式对比左侧为不兼容safari的书签栏,右侧为兼容
左侧为不兼容iOS添加到桌面,显示较长的名称和网页截图作为图标。
右侧为兼容iOS添加到桌面,显示自定义的名称和图标。
添加方法添加方法非常简单,Safari提供了自定义的方案。下面这个链接是官方文档。
引用站外地址,不保证站点的可用性和安全性
Configuring Web Applications
Apple
只需要在head标签中插入相关代码即可。
如果你使用的是Hexo的Butterfly主题,可以直接在配置文件的inject的head中添加相关代码。
1234- <link rel="apple-touch-icon" href="/apple-touc ...
我的项目 未读
Hexo的Butterfly魔改教程:即刻短文静态部署版腾讯云已经跑路了,挂在腾讯云函数的twikoo已经私有部署了,还剩下一个即刻短文还跑在腾讯云开发的服务上。
找了黑石原来的leancloud方案,主要黑石的公众号是订阅号不是服务号,发起来很麻烦,没有开源无法私有部署。
难道真的要像木木学习魔改Twikoo?
在改友链的时候突然想到为什么不能用与butterfly相同的yml生成方式呢?
这个文章就简单发一下生成逻辑和代码。
本教程仅作为开源使用,需要有一定魔改基础。具体参考哔哔
即刻短文静态部署版测试中,本文可能会不定时更新。
什么是即刻短文相比发博客文章需要考虑选题、编写详细的内容,即刻短文可以提供一个快捷的短文字解决方案,避免博客短文章过多造成的整站文章质量下降。
与黑石哔哔有何不同?有一个表格介绍一下
不同之处
黑石哔哔
即刻短文(静态部署版)
即刻短文(旧版)
部署服务
leancloud动态部署
静态部署
腾讯云动态部署
费用
免费
免费
首月免费
服务位置
✅leancloud
✅本地
腾讯云
发表方式
指定公众号绑定后发布
修改本地yml文件发布
✅get请求
加载速度
js请求leanclo ...
经验分享 未读
Twikoo腾讯云函数部署转移到私有部署
补充:似乎腾讯云没销毁我的环境?再观察一下。。。可能误会腾讯云了,下面是原文。
对于腾讯云毫无契约精神的行为表示强烈的抗议和严厉的谴责。
大概是去年领取到了腾讯云开发的五年期限免费使用权,可是腾讯云直接就毁约,以「计费方式调整」为由,强制要求现有用户退款结束服务。当然我相信是因为「所有解释权归腾讯所有」,腾讯云才可以肆无忌惮的毁约和取消订单。
作为一个个人的小用户,腾讯云直接以劝退的方式来行动。维权成本那么高,相信腾讯云也觉得没多少人愿意去为了这东西维权吧。
没有办法,作为用户还能怎么样呢,毕竟白嫖了两年,还不知足?
没有能力履约就没必要一开始就承诺。这个是我的观点。
那么没办法只能来转一下Twikoo了,Twikoo开了私有部署。我们可以配合导入功能来做一下。
注意目前没有办法导入访问量信息,只能导入评论信息。
私有部署需要一个服务器
如果你的图片上传服务器是腾讯云,那么需要手动修改数据库更改图片
导出评论进入腾讯云云开发,进入环境之后选择数据库
进入comment数据库
点击导出
之后生成一个本地的json文件。
如果你的图片上传服务器是腾讯云,那么需要手动修改数据 ...
经验分享 未读
Hexo的Butterfly魔改教程:随机网页跳转(无缝版)提到随机网页跳转,大家就想到hexo-generator-random,我之前也是使用这个插件来做随机网页,这个插件的原理是生成一个html,只要访问这个html就可以进入随机的文章,但是这种方法有问题。
开启pjax的小伙伴由于random.html不支持pjax,导致中间页会重新加载两次
进入随机页面之后无法使用后退回到上个页面。
看了@JAYHRN的教程Hexo 博客实现页面随机跳转之后,他是使用Hexo函数直接生成,那么为什么不能用这种方法生成js直接通过函数跳转呢?
说干就干。
创建文件创建themes/butterfly/scripts/helpers/random.js文件
1234567891011hexo.extend.generator.register('random', function (locals) { const config = hexo.config.random || {} const posts = [] for (const post of locals.posts.dat ...
经验分享 未读
Hexo的Butterfly魔改教程:网址卡片外置标签博客有很多引用链接的方式,但是一直使用超链接的样式不是很优雅,而且无法引起注意。所以还是用外置标签准备写一个超链接网址卡片。
外置标签的编写方式从Akilar中学得:
引用站外地址,不保证站点的可用性和安全性
DIY外置标签的简单写法与应用
Akilar
你也可以看到这个全新的网址卡片样式就像上面这样。
效果预览
引用站外地址,不保证站点的可用性和安全性
获取网站的Favicon图标并显示在你的网页上
owen0o0
1{% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %}
添加外置标签新建文件themes/butterfly/scripts/ ...
经验分享 未读
pjax无法生效解决办法,butterfly主题维护你的pjax之前自己的网页pjax时灵时不灵,真的是奇了怪了。研究了一下pjax的文档,发现很多东西都是用的有问题,因为最开始魔改页面的时候都没注意过pjax,所以留下了大量屎山代码。
这个文章可以更好的帮助你去魔改页面,并且保留pjax。
页面跳转pjax的element是用来告诉pjax,点击这个东西就要触发pjax啦!使用butterfly的小伙伴可以发现,pjax.pug文件中是对所有a标签进行了注册。但是有的时候我们是使用onclick进行页面跳转的,而这个元素并不是a标签。
1#bber-talk.swiper-wrapper(onclick=`window.open('/essay/','_self')`)
这种方式打开的链接不符合注册条件,所以点击之后不可能是pjax的跳转。
我们可以使用pjax文档的pjax.loadUrl("/your-url")来进行跳转
1#bber-talk.swiper-wrapper(onclick=`pjax.loadUrl(&qu ...
经验分享 未读
我应该怎么设计我的博客?如何搭建一个体验好的博客?我似乎从来都没有说过这方面的理论,只说过一些局部功能的设计原因和魔改。在网上大多也都是组件的魔改。这篇文章我想写一个纯理论的文章,以我现在的博客为例子,引申出博客的设计思考。
相信通过这篇文章,能够给想要修改自己博客的小伙伴一些方向性的建议,而不是盲目使用网上的组件,看见一个好就直接扒下来。
这篇文章也只是阐述我的理解,可能有个人的主观偏好。
做博客是为了什么?这个是每个人一开始搭建博客的原因,而且会随着时间慢慢去改变。说起我最初想要将自己遇到的问题都写在博客里,这样下次自己再次遇到的时候,不会因为相隔的时间过长而找不到。
所以我们可以看到,我的最初目标就是「通过搜索关键词来快速找到曾经写过的文章,方便找到解决方案」。
所以我的博客首先最重要的就是优化搜索。
曾经在butterfly版本比较低的时候,因为文章比较多,加载本地搜索索引耗费的时间非常长,所以当时首先采用algolia。两年前我记得当时还没几个人在用这个,但是我知道我需要这个,所以即使配置比较麻烦,还是首先选择了algolia。
这就是设计目标,你的每一个功能,都需要有需求来支撑。
你没必要为了并不需要的功能花费时间,而是需 ...
经验分享 未读
Butterfly CDN链接更改指南,替换jsdelivr提升访问速度使用错误的cdn会导致博客服务无法访问,访问速度过慢的问题。因为众所周知的原因jsdelivr无法使用了,但是替换cdn不知道替换成什么比较好。使用新版butterfly的用户可以切换成本地模式,但是如果是旧版butterfly用户的话或者新版想要提升速度就需要第三方的cdn了。
在我的友情链接里对于4秒内完成加载和图片加载的站点给了流畅标签,期望大家都能够加快自己的博客访问速度来提升友链整体的访问体验。
如果你觉得我的静态站访问速度还算不错(特别是第一次访问),可以试试替换为下面的cdn。
替换方式更改博客配置文件themes/butterfly/_config.yml
新版butterfly更改cdn的option配置项
旧版butterfly直接更换cdn链接即可
链接我这里只列出我在用的cdn,我没有用到的cdn可以在评论中留言,有时间我会补充。
jquery1https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.mi ...
经验分享 未读
批量替换旧的Twikoo表情包地址,修复数据库里旧的jsdelivr链接之前sticker-heo一直使用的是jsdelivr链接,但是因为近期jsdelivr已经彻底失效,近一个多月以来本项目已经换了三家cdn了。更换cdn确实提高了访问速度,但是旧版的sticker-heo表情仍然是不可访问的状态。
这里介绍一下如何更改旧表情链接地址方法,其他评论系统大同小异,这里只介绍twikoo。
下载数据库内容进入数据库页面在腾讯云云开发 -> 数据库里找到twikoo的comment。
导出所有数据我们点击导出按钮,导出所有数据,选择json格式。
替换掉之前的数据我们可以使用vscode打开这个json文件,使用替换功能来查找并替换掉下面的内容
123https://gcore.jsdelivr.net/gh/zhheo/Sticker-Heo@mainhttps://github-do.panbaidu.cn//https://raw.githubusercontent.com/zhheo/Sticker-Heo ...
经验分享 未读
51la统计体验报告:很全面的惊喜,Butterfly适配51la统计其实一切的一切来自于百度统计的一段话:
尊敬的百度统计用户你好,基础统计报告对于分析云站点最早查询时间将调整为2年,其余站点最早查询时间调整为1年,为避免数据丢失,建议你于2022.4.12前完成历史数据的下载或截图备份。如有疑问或更久的数据存储时长需求,你可发邮件至ext_tongji_reply@baidu.com 或 点击咨询
感觉说删就删让我产生了危机感,我其实对数据存储安全都非常敏感。一般我的文件都会保存三份以上的备份(比如微信聊天记录就存了三份,每周更新备份),这种说删就删让我感到一丝丝恐惧了。
所以百度统计我会继续用,但是要找个一起用的统计了。统计基本上都用过,cnzz界面感觉是上古时期的东西,谷歌速度堪忧,一个偶然的机遇让我看见了51la这个。初中的时候做论坛用过,后来就再也没碰过这个统计了。
界面界面来说算是现代的 ...
我的项目 未读
鱼塘DLC - 钓鱼:你钓到了一篇惊世好文!
如果不清楚如何部署友链朋友圈可以看这篇文章:友链朋友圈5 - 我的部署历程与主题样式分享
我的友链页一般都属于来者不拒,加着加着面临几个问题,一个是友链太多看不过来,即使点进去又发现没更新。所以友链朋友圈成功解决了这个难题。在这个基础上看了一下友链朋友圈的api文档,寻找一些玩法。其中「钓鱼」功能就是根据radompost API来获取的,经过几轮测试和版本迭代,逐渐稳定不再更新,所以放出来。
钓鱼当人们有成片的文章列表时,人们趋近于去浏览他们。而当只有一个内容时,人们才会去仔细思考。
配置钓鱼功能配置非常简单,在需要的地方部署HTML代码:
1234567<div class="title-h2-a"> <div class="title-h2-a-left"> <h2 style="padding-top: 0;margin:0.6rem 0 0.6rem;">🎣 钓鱼</h2><a class="random-post-start" ...
我的项目 未读
鱼塘:我的友链朋友圈部署记录
此文章已更新:友链朋友圈5 - 我的部署历程与主题样式分享
冰老师很久很久以前做的友链朋友圈,功能很棒但是配置过程为了追求免费涵盖了特别特别多业务。之前部署成功过一起,但是后来担心GitHub action限额和leancloud的多个限制,在一次无法使用的情况下,彻底被我给移除了。
上周得知友链朋友圈已经支持服务器部署了,全程使用服务器不用第三方服务,那不得整一个?
从功能性上一开始用的原装的,后来发现木木的功能更多一些,所以现在用的是木木的前端结构。这个文章只作为记录整个部署过程,不作为教程使用。
前端部署文档在前端部署用的木木的部署方式:立即访问文档
后端部署文档在后端部署用的官方文档:立即访问官方文档
在部署方式上使用的是最简单的server+sqlite方式,推荐有服务器的小伙伴使用这个方式。
部署后端因为用的宝塔面板,所以很轻松的安装了文档要求的python版本。
后来按照文档执行./server.sh时发现api进程始终无法运行。
后来与二猹探讨完后发现是因为没有安装aiohttp库,直接pip3 install aiohttp安装成功后就可以正常运行了。
友链适 ...
我的项目 未读
Butterfly魔改:国外网络访问检测,用js判断国外网络执行函数因为图床用的腾讯云cos,挂的cdn不支持外网访问(我也没打算支持),所以使用外网小伙伴无法访问任何图片,很多人以为是本站的图床挂了,然而可能是因为用户自己是用的外网。那么最好的方式就是告诉用户,你用的不是国内网进行访问。
如果你不需要外网访问你的网站,也可以利用这个js将网页跳转到其他页面或者其他操作。
效果预览
实现方式实现方式特别简单,首先引入判断国家ip的api:
1<script src="//geoip-js.com/js/apis/geoip2/v2.1/geoip2.js" type="text/javascript"></script>
然后再执行判断
1234567891011121314151617var foreignTips = (function () { var onSuccess = function (geoipResponse) { if (!geoipResponse.country.iso_code) { return; ...
我的项目 未读
Butterfly魔改:自定义右键菜单看到很多魔改的小伙伴都自定义了右键菜单,例如糖果屋的saoUI右键菜单、volantis的右键菜单等等。最近发现DoraKika写了个右键菜单,风格简洁,看起来难度不大,所以修改了个样式就移植过来了。
原版链接本文魔改根据这个教程进行的二次修改。想要魔改的小伙伴可以参考这篇文章的教程来。
本站样式(Acrylic风格)因为还没来得及移植比较多的功能,所以就先上这三个功能了。以后可能将一些文章链接放在里面。
我做了什么?
增加一个右键菜单的遮罩,防止在有菜单的情况下还能点击页面。
增加一个超链接样式
增加繁简切换功能
图标使用font awesome
样式兼容Acrylic
安装教程可以参考这个教程进行安装。本文只包含文件内容。
...butterfly/layout/includes/dorakika/rightmenu.pug
123456789101112131415161718192021#rightMenu .rightMenu-group.rightMenu-small .rightMenu-item#menu-backward ...
我的项目 未读
Hexo魔改:Codepen项目组件移植教程,将Codepen项目移植到博客
本文以butterfly主题举例,其他主题自行适配
好久都没写魔改教程了,上次写的时候还是在上次。有一说一,近期的魔改基本上都是针对页面的变化。最近刚适配的1500px宽度,大宽度带来的视觉沉浸感非常棒,但是会带来很多问题,例如之前的主题横向元素过少,以至于在横屏比较宽的场景下元素都会被拉伸得很大。所以这几次版本的迭代都是为了增加横向的元素,减少被拉伸感。
偶尔逛过我的博客的小伙伴应该看到了我在置顶区域新增了一个小组件。
这个东西是由codepen的一个开发者制作的,我只是改了一点文字和样式,而整个移植过程非常快速。
使用iframe移植这里用到的是iframe。具体定义和用法可以搜一下,简单来说就是网页里面嵌入了一个网页。所以我们只要将喜欢的codepen项目做成一个单独的网页就可以轻松的嵌入了。你可以在你的博客中嵌入一个游戏,一个动画。可以嵌入到加载页面、侧边栏以及文章之中。
导出Codepen项目首先我们就需要将codepen项目导出为最基本的html、css、js。首先进入codepen挑一个公开项目。
我们在右下角的选项中选择导出。
导出需要编译一段时间,成功之后可 ...
我的项目 未读
Butterfly魔改:动态分类条,可以根据页面变化而改变的分类列表展示方式好久没有写魔改教程了,今天带来一个最近琢磨的一个分类条的显示。以前非常喜欢这种tab切换就能更换列表文章的显示方式,可是静态博客想要做到这一点真的是太难了,而且是原生html,不是vue。我的博客一直没有能够在首页展示分类的入口。起初因为分类比较少,但是现在已经很多了。那么一个展示分类的条就是非常必要的了。
这个分类条非常简约,原生js。魔改需要自己具备一定的魔改基础。
效果预览
配置方式分类的添加采取的是纯手工的方式,本人技术有限没有去翻Hexo的API,并且想要根据自己的心意进行排序,所以就只能手动来了。
新建文件新建文件:themes/butterfly/layout/includes/categoryBar.pug
123456789101112131415161718192021#category-bar .category-bar-items#category-bar-items .category-bar-item(id='首页') a(href="/") 首页 ...
经验分享 未读
网页插入一段文字的打字机效果,逐字出现循环回退删除动画Html最近主题的更新是想让页面更加丰富起来,因为之前为了界面清爽删掉了很多功能,虽然一种程度上算是简约,但是对于个人博客来说不想只包含文章,还应该多一些信仰之力。所以为了高大上的逼格(狗头)所以分析了一下Butterfly主题的打字机效果。
Butterfly用的是typed.js来做的打字机效果。开箱即用,非常好用。
效果预览见页面底部
安装教程这里提供两种代码实现方式,根据业务需求来
Butterfly可以使用pug代码,如下
123456789101112#footer-banner-tips script(src='https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js')script. var typed = new Typed("#footer-banner-tips", { strings: ["用行动去思考,去改变、去创造。","Take action to ...
我的项目 未读
Butterfly美化:今日诗词侧边栏小组件,中国传统诗词文化之前公告显示的是微信公众号的关注,但是因为微信的诸多限制和微信的生态以至于我不是很想再做公众号相关的东西了。因为我的作者组件完全替代了公告的功能,所以我将公告移除了。但是这带来了一点问题,就是在显示的时候总是缺点什么。那么就来做个新的组件吧!
之前已经做过诗词放在页脚,但是新版页脚为了布局整洁给移除了。正好放在侧边栏吧!
组件样式
API本组件的API由今日诗词提供
Demo本站所有包含侧边栏的页面均有该组件
安装教程创建组件主题新建themes/butterfly/layout/includes/widget/card_poem.pug,内容如下
123456789101112131415161718#card-poem.card-widget #poem_sentence #poem_info #poem_dynasty #poem_authorscript(src='https://cdn.jsdelivr.net/npm/js-heo@1.0.11/poem/ ...
我的项目 未读
Butterfly魔改:404页面展示最近文章404页面是在文件不存在的时候产生的。设想一个场景,用户急于寻找问题的答案,那么当用户通过例如搜索引擎和错误的内链进入到404网页时,用户可能下意识就会关闭网站。如何在404页面留住用户呢?
在无法判断用户的来源和目标的情况下,最好的还是做主动推荐。所以我在404页面的下方添加了最近的文章列表,使用的是butterfly的侧边栏最近文章列表的代码。
值得一提的是,最近文章模块没有必要在首页显示,因为和左侧的文章列表重复。
Demo
引用站外地址,不保证站点的可用性和安全性
404
张洪Heo
代码编辑路径themes/butterfly/layout/includes/404.pug
12345678910111213141516171819202122232425262728293031323334353637- var top_img = theme.error_404.background || theme.d ...
我的项目 未读
Twikoo魔改样式分享-博客评论系统的定制皮肤魔改了一下Twikoo的样式,拿出来分享一下,喜欢的可以搞一手。推荐用官方的。
查看样式
魔改内容
先输入评论再输入个人信息
信息整合,让结构更有条理
将工具放入输入框,更符合直觉
删除了我个人不需要的按钮
如何装配
使用魔改版可能会有更新和不兼容风险,请须知。魔改js随缘更新,可能与最新版不同步更新。
将twikoo的js文件地址更改为:
1https://cdn.jsdelivr.net/gh/zhheo/twikoo@dev/dist/twikoo.all.min.js
相关阅读Twikoo评论系统配置教程(基于腾讯云开发)
我的项目 未读
Hexo-Butterfly说说朋友圈适配(哔哔 for 腾讯云)自用之前关于哔哔的教程写的都很乱,并且因为哔哔和Twikoo可能造成的冲突问题导致很多都访问不了,经常出现缓存和无法加载的情况。最终还是用json加载的方式来做bb了。这篇教程可以作为最终版的哔哔教程了。(再也不想折腾这个东西了)
这篇教程不再采用外链形式,一篇搞定全部。本功能已经基本完成,不再添加新功能,除非有bug会在GitHub上热更新,教程部分基本不会再更新,保证较长的生命周期。一次配置,一直使用。
开头个人精力和能力有限,不是很想折腾cloudbase的相关函数和api,所以用了bber-talk的方式来读json获取动态。
我做了什么?教程根据林木木的相关教程做了Butterfly主题适配和json化。加载速度大幅度提升,但是做了数量限制。
Demo教程完成之后你会得到:
一个首页的滚动轮播组件
一个可以展示动态的页面
和一堆发动态的工具
创建哔哔页面前期准备首先需要配置腾讯云开发,这个部分可以参考「哔哔点啥」微信公众号 2.0中的配置过程。
创建应用1.注册云开发CloudBase
2.进入云开发控制台,新建环境,请按需配置环境。
3.进入环境-登录授权,启用“匿名 ...
经验分享 未读
基于Hexo的Butterfly下自定义指定首页文章卡片高度列表如果都是统一的样式、高度未免有些过于单调和重重复。在一些关键性文章中加一些特殊的样式也是我们常用的举措,例如文章置顶。但是文章置顶多了就会看不见新文章,置顶折叠展示的力度又不够。所以对于有特殊意义的文章展示特殊的效果是非常必要的,丰富层次。
这个文章的核心思路就是给文章的markdown文件里添加一个large参数,当large=true时,则文章会添加一个class。然后针对这个class进行css的调整。让我们开始吧。
样式预览
Demo
修改源文件编辑themes/butterfly/layout/includes/mixins/post-ui.pug
12345mixin postUI(posts) each article , index in page.posts.data if article.hide !== true- .recent-post-item+ .recent-post-item(class= (article.large === true) ? 'post-card-large' : ' ...
经验分享 未读
Hexo错误:spawn failed的解决方法昨天部署的时候突然spawn failed,怎么部署都部署不上。后来折腾了好一会终于解决了这个报错问题。今天又发现群友有这个问题,所以写个文章来复盘一下。
网络问题可以说明的是这个问题99%由于网络问题造成的,我们的目标就是为了解决网络问题。
重启电脑有的时候可能是因为网络波动产生的错误,请首先尝试。
科学上网问题如果你使用git走了代理,可能是因为代理软件问题导致无法连接。请检查代理软件是否正常和代理端口是否正确。
设置git代理命令:
12git config --global http.proxy http://127.0.0.1:1080git config --global https.proxy https://127.0.0.1:1080
如果你没有使用代理,那么可以取消git代理:
12git config --global --unset http.proxygit config --global --unset https.proxy
修改DNS可以将你的电脑dns设置为国际dns,再尝试。
128.8.8.81.1.1.1
服务器无法连接如果你的Hexo是 ...