Links

To use this feature, add layout: links to the page’s front matter, then create a links.<lang>.json file in the same page bundle directory.

Categorized format (recommended)

Use an array of category objects. Each object has a title, a links array, and an optional compact flag. Categories are displayed in the order they appear in the array.

Standard category:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


[
  {
    "title": "Friends",
    "shuffle": true,
    "links": [
      {
        "title": "GitHub",
        "description": "GitHub is the world's largest software development platform.",
        "website": "https://github.com",
        "image": "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
      }
    ]
  }
]

Compact category — set compact: true to render a dense icon-grid (6 per row on desktop) showing only avatar and name:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


[
  {
    "title": "Cryosleep Pod",
    "compact": true,
    "links": [
      {
        "title": "Reddit",
        "website": "https://www.reddit.com",
        "image": "https://www.reddit.com/favicon.ico"
      }
    ]
  }
]

Both category styles can be mixed freely in the same array.

Flat array format

A flat array of link objects (without title/links wrapper) is also supported and will be rendered as a single uncategorized standard grid:

1
2
3
4
5
6
7
8


[
  {
    "title": "GitHub",
    "description": "GitHub is the world's largest software development platform.",
    "website": "https://github.com",
    "image": "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
  }
]

Supported fields

Category fields

Field	Required	Description
`title`	Yes	Category heading
`links`	Yes	Array of link objects
`compact`	No	`true` to render a dense icon-grid (avatar + name only)
`shuffle`	No	`true` to randomly reorder links within this category on each page load

Link fields

Field	Required	Description
`title`	Yes	Display name of the link
`website`	Yes	Target URL
`description`	No	Short description; falls back to the URL
`image`	No	Avatar — local filename or external URL
`alt`	No	Alt text for the avatar image

For multilingual sites, create one file per language: links.en.json, links.zh.json, etc.

Friends

GitHub

DEV Community

Hacker News

Lobsters

One-way Follow

Overreacted

Julia Evans

Hillel Wayne

Useful Resources

TypeScript

MDN Web Docs

Hugo

Cloudflare

Cryosleep Pod