hugo-theme-meme icon indicating copy to clipboard operation
hugo-theme-meme copied to clipboard

Add support for displaying TOC on the side of page

Open koktlzz opened this issue 2 years ago • 5 comments

Due to #64, #368 and #387, many users want to display TOC on the side of their pages. I add a variable called displayTOConSide. If it's set to false(by default), the TOC will be displayed on the top of the article; If it's set to true, the TOC will be displayed on the side of the article.

The position of TOC will be set to fixed if displayTOConSide is true. Users can DIY their style of TOC(such as on the left or right) by modifing contents in _single.scss.

koktlzz avatar Aug 12 '22 08:08 koktlzz

You are my Goddddd!

Anthem-whisper avatar Aug 17 '22 03:08 Anthem-whisper

我按照你的来不知道为什么不生效,请问是否有一个可以参考的操作文档呢

huoranger avatar Aug 27 '22 13:08 huoranger

@Coder-itCheng 我没看到你博客的仓库,所以我也不清楚你怎么改的。可以参考更新 MemE 的方法,不过要把 clone 的仓库链接换成我 fork 的仓库:

rm -rf themes/meme
git clone --depth 1 https://github.com/koktlzz/hugo-theme-meme.git themes/meme

最后在config.toml中添加displayTOConSide = true

注意这样做的话你之前魔改过的配置就没了,可以先hugo new一个空白博客做下测试。

koktlzz avatar Aug 29 '22 13:08 koktlzz

本來也想照這個改,但發現這項改動在手機版會出現重疊的情況,不利於手機版閱讀。

jlhg avatar Sep 12 '22 15:09 jlhg

本來也想照這個改,但發現這項改動在手機版會出現重疊的情況,不利於手機版閱讀。

这个问题我也考虑过,目前的解决方案是屏幕宽度小于$postWidth时隐藏目录:

@media screen and (max-width: $postWidth) {
    .contents {
        display: none;
    }
}

koktlzz avatar Sep 13 '22 02:09 koktlzz