归档页年份添加干支与生肖
瀑布流书影展条目
参考:Butterfly的魔改教程:即刻短文页 | 爱吃肉的猫
文章内显示豆瓣条目::木木木木木
Obsidian
Obsidian+Git完美维护Hexo博客 - 知乎
obsidian文章发布到hexo攻略 - 简书
导航栏右侧放置图标按钮
浏览网站时养成了惯性,想将默认悬浮的rightside
按钮里的夜间模式和阅读模式移到顶部导航栏右侧,于是动手做了一下。
注:DIY时使用的butterfly主题版本为4.10.0
1、修改\layout\includes\rightside.pug
,删除相关按钮。
2、修改\layout\includes\header\nav.pug
,在小屏导航菜单按钮#toggle-menu
之前加入以下代码,并使#toggle-menu
成为其子项:
#nav-r
a#darkmode.iic(type="button" title=_p('rightside.night_mode_title'))
include ../../ri/moon.svg
if is_post()
a#readmode.iic(type="button" title=_p('rightside.readmode_title'))
include ../../ri/book-open-line.svg
这里include ../../ri/moon.svg
、include ../../ri/book-open-line.svg
引入了自定的本地 svg 图标,可替换为i标签图标。
3、修改\source\js\main.js
,定位到側邊欄sub-menu 展開/收縮
之前,加入以下代码(参考3.5.1版本的main.js
代码):
document.getElementById('nav-r').addEventListener('click', function (e) {
const $target = e.target.id || e.target.parentNode.id
switch ($target) {
case 'readmode':
rightSideFn.readmode()
break
case 'darkmode':
rightSideFn.darkmode()
break
default:
break}})
4、修改\source\css\_layout\head.styl
(或引入自制css
),加入以下样式设置:
#nav
#nav-r
display:flex
display:-webkit-flex
flex-direction:row
align-items:center
position:relative
right:0
z-index:104
transition: all .5s
+maxWidth768()
margin-right:6%
.iic
display:inline-flex
align-items:center
justify-content:center
width: w = 2.1rem
height:w
border-radius:$r
background:var(--card-bg)
border:$b
&:hover
background-color:var(--wite)
颜色大小背景啥的改成自己喜欢的就好啦。
搞 定 。