我的项目 未读
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/ ...
我的项目 未读
Dribbble作品更新:各个国家文化传统节日介绍APP设计通过介绍一些国家特有的节日,来让人们能够更加深入的了解这个国家特别的文化。这是一种非常方便快捷的融入国家的方式。
Dribbble传送门
Through the introduction of some country-specific festivals, so that people can have a deeper understanding of the special culture of this country. This is a very convenient and quick way to integrate into the country.
我的项目 未读
Dribbble作品更新:团队预算审批app设计这是企业部门计划的每月预算进行申请、审批的应用程序设计。通过清晰的预算和报销管理让部门资金清晰透明。
This is the application design for application and approval of the monthly budget planned by the enterprise department. Make departmental funds clear and transparent through clear budget and reimbursement management.
Dribbble传送门
我的项目 未读
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 ...
我的项目 未读
Dribbble作品更新:电影音乐艺人数据库APP设计做了一个类似于IMDB和豆瓣的APP设计,应用首页一个封面人物,然后介绍代表作和推荐的信息。然后还做了一个播放页面,展示了电影作品的信息和主演等。
Display the artist’s information, view the artist’s representative works, and can link to the video app to watch directly.
Dribbble传送门
我的项目 未读
js获取用户IP和地理位置信息、UA并展示想要在隐私协议里面添加展示用户自己会被暴露的信息,研究了一个获取用户信息并展示的方法,利用了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魔改样式分享-博客评论系统的定制皮肤魔改了一下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.进入环境-登录授权,启用“匿名 ...
我的项目 未读
Dribbble 作品更新:寻找音乐APP设计通过分别提取每个音乐中特别吸引人的部分,让每个人通过这些音乐剪辑将他们最喜欢的音乐添加到播放列表中。当你不知道要听什么音乐时,这个程序会让你找到很多你可能会喜欢的音乐。
By extracting the particularly attractive parts of each music separately, let everyone add their favorite music to the playlist through these music clips. When you don’t know what music to listen to, this program will allow you to find a lot of music you might like for a while.
假期画的,做了俩小时快完成的时候sketch崩了,然后我心态也崩了,最后还是又熬了一个多小时完工。
Dribbble传送门
我的项目 未读
快捷指令:将图片上传到7bu去不图床并将url复制到剪贴板这算是短文向发图片迈进的一小步,一直以来不太清楚快捷指令是如何上传图片的,根据从冰老师那拿来的快捷指令掌握了发图片的技巧,但是这个快捷指令能力有限。所以改进了一下。
快捷指令特性
支持图片直接上传并将url复制到剪贴板
配合mac接力可实现手机端传图无需经过电脑自动复制链接
支持共享表单,通过图片app中的分享直接调用快捷指令
运行截图
指令地址使用手机打开此链接
我的项目 未读
主页适配哔哔动态1.3正式版,博客主页展示滚动动态
本项目已经停止维护,但仍能正常使用,不再进行答疑。新版本项目入口
第一个写的测试版有几个问题,这个版本中使用冰老师那年今日同款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 ...
我的项目 未读
微信菌:利用企业微信搭建微信消息提醒API目前开源项目比较流行的是server酱来进行消息提醒和传输,因为server酱的免费有着很多限制,比如消息不能直接看全,server酱需要关注公众号,且不能自定义头像等,有很多的限制。
使用企业微信搭建不需要安装企业微信app,可以直接在微信收到企业微信消息。
与server酱对比
server酱 Turbo版
腾讯云部署
调用vercel接口
搭建时间
一般
较长
较短,无需经过第三方网页
服务价格
8元/月
根据腾讯云函数进行收费
免费
免费额度
5条/天
1000GBs/月
vercel限制,超出限制可自行搭建
速度
信息加入异步推送队列,速度根据环境
非常快
受限于vercel的速度,较快
提醒
免费版只提醒收到消息,通知栏看不到详情
提醒消息全文
提醒消息全文
安全性
依据对项目的信任关系
开源项目
开源项目
数据隐私
推送内容保留1天/收费版7天
不会存储信息
不会存储信息
服务稳定性
一般
高,腾讯云一般很难挂
高,vercel应该不会跑路
其实类似于自己搭建的server酱。
我该如何选 ...
我的项目 未读
用Python读取yml文件并抓取友链的文章数获取文章数这个过程太麻烦了,因为需要经常更新,每个人的更新速度不同,就先写了一个获取butterfly主题的友链的文章数读取。以后有时间再完善一下,支持更多主题吧。
效果
代码getLinkList函数中open打开的地址换成yml文件地址
1234567891011121314151617181920212223242526272829303132333435363738394041import urllibfrom urllib.request import urlopenfrom distutils.filelist import findallfrom bs4 import BeautifulSoupimport yamldef getLinkList(): f = open('/Users/zhheo/Desktop/我的项目/blog/zhheo/source/_data/link.yml', 'r') ystr = f.read() ymllist = yaml.load(ystr, Loader=yaml.Ful ...
我的项目 未读
Hexo的Butterfly主页适配哔哔动态,博客主页展示滚动消息
本项目已经停止维护,但仍能正常使用,不再进行答疑。新版本项目入口
根据林木木的哔哔教程第二弹熟悉的味道,不一样配方中的首页展示滚动条进行魔改了一下,结合之前发布的Butterfly下自定义加载页底部滚动文字方法做成了现在的首页展示哔哔的样式。
效果预览
Demo
查看如何配置bbHexo的Butterfly适配个人动态(哔哔 for 腾讯云),在博客上发朋友圈
Hexo的Butterfly主页适配哔哔动态,博客主页展示滚动消息
Bug使用本教程会产生问题,目前还没有能力解决,如果你解决了欢迎告知我。如果想要体验无bug的首页哔哔,可以查看熟悉的味道,不一样配方这篇文章的内容。
你可能会遇到:
滚动完第9条后回滚到第1条动画不流畅。
说在前面本文基于熟悉的味道,不一样配方对Butterfly的补充说明。重复部分不再赘述。
其中没有包含的部分为腾讯云的相关配置部分。
创建ui文件创建themes/butterfly/layout/includes/bbTimeList.pug
1234567891011121314151617181920212223242526272829#bbT ...
我的项目 未读
Hexo的Butterfly适配个人动态(哔哔 for 腾讯云),在博客上发朋友圈
本项目已经停止维护,但仍能正常使用,不再进行答疑。新版本项目入口
本项目来自林木木发的「哔哔点啥」微信公众号 2.0做的Butterfly适配。可以通过动态发一些一句话几句话的动态而不是写一篇博客,减少水文,提升整站文章质量。类似朋友圈。
效果预览Demo
关于首页滚动哔哔可以参考本文
关于首页滚动的扩展阅读Hexo的Butterfly主页适配哔哔动态,博客主页展示滚动消息
前期准备首先需要配置腾讯云开发,这个部分可以参考「哔哔点啥」微信公众号 2.0中的配置过程。
教程部分摘录:这个部分摘录「哔哔点啥」微信公众号 2.0详细图文教程请看原文章,这里指摘录文字部分。
创建应用1.注册云开发CloudBase
2.进入云开发控制台,新建环境,请按需配置环境。
3.进入环境-登录授权,启用“匿名登录”
4.进入环境-安全配置,将网站域名添加到“WEB安全域名”
5.进入数据库,新建数据库集合,命名 talks,权限设置为 “所有用户可读,仅管理员可写”。
云函数部署1.接着 新建云函数
函数名称 bber (可自定义),进入 函数代码 编辑,复制 index.js 代码丢入 inde ...
我的项目 未读
Hexo的Butterfly侧边栏博主自己的基金组合估值展示插件这年头基金已经成为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 ...
我的项目 未读
何同学时间锁iOS版下载,养成良好的手机使用习惯何同学最近发了一条视频,讲如何减少手机上数字垃圾的阅读,他找大佬写了个安卓版本,但是iOS因为权限原因没有办法开发,难道iOS这么没排面吗?
剧情回顾先给没看过视频的人看一下何同学的视频,讲解如何减少手机垃圾信息的阅读。
安装方式安装捷径
当前最新版本为1.0要求iOS版本为iOS14及以上
使用手机Safari浏览器打开这个网址安装这个快捷指令。
设置自动化如果你曾经使用过自动化,可能对这个过程不是很陌生,主要流程就是添加App启动时执行这个快捷指令。
如果你第一次使用快捷指令,操作步骤可能会有一点点长,不过非常简单并且好理解,而且是值得的。
打开快捷指令app
点击自动化
点击右上角的+号
点击创建个人自动化
在列表中下滑,在靠近底部的位置点击App
在列表的第二项里面点击选取,设置你需要开启时间锁的应用
点击右上角的下一步
点击添加操作
在搜索里面输入打开
在搜索结果的操作分组里找到打开快捷指令
点击打开快捷指令中的快捷指令,来选取一个快捷指令
我们选择时间锁
点击右上角的下一步
关闭下方的运行前询问,弹窗选择不询问
点击右上角的完 ...
我的项目 未读
Hexo的Butterfly下如何隐藏部分文章不在首页显示有一些转载的文章我感觉没有太大的必要放在主页列表里,那些文章只是我用来检索知识库的,过多的转载文章还会影响浏览体验。这也是最近转载内容少了的缘故。这次给butterfly加了一个判断,这样的话就可以隐藏部分文章了。
之前使用过可以隐藏指定分类的插件,但是好像不能用(至少我是这样。而且分类起来还比较麻烦,还要重新改以前的文章。
修改主题文件地址:themes/butterfly/layout/includes/mixins/post-ui.pug
注意,主要是添加了if article.hide !== true这一行,然后这一行后全部需要按下tab缩进一层。
1234mixin postUI(posts) each article , index in page.posts.data if article.hide !== true .recent-post-item
修改文章在md文件的头部信息中添加hide: true
1234567---title: Butterfly如何隐藏部分文章不在首页显示author: 张洪Heotop: fals ...
我的项目 未读
Butterfly下自定义加载页底部滚动文字方法最开始加载页面是一排小字不动的,感觉比较单调,所以参考了滚动文字制作的一些文章写了这个滚动效果的代码。
样式预览本博客目前使用的就是这个样式
修改js修改文件的地址1主题文件夹/layout/includes/loading/loading.pug
代码请观察代码结构,不要盲目复制粘贴,根据代码结构将合适的代码放到合适的位置上。前两行代码不用复制。注意缩进。
12345678910111213141516171819202122232425262728293031323334353637383940414243#loading-box .spinner-box #loadingtxt ul#con1 li.li-style 阐述清楚问题就解决了一半 li.li-style 一致的体验是更好的体验 li.li-style 创造允许犯错,设计要知道保留哪些 li.li-style 想让用户爱上你的设计,先爱上你的用户 li.li-style 好的设计是我们与竞 ...
我的项目 未读
Dribbble 作品更新:计划日程待办App设计追求效率的程序,通过语音和语义识别来添加日程和规划。
引用站外地址,不保证站点的可用性和安全性
Planning App - Quickly create tasks and to-dos
张洪Heo
我的项目 未读
Dribbble 作品更新:喝水App设计这是一个能够记录喝水的app设计,与默认的健康应用风格一致,这会很实用。
欢迎喜欢的朋友点赞:
引用站外地址,不保证站点的可用性和安全性
More Drink More Health
张洪Heo
我的项目 未读
DelSpace2 for Mac - 文本处理工具|去空行 去空格 正则表达式替换 繁简 去重工具DelSpace是一款简单的文本处理工具,它支持清除空行、空格、查看文本信息和正则表达式替换等功能。最新还增加了繁简转换、文本去重等实用功能。
平常去空行的需求很多,最初都是用的在线工具,后来觉得用Chrome切来切去太麻烦了还不如自己写一个,于是就有了这个。
说明
1.本软件全程使用无联网行为
2.本软件目前发行的全部版本免费提供
最新版下载地址立即下载
使用场景
更新日志v1.13 20200115新增每行文本中插入一个空行(保持每一行文本只有一个空行,原文本有多个空行时会只保留一个)
v1.12 20200103立即下载
现在提取重复项时,重复三次及以上的内容只会在右侧显示一次而不是多次
往期更新日志
v1.11 20210103立即下载
支持提取重复项
v1.10 20200910旧版本立即下载修复了重要的BUG,建议所有用户更新
修复修复了删除空行和空格功能只能删除空行的问题优化了空格的算法,现在所有空白都算成空格优化了空行的算法,现在一行中只有空格时也算成空行现在,清除空行和空格的性能得到了提升
v1.9 20200824新增图标风格更改为Bigsur圆角矩形界面元 ...
我的项目 未读
Dribbble 作品更新:支付宝概念设计打开app后直接可以调用镜头扫描二维码(飞机稿不考虑性能和逻辑[手动狗头]),为了减少历史页面卡片的干净,将信息淡化了(各有所好吧)。
纯飞机概念稿,喜欢的朋友点个赞吧!点赞通道
我的项目 未读
Dribbble 作品更新:Unsplash App 概念稿设计这是加入追波的第一幅作品。上传这幅作品的时候还没有成为正式会员,所以还没有流量。采用了常见的概念稿要素和风格。在我这个作品中我比较喜欢点赞按钮的质感(特别是黑暗模式)
欢迎喜欢的朋友点赞:点赞通道
我的项目 未读
Sketch 行高模拟 iOS/Android 原生默认行高插件 v2.0.2 | 下载非常好用的CTLT更新啦!全新更新了2.0版本。本次版本增加了行高清除功能。
有小伙伴设计sketch文件的时候不喜欢sketch的行高功能,他们可能是做banner、做平面设计,有的时候并不需要行高。所以这个版本增加了清除字体行高功能!
如果你嫌弃它有很多功能或者你是其它倍图设计师不需要@1x的功能,我还单独推出了清除字体行高特别版~(特别版可以到本博客的特别版专属下载链接中下载)
下载清除行高专用版
支持批量清除、支持多选清除,不需要手动一个一个该了!从此跟杂乱的行高说拜拜~
AutoChangeTextLineHeightTool2.0 行高解决方案
注意本版本只针对**@1x设计师**使用,@2x及其他倍率设计师仅清除行高功能可用。
相关阅读为什么CTLT能够模拟真机行高?
下载须知
插件主要代码由@baobaoxi,apudou完成,youngxkk辅助一些bug;@zz379 York01完成安卓版本的尺寸计算和制作,zhhoo(也就是我)增加了1倍图版本并将前人的结晶融合了一下。本插件适用于单行文本,段落文本或多行文本会非常丑(系统自带行间距丑到哭),涉及到多行文本请 ...