Moriium

Guide for Template - Getting Started

Tue, 02 Oct 2001 00:00:00 GMT

Tip: For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2020-02-02
description: This is the first post of my new Astro blog.
cover: ./cover.jpg
coverInContent: false
tags: []
category: Guides
comment: true
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`pinned`	Whether this post is pinned to the top of the post list.
`description`	A short description of the post. Displayed on index page.
`cover`	The cover image path of the post. <br/>1. Start with `http://` or `https://`: For web image <br/>2. Start with `/`: For image in `public` dir <br/>3. With none of the prefixes: Relative to the markdown file
`coverInContent`	Whether to show the cover image in the post content.
`tags`	The tags of the post.
`category`	The category of the post <br/>1. Single category: `category: Guides` <br/>2. Multi-category: `category: [Guides, Getting Started]`
`licenseName`	The license name for the post content.
`author`	The author of the post.
`sourceLink`	The source link or reference for the post content.
`comment`	Whether to enable comment for this post. Default is `true`.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.jpg
    └── index.md

Guide for Template - Advanced Customization

Sat, 10 Feb 2024 00:00:00 GMT

This guide covers advanced customization options and features available in the Twilight template, from global configurations to specialized Markdown extensions.

Global Configuration

The twilight.config.yaml file is the heart of your blog's configuration. Here are some advanced settings you can tweak:

Site & Localization

Language & Translation: Enable client-side translation using site.translate.enable. You can choose different services and configure auto-detection.
Custom Fonts: Add your own fonts by providing a CSS link or file path under site.font.

Visual Effects

Theme Color: Change the primary color of your blog by adjusting the site.themeColor.hue (0-360).
Wallpaper Modes: Choose between banner, fullscreen, or none. You can also enable a carousel for multiple wallpapers with the kenBurns effect.
Waves Effect: Toggle the animated water ripple effect on the banner using site.wallpaper.banner.waves.enable.
Particle Effects: Enable floating particles in the background with particle.enable.

UI

Navbar Transparency: Adjust site.wallpaper.banner.navbar.transparentMode between semi, full, or semifull.
Sidebar Widgets: Reorder or toggle sidebar components like profile, announcement, categories, tags, toc, and statistics in sidebar.components.

Markdown Extensions

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Spr-Aachen/Twilight"}

Create a GitHub repository card with the code ::github{repo="Spr-Aachen/Twilight"}.

::github{repo="Spr-Aachen/Twilight"}

Music Cards

Online ::music{meting="https://meting.spr-aachen.com/api?server=netease&type=song&id=1390882521"}

::music{meting="https://meting.spr-aachen.com/api?server=netease&type=song&id=1390882521"}

Local ::music{title="深海之息" artist="Youzee Music" cover="https://p1.music.126.net/PhKOqFtljgHDDpKYM2ADUA==/109951169858309716.jpg" audio="assets/music/深海之息.m4a" lrc="assets/music/深海之息.lrc"}

::music{title="深海之息" artist="Youzee Music" cover="https://p1.music.126.net/PhKOqFtljgHDDpKYM2ADUA==/109951169858309716.jpg" audio="assets/music/深海之息.m4a" lrc="assets/music/深海之息.lrc"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized. :::note[MY CUSTOM TITLE] This is a note with a custom title. :::
```
:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::
```
GitHub Syntax

[!TIP] The GitHub syntax is also supported.
```
> [!TIP]
> The GitHub syntax is also supported.
```
Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!
```
The content :spoiler[is hidden **ayyy**]!
```

For more details, check the Documentation.

Video Example

Thu, 02 Dec 2021 00:00:00 GMT

Instructions

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file as below:

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/yrn7eInApnc?si=gGZeFbPcfMpJ1uV3_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

Examples

YouTube

Bilibili

Mermaid Example

Wed, 02 Nov 2011 00:00:00 GMT

Complete Guide to Markdown with Mermaid Diagrams

This article demonstrates how to create various complex diagrams using Mermaid in Markdown documents, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and state diagrams.

Flowchart Example

Flowcharts are excellent for representing processes or algorithm steps.

graph TD
    A[Start] --> B{Condition Check}
    B -->|Yes| C[Process Step 1]
    B -->|No| D[Process Step 2]
    C --> E[Subprocess]
    D --> E
    subgraph E [Subprocess Details]
        E1[Substep 1] --> E2[Substep 2]
        E2 --> E3[Substep 3]
    end
    E --> F{Another Decision}
    F -->|Option 1| G[Result 1]
    F -->|Option 2| H[Result 2]
    F -->|Option 3| I[Result 3]
    G --> J[End]
    H --> J
    I --> J

Sequence Diagram Example

Sequence diagrams show interactions between objects over time.

sequenceDiagram
    participant User
    participant WebApp
    participant Server
    participant Database

    User->>WebApp: Submit Login Request
    WebApp->>Server: Send Auth Request
    Server->>Database: Query User Credentials
    Database-->>Server: Return User Data
    Server-->>WebApp: Return Auth Result
    
    alt Auth Successful
        WebApp->>User: Show Welcome Page
        WebApp->>Server: Request User Data
        Server->>Database: Get User Preferences
        Database-->>Server: Return Preferences
        Server-->>WebApp: Return User Data
        WebApp->>User: Load Personalized Interface
    else Auth Failed
        WebApp->>User: Show Error Message
        WebApp->>User: Prompt Re-entry
    end

Gantt Chart Example

Gantt charts are perfect for displaying project schedules and timelines.

gantt
    title Website Development Project Timeline
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section Design Phase
    Requirements Analysis      :a1, 2023-10-01, 7d
    UI Design                 :a2, after a1, 10d
    Prototype Creation        :a3, after a2, 5d
    
    section Development Phase
    Frontend Development      :b1, 2023-10-20, 15d
    Backend Development       :b2, after a2, 18d
    Database Design           :b3, after a1, 12d
    
    section Testing Phase
    Unit Testing              :c1, after b1, 8d
    Integration Testing       :c2, after b2, 10d
    User Acceptance Testing   :c3, after c2, 7d
    
    section Deployment
    Production Deployment     :d1, after c3, 3d
    Launch                    :milestone, after d1, 0d

Class Diagram Example

Class diagrams show the static structure of a system, including classes, attributes, methods, and their relationships.

classDiagram
    class User {
        +String username
        +String password
        +String email
        +Boolean active
        +login()
        +logout()
        +updateProfile()
    }
    
    class Article {
        +String title
        +String content
        +Date publishDate
        +Boolean published
        +publish()
        +edit()
        +delete()
    }
    
    class Comment {
        +String content
        +Date commentDate
        +addComment()
        +deleteComment()
    }
    
    class Category {
        +String name
        +String description
        +addArticle()
        +removeArticle()
    }
    
    User "1" -- "*" Article : writes
    User "1" -- "*" Comment : posts
    Article "1" -- "*" Comment : has
    Article "1" -- "*" Category : belongs to

State Diagram Example

State diagrams show the sequence of states an object goes through during its life cycle.

stateDiagram-v2
    [*] --> Draft
    
    Draft --> UnderReview : submit
    UnderReview --> Draft : reject
    UnderReview --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Published --> Draft : retract
    
    state Published {
        [*] --> Active
        Active --> Hidden : temporarily hide
        Hidden --> Active : restore
        Active --> [*]
        Hidden --> [*]
    }
    
    Archived --> [*]

Pie Chart Example

Pie charts are ideal for displaying proportions and percentage data.

pie title Website Traffic Sources Analysis
    "Search Engines" : 45.6
    "Direct Access" : 30.1
    "Social Media" : 15.3
    "Referral Links" : 6.4
    "Other Sources" : 2.6

Conclusion

Mermaid is a powerful tool for creating various types of diagrams in Markdown documents. This article demonstrated how to use flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts. These diagrams can help you express complex concepts, processes, and data structures more clearly.

To use Mermaid, simply specify the mermaid language in a code block and describe the diagram using concise text syntax. Mermaid will automatically convert these descriptions into beautiful visual diagrams.

Try using Mermaid diagrams in your next technical blog post or project documentation - they will make your content more professional and easier to understand!