腾讯云有一个类似于语雀的性能监控平台，每天50万的额度，这篇文章介绍Butterfly主题如何引用这个插件。 开启插件首先进入腾讯云，进入插件中心，打开服务。 在应用列表中，新建接入。 选择使用腾讯云cdn加速的域名，然后下一步 复制上报ID备用 插入代码进入themes/butterfly ...

我们设计网页通常使用栅格来做屏幕的自适应，我们在sketch上设计虽然不支持自适应画板，但是我们一般都是先完成pc端的画板布局。 工具栏我们需要创建栅格需要通过工具栏的显示组件，如果你没有这个组件需要手动来添加。 如果没有的话右键单击工具栏，选择「自定义工具栏」。将百分比缩放组件拖拽到工具栏中，记 ...

我似乎从来都没有说过这方面的理论，只说过一些局部功能的设计原因和魔改。在网上大多也都是组件的魔改。这篇文章我想写一个纯理论的文章，以我现在的博客为例子，引申出博客的设计思考。 相信通过这篇文章，能够给想要修改自己博客的小伙伴一些方向性的建议，而不是盲目使用网上的组件，看见一个好就直接扒下来。 这篇文 ...

使用错误的cdn会导致博客服务无法访问，访问速度过慢的问题。因为众所周知的原因jsdelivr无法使用了，但是替换cdn不知道替换成什么比较好。使用新版butterfly的用户可以切换成本地模式，但是如果是旧版butterfly用户的话或者新版想要提升速度就需要第三方的cdn了。 在我的友情链接里 ...

之前sticker-heo一直使用的是jsdelivr链接，但是因为近期jsdelivr已经彻底失效，近一个多月以来本项目已经换了三家cdn了。更换cdn确实提高了访问速度，但是旧版的sticker-heo表情仍然是不可访问的状态。 这里介绍一下如何更改旧表情链接地址方法，其他评论系统大同小异，这里 ...

其实一切的一切来自于百度统计的一段话： 尊敬的百度统计用户你好，基础统计报告对于分析云站点最早查询时间将调整为2年，其余站点最早查询时间调整为1年，为避免数据丢失，建议你于2022.4.12前完成历史数据的下载或截图备份。如有疑问或更久的数据存储时长需求，你可发邮件至ex&#x ...

如果不清楚如何部署友链朋友圈可以看这篇文章：友链朋友圈5 - 我的部署历程与主题样式分享 我的友链页一般都属于来者不拒，加着加着面临几个问题，一个是友链太多看不过来，即使点进去又发现没更新。所以友链朋友圈成功解决了这个难题。在这个基础上看了一下友链朋友圈的api文档，寻找一些玩法。其中「钓鱼」功 ...

此文章已更新：友链朋友圈5 - 我的部署历程与主题样式分享 冰老师很久很久以前做的友链朋友圈，功能很棒但是配置过程为了追求免费涵盖了特别特别多业务。之前部署成功过一起，但是后来担心GitHub action限额和leancloud的多个限制，在一次无法使用的情况下，彻底被我给移除了。 上周得知友 ...

因为图床用的腾讯云cos，挂的cdn不支持外网访问（我也没打算支持），所以使用外网小伙伴无法访问任何图片，很多人以为是本站的图床挂了，然而可能是因为用户自己是用的外网。那么最好的方式就是告诉用户，你用的不是国内网进行访问。 如果你不需要外网访问你的网站，也可以利用这个js将网页跳转到其他页面或者其他 ...

看到很多魔改的小伙伴都自定义了右键菜单，例如糖果屋的saoUI右键菜单、volantis的右键菜单等等。最近发现DoraKika写了个右键菜单，风格简洁，看起来难度不大，所以修改了个样式就移植过来了。 原版链接本文魔改根据这个教程进行的二次修改。想要魔改的小伙伴可以参考这篇文章的教程来。 本站样式 ...

本文以butterfly主题举例，其他主题自行适配 好久都没写魔改教程了，上次写的时候还是在上次。有一说一，近期的魔改基本上都是针对页面的变化。最近刚适配的1500px宽度，大宽度带来的视觉沉浸感非常棒，但是会带来很多问题，例如之前的主题横向元素过少，以至于在横屏比较宽的场景下元素都会被拉伸得很 ...

我的博客右下角有一个小Guli的形象，他一直在看左上方的文章。这个是当初设计这个元素的原因，也是在边缘视觉给予用户的焦点暗示。当用户出现分心的时候，因为人类对眼球的视觉捕捉一般都是最快（即便是guli这个形象眼睛与人类相比很奇怪），所以人们在分心的时候看到Guli后很容易拉回视觉焦点到文章上。 情 ...

因为点击超链接是个特别麻烦的事情，需要鼠标移动到指定的标题才可以（这真的是太累了）。所以博客的文章卡片、分类页面都是不需要鼠标移动到标题就可以点击进入跳转页面的。我是通过给父级元素添加onclick的方式来添加跳转。但是这就出现了一个问题，点击标签的时候会从子元素的事件触发一遍，然后再触发父元素事件 ...

最近主题的更新是想让页面更加丰富起来，因为之前为了界面清爽删掉了很多功能，虽然一种程度上算是简约，但是对于个人博客来说不想只包含文章，还应该多一些信仰之力。所以为了高大上的逼格（狗头）所以分析了一下Butterfly主题的打字机效果。 Butterfly用的是typed.js来做的打字机效果。开箱即 ...

之前公告显示的是微信公众号的关注，但是因为微信的诸多限制和微信的生态以至于我不是很想再做公众号相关的东西了。因为我的作者组件完全替代了公告的功能，所以我将公告移除了。但是这带来了一点问题，就是在显示的时候总是缺点什么。那么就来做个新的组件吧！ 之前已经做过诗词放在页脚，但是新版页脚为了布局整洁给移除 ...

404页面是在文件不存在的时候产生的。设想一个场景，用户急于寻找问题的答案，那么当用户通过例如搜索引擎和错误的内链进入到404网页时，用户可能下意识就会关闭网站。如何在404页面留住用户呢？ 在无法判断用户的来源和目标的情况下，最好的还是做主动推荐。所以我在404页面的下方添加了最近的文章列表，使用 ...

想要在隐私协议里面添加展示用户自己会被暴露的信息，研究了一个获取用户信息并展示的方法，利用了ipip.net来获取用户的ip和地理信息。 DemoDemo 安装方式页面引入js 1<script src="https://cdn1.tianli0.top/gh/zhheo/JS-H ...

在研究二维码生成的时候发现一个好多年前的qrocde项QRCode.js然后就想用这个js直接生成该页面的二维码。 不过生成二维码在chrome浏览器中已经支持右键单击直接生成了，但是很多人不知道，也不清楚怎么用。我加一个二维码功能只是为了丰富页面，提醒分享，并方便手机查看。 Demo 安装方式页面 ...

魔改了一下Twikoo的样式，拿出来分享一下，喜欢的可以搞一手。推荐用官方的。 查看样式 魔改内容 先输入评论再输入个人信息 信息整合，让结构更有条理 将工具放入输入框，更符合直觉 删除了我个人不需要的按钮 如何装配 使用魔改版可能会有更新和不兼容风险，请须知。魔改js随缘更新，可能与最新版不同步 ...

之前关于哔哔的教程写的都很乱，并且因为哔哔和Twikoo可能造成的冲突问题导致很多都访问不了，经常出现缓存和无法加载的情况。最终还是用json加载的方式来做bb了。这篇教程可以作为最终版的哔哔教程了。（再也不想折腾这个东西了） 这篇教程不再采用外链形式，一篇搞定全部。本功能已经基本完成，不再添加新 ...

博客的滚动条有个问题，就是点搜索的时候网页会有一定的偏移。这个问题是由于滚动条占用了DOM，导致当不能滚动的情况下，滚动条不显示导致整体网页会鬼畜一下。其实只要一条css就能搞定。 修正滚动条位置通过overlay可以将滚动条独立出来。 123html { overflow-y: ove ...

之前用的一直是图片画廊，感觉图片画廊的样式不是很好看，最近寻觅的时候发现了一个比较有趣的方形卡片的视差效果感觉很不错。所以就将原本的项目移植到了分类页面。整个移植是针对Hexo博客来的，不过应该是能通用更多的页面。 展示效果 Demo（目前采用非三维效果） 引用站外地址，不保证站点的可用性和 ...

列表如果都是统一的样式、高度未免有些过于单调和重重复。在一些关键性文章中加一些特殊的样式也是我们常用的举措，例如文章置顶。但是文章置顶多了就会看不见新文章，置顶折叠展示的力度又不够。所以对于有特殊意义的文章展示特殊的效果是非常必要的，丰富层次。 这个文章的核心思路就是给文章的markdown文件里添 ...

有些时候我们需要对不同地域的用户做一些限制，比如在北京的用户不能查看文章正文等。如何判断用户所在的地域并针对不同的地域做出限制呢？这里利用sohu的地域判断API。这篇文章用Butterfly的评论功能做地域限制为例子。 本文以pug代码为例，html代码在文章后面。 城市获取1234script( ...