Content
Blog
Front Matter
Blog posts will be shown on home page. A post file should be identified by layout: Post in its front matter. An example front matter for a post looks like:
---
layout: Post # required
title: A Brief History of Time # post title (required)
subtitle: From the Big Bang to Black Holes # post subtitle (optional)
date: 2020-03-31 # publish date (optional)
author: Stephen Hawking # post author (optional, will use `themeConfig.personalInfo.name` as default if it is not specified)
useHeaderImage: true # show header image in post or not (optional, default: false)
headerImage: /img/test.jpg # path to the header image (required, even if `useHeaderImage` is false, becasue header image would also be shown on home page)
headerMask: rgba(40, 57, 101, .4) # mask of the header image (optional)
headerImageCredit: Jeremy Fenske # source of the header image, like name of the author or website (optional, only works when "useHeaderImage: true")
headerImageCreditLink: https://www.artstation.com/artwork/nLY0K # link to the source of the header image (optional, only works when "useHeaderImage: true")
catalog: false # enable/disable catalog of the current page, can rewrite `themeConfig.catalog` (optional, default: true)
giscus: false # enable/disable Giscus of the current page (optional, default: true)
hide: true # hide this blog in the blog list of home page and tags page or not (optional, default: false)
tags: # post tags (optional)
- space
- physics
---
WARNING
title will be used as the first-level heading in a post, so DO NOT write a first-level heading in your post content.
TIP
Posts that with tags item in front matter will be appear on tags page.
URL
If you would like the URL of a blog be shown in the form of /post/year/month/day/post-title/, just add this line to its front matter:
---
layout: Post
title: A Brief History of Time
date: 2020-03-31
permalinkPattern: /post/:year/:month/:day/:slug/
---
See here for more details.
WARNING
When using this permalink pattern, you must specify the date in front matter or filename/dirname. See here for more details.
Excerpt
In a blog markdown file, any content above the <!-- more --> comment will be extracted, rendered as excerpt and displayed on the home page.
Documentation
Gungnir can also be used for writing documentation, refer to Documentation of VuePress for basic usage.
An example front matter for a documentation page looks likes:
---
title: A Brief History of Time # title (required)
date: 2020-03-31 # publish date (optional)
author: Stephen Hawking # author (optional, will use `themeConfig.personalInfo.name` as default if it is not specified)
giscus: false # enable/disable Giscus of the current page (optional, default: true)
---
WARNING
Again, title will be used as the first-level heading in a documentation page, so DO NOT write a first-level heading in your documentation content.
Markdown Syntax
See:
Containers
Link Card Container
Gungnir adds a new container: link card.
Syntax
The syntax of it looks like:
::: link {Icon Name | Image URL} [title](url)
description
:::
Some examples:
::: link [Introduction](/docs/basic/intro.html)
vuepress-theme-gungnir Introduction
:::
::: link {fa-github-alt} [vuepress-theme-gungnir](https://github.com/Renovamen/vuepress-theme-gungnir)
A blog theme for VuePress 2.
:::
::: link {/img/links/me.png} [My Blog](https://blog.zxh.io)
My blog 🧐, powered by VuePress 2, themed by Gungnir.
:::
Options
You can choose to hide the site domain:
// .vuepress/config.js
module.exports = {
theme: gungnirTheme({
themePlugins: {
container: {
link: {
siteDomain: false // optional, default: true
}
}
}
})
}
or disable this container:
// .vuepress/config.js
module.exports = {
theme: gungnirTheme({
themePlugins: {
container: {
link: false // optional, default: true
}
}
})
}
Other Containers
Here are some showcases of the custom containers supported by Gungnir by default:
INFO
This is an info message.
TIP
This is a tip message.
WARNING
This is a warning message.
DANGER
This is a dangerous warning message.
Show me the code.
cout << "Hello World!" << "\n";