meme主题正文添加侧边栏

前言

天下memer苦无侧边栏久矣，终于在一次冲浪中看到原来早就有大佬实现了侧边栏😢

一些自定义

有了侧边栏固然已经解了最主要的问题，但从个人角度来看还是存在一些需要改善的地方，本章就来记录一下DIY的过程。

侧边栏默认显示

PR中侧边栏默认隐藏，只有鼠标放到对应位置才会展示，对于身为懒🐶的我来说这个体验还是不太能接受的。

assets/scss/layout/_single.scss对应内容改为如下即可

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// 修改前
opacity: 0;
transition: opacity 0.2s ease-in-out;

&:hover {
    opacity: 1;
}


// 修改后
opacity: 1;
transition: opacity 0.2s ease-in-out;

// &:hover {
//     opacity: 1;
// }

修改样式

添加竖线

1、在assets/scss/layout/_single.scss添加css

1
2
3
4
5
6


.vertical-line {
    width: 1px;
    height: 100px;
    border-left: 1px solid transparent; /* 必须设置一个透明的边框 */
    border-image: linear-gradient(to bottom, yellow, green) 1 100%; /* 渐变色 */
}

2、在themes/meme/layouts/partials/utils/toc.html中修改一行

1
2
3
4
5


<!-- 修改前 -->
{{- $regexReplacementTOC := `$1 id="contents:$3"$2` -}}

<!-- 修改后 -->
{{- $regexReplacementTOC := `$1 class="vertical-line" id="contents:$3"$2&nbsp;&nbsp;` -}}

Reference

Add support for displaying TOC on the side of page