因为点击超链接是个特别麻烦的事情，需要鼠标移动到指定的标题才可以（这真的是太累了）。所以博客的文章卡片、分类页面都是不需要鼠标移动到标题就可以点击进入跳转页面的。我是通过给父级元素添加onclick的方式来添加跳转。但是这就出现了一个问题，点击标签的时候会从子元素的事件触发一遍，然后再触发父元素事件。也就是说点击标签的时候会跳转两个页面。 如何解决这个问题呢？ 添加事件给子元素添加下面的onclick事件： 1window.event.cancelBubble=true; 可以阻止子元素的点击事件触发父元素的事件。我们使用html的时候可以添加： 1onclick="window.event.cancelBubble=true;" 完整例子（子元素）： 1<a class="article-meta__tags" href="/tags/%E5%BF%85%E7%9C%8B/" event.cancelbubble="" onclick="window.event.cancelBubbl ...

最近主题的更新是想让页面更加丰富起来，因为之前为了界面清爽删掉了很多功能，虽然一种程度上算是简约，但是对于个人博客来说不想只包含文章，还应该多一些信仰之力。所以为了高大上的逼格（狗头）所以分析了一下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 ...

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

404页面是在文件不存在的时候产生的。设想一个场景，用户急于寻找问题的答案，那么当用户通过例如搜索引擎和错误的内链进入到404网页时，用户可能下意识就会关闭网站。如何在404页面留住用户呢？ 在无法判断用户的来源和目标的情况下，最好的还是做主动推荐。所以我在404页面的下方添加了最近的文章列表，使用的是butterfly的侧边栏最近文章列表的代码。 值得一提的是，最近文章模块没有必要在首页显示，因为和左侧的文章列表重复。 Demo 引用站外地址，不保证站点的可用性和安全性 404 张洪Heo 代码编辑路径themes/butterfly/layout/includes/404.pug 12345678910111213141516171819202122232425262728293031323334353637- var top_img = theme.error_404.background || theme.d ...

想要在隐私协议里面添加展示用户自己会被暴露的信息，研究了一个获取用户信息并展示的方法，利用了ipip.net来获取用户的ip和地理信息。 DemoDemo 安装方式页面引入js 1<script src="https://cdn1.tianli0.top/gh/zhheo/JS-Heo@main/privacy/privacy.js"></script> 页面引入markdown 123456789| 类型<div style="width:100px"> | 信息 ||-------------|-------------------------------------|| IP地址 | <div id="userAgentIp"></div> || 国家 | <div id="userAgentCou ...

在研究二维码生成的时候发现一个好多年前的qrocde项QRCode.js然后就想用这个js直接生成该页面的二维码。 不过生成二维码在chrome浏览器中已经支持右键单击直接生成了，但是很多人不知道，也不清楚怎么用。我加一个二维码功能只是为了丰富页面，提醒分享，并方便手机查看。 Demo 安装方式页面引入以下两条js 12<script async src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js"></script><script async src="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/qrcode/qrcode-lu.js"></script> 在需要插入二维码的位置创建一个id为qrcode的div 个性化需要调节详细参数请了解QRCode.js

魔改了一下Twikoo的样式，拿出来分享一下，喜欢的可以搞一手。推荐用官方的。 查看样式 魔改内容 先输入评论再输入个人信息 信息整合，让结构更有条理 将工具放入输入框，更符合直觉 删除了我个人不需要的按钮 如何装配 使用魔改版可能会有更新和不兼容风险，请须知。魔改js随缘更新，可能与最新版不同步更新。 将twikoo的js文件地址更改为： 1https://cdn.jsdelivr.net/gh/zhheo/twikoo@dev/dist/twikoo.all.min.js 相关阅读Twikoo评论系统配置教程（基于腾讯云开发）

之前关于哔哔的教程写的都很乱，并且因为哔哔和Twikoo可能造成的冲突问题导致很多都访问不了，经常出现缓存和无法加载的情况。最终还是用json加载的方式来做bb了。这篇教程可以作为最终版的哔哔教程了。（再也不想折腾这个东西了） 这篇教程不再采用外链形式，一篇搞定全部。本功能已经基本完成，不再添加新功能，除非有bug会在GitHub上热更新，教程部分基本不会再更新，保证较长的生命周期。一次配置，一直使用。 开头个人精力和能力有限，不是很想折腾cloudbase的相关函数和api，所以用了bber-talk的方式来读json获取动态。 我做了什么？教程根据林木木的相关教程做了Butterfly主题适配和json化。加载速度大幅度提升，但是做了数量限制。 Demo教程完成之后你会得到： 一个首页的滚动轮播组件 一个可以展示动态的页面 和一堆发动态的工具 创建哔哔页面前期准备首先需要配置腾讯云开发，这个部分可以参考「哔哔点啥」微信公众号 2.0中的配置过程。 创建应用1.注册云开发CloudBase 2.进入云开发控制台，新建环境，请按需配置环境。 3.进入环境-登录授权，启用“匿名 ...

博客的滚动条有个问题，就是点搜索的时候网页会有一定的偏移。这个问题是由于滚动条占用了DOM，导致当不能滚动的情况下，滚动条不显示导致整体网页会鬼畜一下。其实只要一条css就能搞定。 修正滚动条位置通过overlay可以将滚动条独立出来。 123html { overflow-y: overlay;} 滚动条自动隐藏滚动条在需要显示的时候显示，在不滚动的时候完全可以隐藏起来。没有滚动条的视觉效果还是很不错的。 Demo本站采用该滚动条方案 引入引入js地址： 1https://cdn.jsdelivr.net/npm/js-heo@1.0.11/hidescrollbar/hidescrollbar.js 引入css地址： 1https://cdn.jsdelivr.net/npm/js-heo@1.0.11/hidescrollbar/hidescrollbar.css 参考文档Javascript监听滚动条滚动停止

之前用的一直是图片画廊，感觉图片画廊的样式不是很好看，最近寻觅的时候发现了一个比较有趣的方形卡片的视差效果感觉很不错。所以就将原本的项目移植到了分类页面。整个移植是针对Hexo博客来的，不过应该是能通用更多的页面。 展示效果 Demo（目前采用非三维效果） 引用站外地址，不保证站点的可用性和安全性 分类 张洪Heo 代码编辑source/categories/index.md，将type对应的值删掉。粘贴以下代码： 不兼容Safari兼容Safari但无三维效果123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<link rel="stylesheet" type="text/css&qu ...

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

有些时候我们需要对不同地域的用户做一些限制，比如在北京的用户不能查看文章正文等。如何判断用户所在的地域并针对不同的地域做出限制呢？这里利用sohu的地域判断API。这篇文章用Butterfly的评论功能做地域限制为例子。 本文以pug代码为例，html代码在文章后面。 城市获取1234script(language='javascript', type='text/javascript', src='//pv.sohu.com/cityjson')script(language='javascript', type='text/javascript'). var city = returnCitySN['cname']; //- console.log(city) city变量则为城市名。例如北京市。然后可以通过city变量内容字符串是否包含北京即可。 判断 ...

本项目已经停止维护，但仍能正常使用，不再进行答疑。新版本项目入口 第一个写的测试版有几个问题，这个版本中使用冰老师那年今日同款Swiper来进行滚动，滚动更加丝滑，并且没有pjax的疯狂滚动问题。并且鉴于Swiper有更多的扩展性，这个功能还有更多发挥空间。 样式预览 相比旧版本相比旧版本增加特性 滚动更流畅 无疯狂滚动bug 查看如何配置bbHexo的Butterfly适配个人动态（哔哔 for 腾讯云），在博客上发朋友圈 Hexo的Butterfly主页适配哔哔动态，博客主页展示滚动消息 创建dom创建themes/butterfly/layout/includes/bbTimeList.pug 1234567#bbTimeList.bbTimeList.container i.bber-logo.iconfont.icon-bblogo(onclick="location='/essay/'",title="即刻短文",style="font ...

今天尝试分享自己网站到微信的时候发现微信的缩略图取得很奇怪。所以找了一下如何显示自定义内容的方法，发现常说的使用微信sdk的方式太麻烦了，对于只有一个前端的静态博客，简单化是最好的。 效果预览 添加代码首先准备一张300*300的图片作为缩略图。 在head头部添加一个div，包含img标签。 12<div style="display:none;"><img src="/img/wechat.png" alt=""></div><meta property="og:image" content="https://*.***.***/*.png"> 第一行src、第二行content更改为图片地址即可，第二行的图片地址必须为完整地址。 参考文章微信分享链接的缩略图

合理的使用a标签的rel属性必不可少，在适合的场景下使用正确的rel标签可以提升网站的安全性和保持搜索引擎权重不会流失。有利于搜索引擎中的排名。 nofollow本意来自于搜索引擎对于垃圾广告评论的抓取，很多打广告的为了增加自己的搜索引擎权重，所以在非常多的网站上使用a标签来留言。 建议适用范围非本站外链 noopener因为target=_blank的安全性，使用target=_blank打开的网页与你的网页共占线程，如果外链出现问题很容易影响到本站，将本站跳转到其他页面等攻击行为。 可以参考你不曾察觉的隐患：危险的 target=”_blank” 与 “opener” 建议适用范围使用target="_blank"的超链接 noreferrer目标站在使用类似百度统计的软件时会看到访问来源，如果添加了该标签对方只能在类似百度统计中看到直接访问而非你的网站。 建议适用范围出于隐私考虑的网站

本项目已经停止维护，但仍能正常使用，不再进行答疑。新版本项目入口 根据林木木的哔哔教程第二弹熟悉的味道，不一样配方中的首页展示滚动条进行魔改了一下，结合之前发布的Butterfly下自定义加载页底部滚动文字方法做成了现在的首页展示哔哔的样式。 效果预览 Demo 查看如何配置bbHexo的Butterfly适配个人动态（哔哔 for 腾讯云），在博客上发朋友圈 Hexo的Butterfly主页适配哔哔动态，博客主页展示滚动消息 Bug使用本教程会产生问题，目前还没有能力解决，如果你解决了欢迎告知我。如果想要体验无bug的首页哔哔，可以查看熟悉的味道，不一样配方这篇文章的内容。 你可能会遇到： 滚动完第9条后回滚到第1条动画不流畅。 说在前面本文基于熟悉的味道，不一样配方对Butterfly的补充说明。重复部分不再赘述。 其中没有包含的部分为腾讯云的相关配置部分。 创建ui文件创建themes/butterfly/layout/includes/bbTimeList.pug 1234567891011121314151617181920212223242526272829#bbT ...

本项目已经停止维护，但仍能正常使用，不再进行答疑。新版本项目入口 本项目来自林木木发的「哔哔点啥」微信公众号 2.0做的Butterfly适配。可以通过动态发一些一句话几句话的动态而不是写一篇博客，减少水文，提升整站文章质量。类似朋友圈。 效果预览Demo 关于首页滚动哔哔可以参考本文 关于首页滚动的扩展阅读Hexo的Butterfly主页适配哔哔动态，博客主页展示滚动消息 前期准备首先需要配置腾讯云开发，这个部分可以参考「哔哔点啥」微信公众号 2.0中的配置过程。 教程部分摘录:这个部分摘录「哔哔点啥」微信公众号 2.0详细图文教程请看原文章，这里指摘录文字部分。 创建应用1.注册云开发CloudBase 2.进入云开发控制台，新建环境，请按需配置环境。 3.进入环境-登录授权，启用“匿名登录” 4.进入环境-安全配置，将网站域名添加到“WEB安全域名” 5.进入数据库，新建数据库集合，命名 talks，权限设置为 “所有用户可读，仅管理员可写”。 云函数部署1.接着 新建云函数 函数名称 bber （可自定义），进入 函数代码 编辑，复制 index.js 代码丢入 inde ...

这年头基金已经成为90后的社交工具了，今天涨了跌了，从一无所有到家破人亡（误。给朋友展示自己的基金组合是非常有趣的事情。（但不应该劝他人购买基金，如果一直跌就是感情破裂的开始，特别是新入场的一般都拿不住，跌了10个点就要卖了。 在这个背景下写了一个能够看自己的基金组合估值的小组件，作为交流的入口。感谢doctorxiong提供的API。 样式预览 使用教程放入组件在themes/butterfly/layout/includes/widget文件夹新建card_funds.pug。 123456789101112if theme.aside.card_funds.enable .card-widget#card-funds .item-headline i.fas.fa-bolt span= _p('aside.card_funds.headline') .funds-list span= _p('aside.card_funds.loading_text') .funs-tips ...

之前折腾表情的时候发现图片的url根本就打不开，导致所有的表情都无法预览，这是令人屎尿不及的。在打开我的图片url的时候提示： 1234567<Error><Code>NoSuchKey</Code><Message>The specified key does not exist.</Message><Resource>***.cos.ap-beijing.myqcloud.com/***.png/cover</Resource><RequestId>NjAwM2YxZjNfNzBiODJhMDlfNDdlNV8yNDRiYjJl</RequestId><TraceId>OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MW***0YjJkZWE3NjcxYTUzN2Q1NDQzNjY0ZmI3ZT ...

最近在用flex布局，每次用总是忘了flex的属性，还需要看一下。在这先转了这个我经常看的flex布局文章，省的每次还要去找了。 本文为转载文章，以下内容来源于 Flex 布局教程：语法篇 阮一峰 网页布局（layout）是 CSS 的一个重点应用 Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 123.box{ display: flex;} 行内元素也可以使用 Flex 布局。 123.box{ display: inline-flex;} Webkit 内核的浏览器，必须加上-webkit前缀。 1234.box{ display: -webkit-flex; /* Safari */ display: flex;} 注意，设为 F ...

关于webp格式的好处，我在很久之前转载过一篇文章：WebP 相对于 PNG、JPG 有什么优势？那个时候我的博客刚改成使用webp格式，不过后来出了一些问题导致我回滚了这个操作。 时隔近一年时间，我的博客再次重新支持webp格式了。这篇文章主要是介绍我的博客是如何判断浏览器是否支持webp格式并将所有的图片以webp格式展现。 我的配置因为我使用的是七牛云自带的格式转换的图片样式，所以我使用了替换全站img标签的src中的url参数。如果你使用的不是七牛云，可以根据我的代码进行二次修改。 主要思路使用的是js来判断浏览器的头部信息是否支持，如果支持则将原有我全站里面img标签里src中的!blogimg改为@blogwebp。 代码如下可以放在外置的js文件，也可以直接写进网页中 1234567891011121314151617181920212223242526window.onload=function(){ var checkPic = function(isWebP){ $("img").each(function ...

再博客优化的过程中我们经常会嵌入很多第三方的js，第三方js提供更丰富的功能，但是却拖垮了网页的加载速度。这个时候我们可以使用async/defer来推迟js的加载。 在HTML5以前，script标签没有这两个属性，而浏览器单纯的按照顺序解析（解析）并执行，HTML5之后，我们可以在脚本标签定义他的行为，包括网路请求是否同步，执行时机等等。 选择async还是defer 广泛地说，可以通过你加载的js用途来判断你的选择 顺序 DOMContentLoaded async 加载优先顺序。脚本在文档中的顺序不重要 —— 先加载完成的先执行 不相关。可能在文档加载完成前加载并执行完毕。如果脚本很小或者来自于缓存，同时文档足够长，就会发生这种情况。 defer 文档顺序（它们在文档中的顺序） 在文档加载和解析完成之后（如果需要，则会等待），即在 DOMContentLoaded 之前执行。 在实际开发中，defer 用于需要整个 DOM 的脚本，和/或脚本的相对执行顺序很重要的时候。 async 用于独立脚本，例如计数器或广告，这些脚本的相对执行顺序 ...

最近经常会魔改一些博客上的样式，增加一个自己魔改的css，学到了css的选择器。css选择器可以定位对应的html标签、元素等。看到了一个css选择器的使用列表，在博客中粘贴出来。 本文为转载文章，以下内容来源于 CSS 选择器参考手册 w3school 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 “CSS” 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。） 选择器 例子 例子描述 CSS .class .intro 选择 class=”intro” 的所有元素。 1 #id #firstname 选择 id=”firstname” 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有<p>元素。 1 element,element div,p 选择所有<div>元素和所有< ...

空格的替代符号有以下几种： 名称 编号 描述 &nbsp; &\#160; 不断行的空白（1个字符宽度） &ensp; &\#8194; 半个空白（1个字符宽度） &emsp; &\#8195; 一个空白（2个字符宽度） &thinsp; &\#8201; 窄空白（小于1个字符宽度） 名称和编号都可以作为替代的符号，;不可以省略。 比如底部的CC协议图标之间我就插入了一个空白。 1<i class="cc cc-cc"></i>&#8195;<i class="cc cc-by"></i>&#8195;<i class="cc cc-nc"></i>&#8195;<i class="cc cc-nd"></i> 参考 ...

本文为转载文章，以下内容来源于 WebP 相对于 PNG、JPG 有什么优势？ 知乎 hexo如何采用webp格式。怎么做到的？ 如何使用外置js配合图像样式采用webp WebP 在各大互联网公司已经使用得很多了，国外的有 Google（自家的东西肯定要用啦，Chrome Store 甚至已全站使用 WebP）、Facebook 和 ebay，国内的有淘宝、腾讯和美团等。 WebP的优势WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。 之前做过一个测试，对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果： 更多测试查看 WebP 示例 (PNG 转 WebP)（请用 Chrome 浏 ...