/hugo-theme-typography

hugo theme

Primary LanguageSCSSMIT LicenseMIT

hugo-theme-typography

Screenshot

WIP

Upstream:

Fork notes

主要是为了让它长得更像原来的 Hexo 主题。本来想自己重新写一遍，写到一半实在懒得了。

  • 移除了 Live2D-Widget，APlayer，以及其余的（我觉得）不是很合适这个主题的部件
  • 新增了 example site（不完整，比如没有照片）
  • 新增了一大堆可更换的颜色主题，亮暗都有
  • Valine 已经停止更新，换到 Waline（但其实我也不用，没法测试）
  • 新增了 Mobile footer
  • 新增了文章列表和文章内的翻页样式
  • 修改了 TOC 的样式
  • Pin posts to top (set weight=-1 in front matter)
  • Taxonomy post list
  • Code block style
  • menu config
  • (?) Light/dark mode switcher

Features

  • Comment systems (not tested)
    • Disqus
    • Gitalk
    • Waline
  • Site-wide search with Pagefind
    • Extra configurations are needed in order to use this feature. See Pagefind | loikein's wiki for more details.
    • Setting [params] search=false to turn off search completely.

Config

hugo.toml

Basis

Ref: Site methods | Hugo

  • baseURL: https://example.com
  • theme: hugo-theme-typography (this theme is not Hugo Module ready)
  • title: Title of your website
  • copyright: Can use Markdown

.

Ref: Multilingual mode | Hugo

  • hasCJKLanguage: Improves word count for CJK languages
  • defaultContentLanguage: Must be one of the language codes in languages.lang
  • languages.lang
    • lang: Enter the primary subtag of the RFC 5646 tag for your contents, NO subsequent sub-tags
    • languageCode: Enter the RFC 5646 tag for your contents, including any subsequent sub-tags

.

  • mainSections: List of folders under /content/ to be considered as main sections.
  • paginate: Number of items per page in paginated lists
  • enableEmoji: true to use emoji shortcuts
  • enableRobotsTXT: Generates an allow-all robots.txt
  • enableGitInfo: Use git commit info to generate lastmod info

[Params]

Ref: Params | Hugo

TBE

  • search: true to activate the Pagefind search page.
  • NoIndex: true to prevent showing up in Google SERP (site-wide)
    • DO NOT set enableRobotsTXT if you want to use this option

Custom CSS

In your own website repo, create ./assets/scss/_custom.scss, and put your code there.

Example 1: Change symbol (dinkus) & style of <hr>

.post-content hr::after {
  content: "∗ ∗ ∗";
  text-shadow: 0 0 .75px $global-font-color;
}

Example 2: Adjust where to break line for site subtitle

.header-container .site-title h3 {
  max-inline-size: 11em;
}

Example 3: Change over-scroll behaviour

html,
.main-container {
  overscroll-behavior-y: none;
}

Custom HTML head

In your own website repo, create ./layouts/partials/body_head_custom.html, and put your code there.

Example: links to favicon assets (using files generated by favicon.io)

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">