Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for displaying TOC on the side of page #398

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

koktlzz
Copy link

@koktlzz koktlzz commented Aug 12, 2022

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.

@Anthem-whisper
Copy link

Anthem-whisper commented Aug 17, 2022

You are my Goddddd!

@huoranger
Copy link

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

@koktlzz
Copy link
Author

koktlzz commented Aug 29, 2022

@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一个空白博客做下测试。

@jlhg
Copy link
Contributor

jlhg commented Sep 12, 2022

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

@koktlzz
Copy link
Author

koktlzz commented Sep 13, 2022

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants