Skip to content

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

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

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;
    }
}

@reuixiy reuixiy force-pushed the main branch 3 times, most recently from 2254ba4 to 535b7f6 Compare February 19, 2025 04:12
@reuixiy reuixiy requested a review from Copilot June 7, 2025 05:02
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds support for positioning the TOC on the side of the page based on a new configuration variable.

  • Introduces a new parameter (displayTOConSide) to control TOC placement.
  • Adjusts the TOC rendering logic in the post template and updates styling in SCSS files accordingly.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
layouts/partials/pages/post.html Adds logic to conditionally render TOC on the side or top.
config-examples/zh-cn/config.toml Adds a new configuration entry for TOC placement.
assets/scss/main.scss Introduces a variable to set TOC CSS position.
assets/scss/layout/_single.scss Applies the TOC position variable to the TOC container.
Comments suppressed due to low confidence (2)

layouts/partials/pages/post.html:4

  • [nitpick] Consider renaming $displayTOConSide to a more conventional variable name (e.g., $displayTocOnSide) for improved clarity and consistency with common naming practices.
{{ $displayTOConSide := default .Site.Params.displayTOConSide -}}

layouts/partials/pages/post.html:39

  • [nitpick] The TOC inclusion logic appears in two separate condition blocks; consider refactoring this into a single, clear block to reduce duplication and potential maintenance overhead.
{{- if $enableTOC -}}

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