Type Descriptions

Icon Generation

It is recommended to use RealFaviconGenerator to generate icons, download and extract the following files, and overwrite them to the /public directory:

• favicon-96x96.png
• favicon.ico
• favicon.svg

<Logo width={100} />

Single Language Mode

If you only need to use a single language for your site, you can streamline the file structure through the following steps to optimize your creative workflow.

Keep only the desired language in i18n.locales in site.config.ts, and remove other entries:

export default siteConfig({
  i18n: {
    locales: ["en"],
    defaultLocale: "en"
  },
});

content/
└── note/
    ├── en/
    │   └── post.md
    ├── ja/
    │   └── post.md
    └── zh-cn/
        └── post.md

content/
└── note/
    └── post.md

Adding a New Language

To add a language not preset in the site, please follow these configuration steps (using Klingon tlh as an example):

export default siteConfig({
  i18n: {
    locales: ["en", "zh-cn", "ja", "tlh"],
    defaultLocale: "en"
  },
});

# src/i18n/tlh/index.yaml

# Note: Add the `language` field as the display name for the current language
language: tlhIngan Hol
...

import tlh from "./tlh/index.yaml";
import tlhScript from "./tlh/script.yaml";

const translations = {
  ...,
  tlh: {
    ...tlh,
    script: tlhScript
  }
};

content/
├── note/tlh/
├── jotting/tlh/
├── information/tlh/
└── preface/tlh/

{
  name: "Noto Serif TLH",
  provider: SpecificFontProvider(),
  weights: [400, 700],
  fallbacks: ["serif"],
  cssVariable: "--font-noto-serif-tlh"
}

// src/layouts/App.astro
const mainFonts: Record<string, CssVariable> = {
  ...,
  tlh: "--font-noto-serif-tlh"
};

// Locale-specific font URLs
const fonts: Record<string, string> = {
  ...,
  tlh: "https://....otf"
};

Relative Path

This approach is beneficial for content organization and management, and Astro will optimize the images.

For example, to insert an image in image.md:

Create an image directory and move image.md into it, renaming it index.md. Astro will automatically treat index.md as the default content for that directory, so the ID remains image.

Then place image files such as photo.jpg in the image directory, forming the following file structure:

image
├── index.md
└── photo.jpg

Finally, use a relative path to insert the image in index.md:

![Image description](photo.jpg)

Photo source: Pexels

Absolute Path

Images can be stored in the /public directory, in which case Astro will not optimize them.

Insert using an absolute path:

![Favicon](/favicon-96x96.png)

External Image Hosting

If images are hosted on an external service, use the image URL directly:

![Sample image](https://picsum.photos/1600/900?random=1)

Random photos from: Picsum

Notes

"Notes" is the core section of this theme. It focuses on carrying and displaying carefully conceived, content-rich long-form works.

It is strongly recommended to publish structurally complete, deeply argued or narratively rich original articles in this section. This includes but is not limited to: in-depth book/movie reviews, thematic research, complete story creation, detailed experience sharing, systematic opinion discourse, etc.

Authors are encouraged to invest time in polishing content, pursuing depth, breadth, and quality. It is the main area for readers to obtain core valuable content.

Jottings

"Jottings" aims to provide a lightweight, immediate recording space for capturing and sharing scattered thoughts, momentary inspiration, daily observations, or brief insights.

Content form is free and flexible, usually short and concise, which can be a few sentences of insights, a scene sketch, a fragmented idea that hasn't formed a system, or immediate reading/life notes.

Information

Informational text contains four parts. If you remove the corresponding file, the corresponding area including the title will not be displayed on the site.

Insertion

Plugin: remark-ins

++Inserted content++

Inserted content

Marking

Plugin: remark-flexible-markers

==Marked content==

Marked content

Ruby

Plugin: @tuyuritio/remark-ruby

{拼音}(pīn|yīn)

拼(pīn)音(yīn)

{振り仮名}(ふ||が|な)

振(ふ)り仮(が)名(な)

Spoiler

Plugin: @tuyuritio/remark-spoiler

!!Spoiler content!!

Spoiler content

Emoji

Plugin: remark-gemoji

:wink: :cry: :laughing: :yum:

😉 😢 😆 😋

Emoji Cheat Sheet

Katex

Plugin: remark-math & rehype-katex

$e^{ix} = \cos x + i \sin x$

$e^{ix} = \cos x + i \sin x$

$$
(f*g)(t)=\int f(\tau)g(t-\tau)d\tau
$$

Footnotes

Plugin: remark-footnotes-extra

Footnote[^1]
[^1]: Footnote **can have markup**.

Footnote¹

Inline Footnote^[Inline information]

Inline Footnote²

Abbreviations

Plugin: @tuyuritio/remark-abbreviation

ABBR abbr xABBRx

*[ABBR]: Abbreviation

ABBR abbr xABBRx

GitHub Alerts

Plugin: @tuyuritio/remark-github-alert

> [!NOTE]
> General information

> [!TIP]
> Optional information

> [!IMPORTANT]
> Important information

> [!WARNING]
> Risk information

> [!CAUTION]
> Warning information

> [!NOTE] (･ρ･)ﾉ
> Custom title text

Extended Tables

Plugin: remark-extended-table

| Left Align  | Center | Right Align |    Center     |
|:----------- |:------:| -----------:| ------------- |
| Normal Cell |     Merged Cell     || Merged Column |
| Normal Cell |      2×2 Cell       ||       ^       |
| Normal Cell |          ^          ||  Normal Cell  |

Inline Element Attributes Extension

Plugin: @tuyuritio/remark-attribute

## Inline Element Attributes Extension {#custom-id}

![](https://picsum.photos/1600/900?random=1){width=300}

**Important**{.colorful} content

Important content

*Multiple*{.red .big} classes

Multiple classes

**Custom attributes**{key="This is a value"}

Custom attributes

Import Component

import Linkroll from "$components/Linkroll.astro";

<Linkroll locale={props.locale} links={links} />

• locale - Current page language code, provided by about.astro as a component prop;
• links - Array of link data, refer to subsequent steps.

Define Link Data

export const links = [
    {
        title: "Example Site",
        url: "https://example.com",
        image: "https://example.com/favicon.ico",
        description: "This is an example site",
        type: "resources"
    }
];

Each link object contains the following fields:

• title*: Display title
• url*: Target address
• type*: Category type, available options include:
  • resources - Tools & Resources
  • community - Organizations & Projects
  • insights - Media & Inspiration
  • technology - Technology & Development
  • expertise - Professional & Academic
  • creative - Design & Creativity
  • lifestyle - Life & Hobbies
  • general - General & Others
• image: Target site icon URL
• description: Description text

* indicates required fields.