归档页年份添加干支与生肖

使用Lunar:一个支持阳历、阴历、佛历和道历的日历工具库

瀑布流书影展条目

参考: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.svginclude ../../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)

颜色大小背景啥的改成自己喜欢的就好啦。
搞 定 。