Aoyuki

Aoyuki Config Reference

Wed, 14 Jan 2026 00:00:00 GMT

The config is a YAML file located at `./aoyuki.config.ts` and is used to configure the behaviour of Aoyuki. See the [Front Matter Reference](./1fe28798) for how to configure a blog post.
# Aoyuki Config Reference ## Title The title is a string that represents the title of the site. It is required. ## SubTitle The subtitle is a string that represents the subtitle of the site. It is required. ## Brand Title The brand title is a string that represents the brand title of the site. It is required. ## Description The description is a string that represents the description of the site. It is required. ## Site The site is a string that represents the site of the site. It is required. ## Locale The locale is a string that represents the locale of the site. It is required. ## NavLinks The navlinks are an array of objects that represents the navigation links of the site. It is required. ## Username The username is a string that represents the username of the site's author, see it in the side bar. It is required. ## Sign The sign is a string that represents the sign/bio of the site's author, see it in the side bar. It is required. ## Avatar URL The avatar URL is a string that represents the avatar URL of the site's author, see it in the side bar. It is required. ## Social Links The social links are an array of objects that represents the social links of the site's author, see it in the side bar. It is required. ## Max Sidebar Category Chip The max sidebar category chip is a number that represents the max sidebar category chip of the site. It is required. ## Max Sidebar Tag Chip The max sidebar tag chip is a number that represents the max sidebar tag chip of the site. It is required. ## Max Footer Category Chip The max footer category chip is a number that represents the max footer category chip of the site. It is required. ## Max Footer Tag Chip The max footer tag chip is a number that represents the max footer tag chip of the site. It is required. ## Tab Title Format The tab title format is a string that represents the tab title format of the site. It is required. ## Tab Title Format Fallback The tab title format fallback is a string that represents the tab title format fallback of the site. It is required. ## Banners The banners are an array of objects that represents the banners of the site. It is required. ## Slug Mode The slug mode is a string that represents the slug mode of the site. It is required. ## License The license is an object that represents the license of the site. It is required. ## Banner Style The banner style is a string that represents the banner style of the site. It is required.

Include Videos in Posts

Thu, 11 Dec 2025 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file. ```yaml --- title: Include Videos in Posts published: 2025-12-11 // ... --- ``` ## YouTube ## Bilibili ## Odysee

Front Matter Reference

Tue, 13 Jan 2026 00:00:00 GMT

The front matter is a YAML block at the beginning of a blog post's markdown file. It contains metadata about the post, such as the title, description, cover image, tags, category, etc. This post showcases the basic reference of how to use the front matter correctly and what values are expected and possible. The full front matter config can be found at `src/content.config.ts`.
# Example Front Matter ```yaml --- title: Front Matter Reference published: 2026-01-13 description: This post showcases how to use front matter in a blog post. cover: '/assets/images/banners/98431621_p0_master1200.jpg' coverCredit: {text: "Magic Power City - Gilsun", url: 'https://www.pixiv.net/en/artworks/98431621'} tags: [Example, Reference, Front Matter] hex: '#32a852' category: Examples draft: false licenseName: "MIT License" author: "wlft" sourceLink: "https://github.com/wlft/aoyuki" licenseUrl: "https://github.com/wlft/aoyuki/blob/main/LICENSE" --- ```
# Reference ## Title The title is a string that represents the title of the post. It is required. ```yaml title: Front Matter Reference ``` ## Published The published date is a string that represents the date the post was published. It is required. ```yaml published: 2026-01-13 ``` Or, to include hours, minutes, and seconds: ```yaml published: 2026-01-13T07:04:20.000Z ``` ## Description The description is a string that represents the description of the post. It is optional. ```yaml description: This post showcases how to use front matter in a blog post. ``` ## Cover The cover is a string that represents the cover image of the post. It is optional. ```yaml cover: '/assets/images/banners/98431621_p0_master1200.jpg' ``` ## Cover Credit The cover credit is an object that represents the credit of the cover image. It is optional. ```yaml coverCredit: {text: "Magic Power City - Gilsun", url: 'https://www.pixiv.net/en/artworks/98431621'} ``` ## Tags \> The tags are an array of strings that represents the tags of the post. It is optional. ```yaml tags: [Example, Reference, Front Matter] ``` ## Hex The hex is a string that represents the hex color of the post. It is optional. ```yaml hex: '#32a852' ``` ## Category The category is a string that represents the category of the post. It is optional. ```yaml category: Examples ``` ## Draft The draft is a boolean that represents whether the post is a draft. It is optional. ```yaml draft: false ``` ## License Name The license name is a string that represents the license name of the post. It is optional. ```yaml licenseName: "Unlicensed" ``` ## Author The author is a string that represents the author of the post. It is optional. ```yaml author: emn178 ``` ## Source Link The source link is a string that represents the source link of the post. It is optional. ```yaml sourceLink: "https://github.com/wlft/aoyuki" ``` ## License URL The license URL is a string that represents the license URL of the post. It is optional. ```yaml licenseUrl: "https://github.com/wlft/aoyuki" ```

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

# An h1 header Paragraphs are separated by a blank line. 2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists look like: - this one - that one - the other one Note that --- not considering the asterisk --- the actual text content starts at 4-columns in. > Block quotes are > written like so. > > They can span multiple paragraphs, > if you like. Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺ ## An h2 header Here's a numbered list: 1. first item 2. second item 3. third item Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample: # Let me re-iterate ... for i in 1 .. 10 { do-something(i) } As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like: ``` define foobar() { print "Welcome to flavor country!"; } ``` (which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it: ```python import time # Quick, count to ten! for i in range(10): # (but not *too* quick) time.sleep(0.5) print i ``` ### An h3 header Now a nested list: 1. First, get these ingredients: - carrots - celery - lentils 2. Boil some water. 3. Dump everything in the pot and follow this algorithm: find wooden spoon uncover pot stir cover pot balance wooden spoon precariously on pot handle wait 10 minutes goto first step (or shut off burner when done) Do not bump wooden spoon or it will fall. Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above). Here's a link to [a website](http://foo.bar), to a [local doc](local-doc.html), and to a [section heading in the current doc](#an-h2-header). Here's a footnote [^1]. [^1]: Footnote text goes here. Tables can look like this: size material color --- 9 leather brown 10 hemp canvas natural 11 glass transparent Table: Shoes, their sizes, and what they're made of (The above is the caption for the table.) Pandoc also supports multi-line tables: --- keyword text --- red Sunsets, apples, and other red or reddish things. green Leaves, grass, frogs and other things it's not easy being. --- A horizontal rule follows. --- Here's a definition list: apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe. Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.) Here's a "line block": | Line one | Line too | Line tree and images can be specified like so: [//]: # '![example image](./demo-banner.png "An exemplary image")' Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns: $$I = \int \rho R^{2} dV$$ And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.

Markdown Tutorial

Mon, 20 Jan 2025 00:00:00 GMT

# Markdown Tutorial A markdown example shows how to write a markdown file. This document integrates core syntax and extensions (GMF). - [Block Elements](#block-elements) - [Paragraphs and Line Breaks](#paragraphs-and-line-breaks) - [Headers](#headers) - [Blockquotes](#blockquotes) - [Lists](#lists) - [Code Blocks](#code-blocks) - [Horizontal Rules](#horizontal-rules) - [Table](#table) - [Span Elements](#span-elements) - [Links](#links) - [Emphasis](#emphasis) - [Code](#code) - [Images](#images) - [Strikethrough](#strikethrough) - [Miscellaneous](#miscellaneous) - [Automatic Links](#automatic-links) - [Backslash Escapes](#backslash-escapes) - [Inline HTML](#inline-html) ## Block Elements ### Paragraphs and Line Breaks #### Paragraphs HTML Tag: `

` One or more blank lines. (A blank line is a line containing nothing but **spaces** or **tabs** is considered blank.) Code: This will be inline. This is second paragraph. Preview: --- This will be inline. This is second paragraph. --- #### Line Breaks HTML Tag: `
` End a line with **two or more spaces**. Code: This will be not inline. Preview: --- This will be not inline. --- ### Headers Markdown supports two styles of headers, Setext and atx. #### Setext HTML Tags: `

`, `

` “Underlined” using equal signs (=) as `

` and dashes (-) as `

` in any number. Code: This is an H1 ============= This is an H2 ------------- Preview: --- # This is an H1 ## This is an H2 --- #### atx HTML Tags: `

`, `

` Uses 1-6 hash characters (#) at the start of the line, corresponding to `

` - `

`. Code: # This is an H1 ## This is an H2 ###### This is an H6 Preview: --- # This is an H1 ## This is an H2 ###### This is an H6 --- Optionally, you may “close” atx-style headers. The closing hashes **don’t need to match** the number of hashes used to open the header. Code: # This is an H1 # ## This is an H2 ## ### This is an H3 ###### Preview: --- # This is an H1 ## This is an H2 ### This is an H3 --- ### Blockquotes HTML Tag: `

` Markdown uses email-style **>** characters for blockquoting. It looks best if you hard wrap the text and put a > before every line. Code: > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. > > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse > id sem consectetuer libero luctus adipiscing. Preview: --- > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. > > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse > id sem consectetuer libero luctus adipiscing. --- Markdown allows you to be lazy and only put the > before the first line of a hard-wrapped paragraph. Code: > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing. Preview: --- > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse > id sem consectetuer libero luctus adipiscing. --- Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by adding additional levels of >. Code: > This is the first level of quoting. > > > This is nested blockquote. > > Back to the first level. Preview: --- > This is the first level of quoting. > > > This is nested blockquote. > > Back to the first level. --- Blockquotes can contain other Markdown elements, including headers, lists, and code blocks. Code: > ## This is a header. > > 1. This is the first list item. > 2. This is the second list item. > > Here's some example code: > > return shell_exec("echo $input | $markdown_script"); Preview: --- > ## This is a header. > > 1. This is the first list item. > 2. This is the second list item. > > Here's some example code: > > return shell_exec("echo $input | $markdown_script"); --- ### Lists Markdown supports ordered (numbered) and unordered (bulleted) lists. #### Unordered HTML Tag: `
` Unordered lists use **asterisks (\*)**, **pluses (+)**, and **hyphens (-)**. Code: * Red * Green * Blue Preview: --- - Red - Green - Blue --- is equivalent to: Code: + Red + Green + Blue and: Code: - Red - Green - Blue #### Ordered HTML Tag: `
` Ordered lists use numbers followed by periods: Code: 1. Bird 2. McHale 3. Parish Preview: --- 1. Bird 2. McHale 3. Parish --- It’s possible to trigger an ordered list by accident, by writing something like this: Code: 1986. What a great season. Preview: --- 1986. What a great season. --- You can **backslash-escape (\\)** the period: Code: 1986\. What a great season. Preview: --- 1986\. What a great season. --- #### Indented ##### Blockquote To put a blockquote within a list item, the blockquote’s > delimiters need to be indented: Code: * A list item with a blockquote: > This is a blockquote > inside a list item. Preview: --- - A list item with a blockquote: > This is a blockquote > inside a list item. --- ##### Code Block To put a code block within a list item, the code block needs to be indented twice — **8 spaces** or **two tabs**: Code: * A list item with a code block: Preview: --- - A list item with a code block: --- ##### Nested List Code: * A * A1 * A2 * B * C Preview: --- - A - A1 - A2 - B - C --- ### Code Blocks HTML Tag: `` Indent every line of the block by at least **4 spaces** or **1 tab**. Code: This is a normal paragraph: This is a code block. Preview: --- This is a normal paragraph: This is a code block. --- A code block continues until it reaches a line that is not indented (or the end of the article). Within a code block, **_ampersands (&)_** and angle **brackets (< and >)** are automatically converted into HTML entities. Code: © 2004 Foo Corporation Preview: --- © 2004 Foo Corporation --- Following sections Fenced Code Blocks and Syntax Highlighting are extensions, you can use the other way to write the code block. #### Fenced Code Blocks Just wrap your code in ` ``` ` (as shown below) and you won't need to indent it by four spaces. Code: Here's an example: ``` function test() { console.log("notice the blank line before this function?"); } ``` Preview: --- Here's an example: ``` function test() { console.log("notice the blank line before this function?"); } ``` --- #### Syntax Highlighting In your fenced block, add an optional language identifier and we'll run it through syntax highlighting ([Support Languages](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml)). Code: ```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ``` Preview: --- ```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ``` --- ### Horizontal Rules HTML Tag: `` Places **three or more hyphens (-), asterisks (\*), or underscores (\_)** on a line by themselves. You may use spaces between the hyphens or asterisks. Code: * * * *** ***** - - - --------------------------------------- ___ Preview: --- --- --- --- --- --- --- --- ### Table HTML Tag: `` It's an extension. Separates column by **pipe (|)** and header by **dashes (-)**, and uses **colon (:)** for alignment. The outer **pipes (|)** and alignment are optional. There are **3 delimiters** each cell at least for separating header. Code: ``` | Left | Center | Right | |:-----|:------:|------:| |aaa |bbb |ccc | |ddd |eee |fff | A | B ---|--- 123|456 A |B --|-- 12|45 ``` Preview: --- | Left | Center | Right | | :--- | :----: | ----: | | aaa | bbb | ccc | | ddd | eee | fff | | A | B | | --- | --- | | 123 | 456 | | A | B | | --- | --- | | 12 | 45 | --- ## Span Elements ### Links HTML Tag: `` Markdown supports two style of links: inline and reference. #### Inline Inline link format like this: `[Link Text](URL "Title")` Title is optional. Code: This is [an example](http://example.com/ "Title") inline link. [This link](http://example.net/) has no title attribute. Preview: --- This is [an example](http://example.com/ "Title") inline link. [This link](http://example.net/) has no title attribute. --- If you’re referring to a local resource on the same server, you can use relative paths: Code: See my [About](/about/) page for details. Preview: --- See my [About](/about/) page for details. --- #### Reference You could predefine link references. Format like this: `[id]: URL "Title"` Title is also optional. And the you refer the link, format like this: `[Link Text][id]` Code: [id]: http://example.com/ "Optional Title Here" This is [an example][id] reference-style link. Preview: --- [id]: http://example.com/ "Optional Title Here" This is [an example][id] reference-style link. --- That is: - Square brackets containing the link identifier (**not case sensitive**, optionally indented from the left margin using up to three spaces); - followed by a colon; - followed by one or more spaces (or tabs); - followed by the URL for the link; - The link URL may, optionally, be surrounded by angle brackets. - optionally followed by a title attribute for the link, enclosed in double or single quotes, or enclosed in parentheses. The following three link definitions are equivalent: Code: [foo]: http://example.com/ "Optional Title Here" [foo]: http://example.com/ 'Optional Title Here' [foo]: http://example.com/ (Optional Title Here) [foo]: "Optional Title Here" Uses an empty set of square brackets, the link text itself is used as the name. Code: [Google]: http://google.com/ [Google][] Preview: --- [Google]: http://google.com/ [Google][] --- ### Emphasis HTML Tags: ``, `` Markdown treats **asterisks (\*)** and **underscores (\_)** as indicators of emphasis. **One delimiter** will be ``; \*_double delimiters_ will be ``. Code: *single asterisks* _single underscores_ **double asterisks** __double underscores__ Preview: --- _single asterisks_ _single underscores_ **double asterisks** **double underscores** --- But if you surround an \* or \_ with spaces, it’ll be treated as a literal asterisk or underscore. You can backslash escape it: Code: \*this text is surrounded by literal asterisks\* Preview: --- \*this text is surrounded by literal asterisks\* --- ### Code HTML Tag: `` Wraps it with **backtick quotes (`)**. Code: Use the `printf()` function. Preview: --- Use the `printf()` function. --- To include a literal backtick character within a code span, you can use **multiple backticks** as the opening and closing delimiters: Code: ``There is a literal backtick (`) here.`` Preview: --- ``There is a literal backtick (`) here.`` --- The backtick delimiters surrounding a code span may include spaces — one after the opening, one before the closing. This allows you to place literal backtick characters at the beginning or end of a code span: Code: A single backtick in a code span: `` ` `` A backtick-delimited string in a code span: `` `foo` `` Preview: --- A single backtick in a code span: `` ` `` A backtick-delimited string in a code span: `` `foo` `` --- ### Images HTML Tag: `` Markdown uses an image syntax that is intended to resemble the syntax for links, allowing for two styles: inline and reference. #### Inline Inline image syntax looks like this: `![Alt text](URL "Title")` Title is optional. Code: ![Alt text](/path/to/img.jpg) ![Alt text](/path/to/img.jpg "Optional title") Preview: --- ![Alt text](https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp) ![Alt text](https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp "Optional title") --- That is: - An exclamation mark: !; - followed by a set of square brackets, containing the alt attribute text for the image; - followed by a set of parentheses, containing the URL or path to the image, and an optional title attribute enclosed in double or single quotes. #### Reference Reference-style image syntax looks like this: `![Alt text][id]` Code: [img id]: url/to/image "Optional title attribute" ![Alt text][img id] Preview: --- [img id]: url/to/image "Optional title attribute" ![Alt text][img id] --- ### Strikethrough HTML Tag: `` It's an extension. GFM adds syntax to strikethrough text. Code: ``` ~~Mistaken text.~~ ``` Preview: --- ~~Mistaken text.~~ --- ## Miscellaneous ### Automatic Links Markdown supports a shortcut style for creating “automatic” links for URLs and email addresses: simply surround the URL or email address with angle brackets. Code: Preview: --- --- GFM will autolink standard URLs. Code: ``` https://github.com/emn178/markdown ``` Preview: --- https://github.com/emn178/markdown --- ### Backslash Escapes Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown’s formatting syntax. Code: \*literal asterisks\* Preview: --- \*literal asterisks\* --- Markdown provides backslash escapes for the following characters: Code: \ backslash ` backtick * asterisk _ underscore {} curly braces [] square brackets () parentheses # hash mark + plus sign - minus sign (hyphen) . dot ! exclamation mark ## Inline HTML For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags. Code: This is a regular paragraph. Foo This is another regular paragraph. Preview: --- This is a regular paragraph. Foo This is another regular paragraph. --- Note that Markdown formatting syntax is **not processed within block-level HTML tags**. Unlike block-level HTML tags, Markdown syntax is **processed within span-level tags**. Code: **Work** **No Work** Preview: --- **Work** **No Work** ***

Aoyuki

Aoyuki Config Reference

Include Videos in Posts

Front Matter Reference

Markdown Example

Markdown Tutorial

`, `

` “Underlined” using **equal signs (=)** as `

` and **dashes (-)** as `

` in any number. Code: This is an H1 ============= This is an H2 ------------- Preview: --- # This is an H1 ## This is an H2 --- #### atx HTML Tags: `

`, `

`, `

`, `

`, `

`, `

` Uses 1-6 **hash characters (#)** at the start of the line, corresponding to `

` - `

` “Underlined” using equal signs (=) as `

` and dashes (-) as `

` Uses 1-6 hash characters (#) at the start of the line, corresponding to `