学习一手CSS中的clip-path
前几天要做一个过场动画,于是选择了使用clip-path的circle来进行元素裁剪实现,进而浅浅学习一下
从Notion创建一个博客
很早之前就想弄这个了,但当时限于技术,一直拖到了现在
设计模式之单例模式
单例模式时一种较为简单的设计模式,在js中可使用全局对象进行创建,而无需像其他语言中需要先定义类再创建实例等复杂操作。
Vue3学习笔记
之前只学了vue2,终于把vue3给补上了
添加一个留言弹幕页面
搞得像直播间弹幕一样,TuT
好耶!是夏天云彩的味道!
这气温变化是真滴大,前天几度,今天直接二十多!
关于JavaScript继承与原型链的一些理解
JavaScript的继承机制与其原型链的使用与理解
悬浮导航(测试)
想法
来源于手机上的悬浮导航
想法:今天看Akilar关于文章页上下篇文章按钮的调整,突然想到可以将这些操作与手机上的悬浮导航结合,然后这个就开始了…
这个可以与自定义右键菜单互补,PC端启用右键菜单,移动端启用悬浮导航
当前
左滑:返回上一页面
右滑:进入下一页面
上滑:回到顶部
下滑:滚到评论或者页脚
点击:小屏在文章页会显示菜/隐藏目录
长按:可移动
上述操作时会有消息提示将会执行的事件
代码
直接写到一个js里了
欢迎反馈Bug😉
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271 ...
给分类与标签页面添加导航栏
预览
来源在逛博客的过程中,发现几个小伙伴的标签\分类页面都有一个导航条,可以在标签\分类页面直接跳转到其他标签\分类
比如:HEO、Eurkon
思路
对于页面结构,可以使用hexo&butterfly的函数进行生成
当前分类\标签选中:这个可以根据当前的URL来判断是哪一个标签\分类,然后将其加上类checked
最后给导航条添加一个滑动
魔改结构与事件
进入...theme/butterfly/layout/category.pug,修改如下
12345678910111213141516171819202122232425262728block content if theme.category_ui == 'index' include ./includes/mixins/post-ui.pug #recent-posts.recent-posts.category_ui +postUI include includes/pagination.pug else include ./includes/ ...
自定义右键菜单
开发中…
效果预览
写在前面我这里使用用的图标为阿里图标:i.iconfont.icon-xxx,你可自行替换类名将其设置为font awesome的图标
为了偷懒,js中还引用了jQuery,请在使用前将其引入或自行将js代码改为原生js
结构
首先,想要一个右键菜单,就得向页面中插入一个Dom结构
因为是右键唤醒菜单,与页面其他元素无关联,所以可以将此结构直接插入在body下
适配于butterfly主题,即新建一个rightmenu.pug文件(见下方),位置放在layout文件夹中即可
然后在themes/butterfly/layout/includes/layout.pug中引入(注意缩进)
1234567891011121314doctype htmlhtml(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside) head include ...
将博客主题改为了糖豆人风格
直接照着糖豆人UI写css,夜间模式颜色真难调!
博客搭建+改装
记录一下本博客的坎坷历程YaY