# Knowledge Graph

Knowledge Graph is a relational graph between articles, providing a visual representation of [backlink][backlink] and taxonomy relationships. Yore supports [Hugo Knowledge Graph][hkg], you only need to install it and enable the settings, no additional HTML/CSS configuration is required.

## Installation & Configuration

Pick one of these methods to set up.

### Git Submodule

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

Configure `hugo.yaml`:

```yaml
theme:
  - hugo-knowledge-graph
  - hugo-yore

outputs:
  home:
    - html
    - backlinks
    - knowledge-graph

params:
  pageKgStyle: bottom # bottom | sidebar
```

### Hugo Module

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

Configure `hugo.yaml`:

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

outputs:
  home:
    - html
    - backlinks
    - knowledge-graph

params:
  pageKgStyle: bottom # bottom | sidebar
```

### Differences from the Documentation

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

## Usage

The `pageKgStyle` setting controls where the knowledge graph widget appears: `bottom` places it at the bottom of the page, while `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][hkg] README.

[hkg]: https://github.com/ZhenShuo2021/hugo-knowledge-graph
[backlink]: /docs/70-features/130-backlinks/index.md