Knowledge Graph

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

Installation & Configuration

Pick one of these methods to set up.

Git Submodule

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

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

Usage

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 README.