Knowledge Graph

Knowledge Graph visualizes backlink and taxonomy relationships between articles as an interactive graph. Yore supports Hugo Knowledge Graph (external link) with no additional HTML/CSS configuration.

Installation & Configuration Link to this heading

Pick one of these methods to set up.

Git Submodule Link to this heading

git submodule add https://github.com/ZhenShuo2021/hugo-knowledge-graph themes/hugo-knowledge-graph

Configure hugo.yaml:

theme:
  - hugo-knowledge-graph
  - hugo-yore

outputs:
  home:
    # The original outputs
    - html
    - rss
    # Add this lines
    - backlinks
    - knowledge-graph

params:
  pageKgStyle: bottom # bottom | sidebar | disable

Hugo Module Link to this heading

Make sure your project already uses Hugo modules. If not, run hugo mod init NAME first.

Configure hugo.yaml:

module:
  imports:
    - path: github.com/ZhenShuo2021/hugo-yore
    - path: github.com/ZhenShuo2021/hugo-knowledge-graph

outputs:
  home:
    # The original outputs
    - html
    - rss
    # Add this lines
    - backlinks
    - knowledge-graph

params:
  pageKgStyle: bottom # bottom | sidebar | disable

Note

Yore already includes Hugo's embedded link render hook, so you do not need to set useEmbedded = "always".

Usage Link to this heading

pageKgStyle controls where the knowledge graph widget appears. bottom places it at the bottom of the page. sidebar places it above the ToC.

Creating content/graph/_index.md will generate the full version of the knowledge graph, including legend filters and search functionality.

For detailed configuration, refer to the Hugo Knowledge Graph (external link) README.