cirry

cirry

我的原生博客地址：https://cirry.cn
HomeArchives

Astro-Yi Theme Configuration and Writing Tips

213
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The article provides basic configuration and Markdown writing tips for the Astro-Yi theme, including essential configurations, blog information settings, comment system setup, sponsorship system setup, friendly links configuration, and writing techniques. It also includes instructions on setting up frontmatter in Markdown documents, adding dynamic pages, loading local images, and modifying icons using the remixicon open-source icon library.

Introduction#

This is an open-source blog theme called Astro-Yi that I developed. If you like it, please give it a star. Thank you for your attention and welcome to contribute!

Configuring Astro-Yi#

Essential Configuration (Required)#

The configuration file for the Astro project is located at /astro.config.mjs, and there are some essential configurations:

export default defineConfig({
    site: "https://cirry.cn", // Please modify it to your own website address here
})

Blog Information Configuration#

In the configuration file of the Astro-Yi theme src/consts.ts, there are some important configurations:

// ...
export const site = {
  title: "Cirry's Blog",  // required
  favicon: '/favicon.svg', // required
  author: "Cirry", // required
  avatar: '/avatar.png', // required
  description: '', 
  motto: '', 
  url: 'https://cirry.cn', // required
  recentBlogSize: 5, // required
  archivePageSize: 25, // required
  postPageSize: 10, // required
  indexPageSize: 10, // required
  beian: '', 
}
// ...

favicon is the location of the website icon. The file is located at /public/favicon.svg, please replace it with your own website icon.

avatar is the location of the website avatar. The file is located at /public/avatar.png, please replace it with your own website avatar.

Comment System Configuration#

/**
 * enable: Whether to enable the comment function. Set to true to enable, false to disable.
 * serverUrl: The server address of Waline.
 * pageSize: The desired number of comments shown in each page.
 * wordLimit: The word limit for comments. Set to a single number for the maximum word limit. Set to 0 or do not set for unlimited.
 * requiredMeta: The required information for comments, can be one or more of nick, mail, link.
 * count: The number of recent comments displayed in the sidebar.
 * pageview: Enable article pageviews statistics.
 * reaction: Enable article reaction interaction.
 * whiteList: Article reaction whitelist.
 */
export const comment = {
    enable: true, // Required, set to enable the comment system
    serverUrl: "https://xxx.xx.app", // Required, modify it to your own Waline server address
    pageSize: 20, //
    wordLimit: '', 
    requiredMeta: ["nick", "mail"], // Required
    count: 5,
    pageview: true,
    reaction: false, 
    whiteList: ['/message/', '/friends/', '/donate/'],
}

reaction does not have to be set to true/false only. You can also pass an array of image addresses to achieve custom reactions. For more details, please refer to Article Reaction.

Sponsor System Configuration#

/**
 * Sponsor System
 * enable: true to enable, false to disable.
 * tip: Sponsorship prompt.
 * wechatQRCode: WeChat QR code address, the image address should be placed in the public directory.
 * alipayQRCode: Alipay QR code address, the image address should be placed in the public directory.
 * paypalUrl: Paypal QR code address.
 * @type {{paypalUrl: string, alipayQRCode: string, enable: boolean, wechatQRCode: string, tip: string}}
 */
export const donate = {
  enable: true,
  tip: "Thanks for the coffee☕",
  wechatQRCode: "/WeChatQR.png",
  alipayQRCode: "/AliPayQR.png", 
  paypalUrl: "https://paypal.me/cirry0?country.x=C2&locale.x=zh_XC",
}

Friendly Links Configuration#

/**
 * Friendly Links
 * name: Blog name
 * url: Blog URL
 * avatar: Blog avatar
 * descript: Blog description
 * @type {[{name: string, description: string, avatar: string, url: string}]}
 */
export const friendlyLinks = [
    {
      name: "Cirry's Blog",
      url: 'https://cirry.cn',
      avatar: "https://cirry.cn/avatar.png",
      description: 'Daily life of front-end development'
    },
]

Recommended Configuration#

Astro-Yi provides many configurations to enrich our page functionality. Here are my recommendations:

  1. It is recommended to enable the Waline comment system. If you don't know how to install the Waline system, you can refer to the Waline official website or Install Waline Comment Function.

  2. If you are a user in mainland China, it is recommended to add the record number.

  3. Personal links to let more people know about you and your website.

Writing Tips#

Markdown Document Specifications#

If you use Astro as your blog, you will need to use Markdown, and you can refer to the basic writing and formatting syntax on GitHub for basic specifications Basic Writing and Formatting Syntax.

Automatically Generate Frontmatter in Vscode#

When writing each article, if you need to manually copy information and fill in the date, it can be a complex task. Therefore, I provide a method to automatically generate frontmatter when writing blogs in Vscode. You can refer to Vscode Add Markdown-Frontmatter Code Snippet for more details.

Writing Blog Pages#

Under the Yi theme, you only need to create an md document in src/content/blog to start writing your blog.

According to the Markdown document standard of Astro, each document should have its own frontmatter information, and the frontmatter should be marked with --- at the beginning and end of the md file to indicate the frontmatter. This brings us a lot of convenience:

  1. For example, if we want to add tags and categories to a document or make certain documents sticky, we can add some properties to the frontmatter, such as tags, sticky, and so on.

  2. For example, to avoid using Chinese as the blog path and file name, we can set the title of the md document as the Chinese title and use English as the file name with - as the word separator.

In Astro-Yi, you only need to set the document title title and creation date date in the frontmatter. Here is the simplest frontmatter setting for an md document:

---
title: 菩萨蛮·花明月暗笼轻雾 (The Song of the Goddess of Mercy: Flowers, Bright Moon, and Mist)
date: 2024-03-05
---

If you feel that these document properties are not enough, Yi also provides more properties for you to use. Here is a complete example of property configuration:

---
title: 菩萨蛮·花明月暗笼轻雾 (The Song of the Goddess of Mercy: Flowers, Bright Moon, and Mist) // File name
description: This poem is believed to describe Li Yu's secret meeting with Xiao Zhouhou and was created around the second year of the Qian De period of the Northern Song Dynasty (964 AD). // Document description
date: "2023-01-25T10:23:31.210Z" // Publication date
tags:   // Document tags support arrays and strings
  - Poetry
category: Poetry  // Document categories support arrays and strings
sticky: 100  // Document sticky weight, the larger the number, the higher the weight
slug: poem/ci // Permanent link of the document
mathjax: false // Whether to enable formula display
draft: false    // Whether it is a draft
toc: true   // Whether the article needs a table of contents
donate: false   // Whether to enable sponsorship function
comment: false  // Whether to enable comment function
---

Except for title and date, the above properties are optional or have default values. You can modify their optional status or default values in src/content/config.js.

Writing Dynamic Pages#

Under the Yi theme, you only need to create an md document in src/content/feed to start writing your dynamic page.

A dynamic page should be similar to a social media feed, where you can temporarily express or comment on something. Therefore, it does not have many frontmatter restrictions. You don't even need to set a title for it (of course, this kind of content doesn't need a title), but we know that the most important property for publishing a message is the publication time, so you need to set date.

So the basic frontmatter setting for a dynamic page's md document should be like this:

---
date: 2023-01-25 10:23:31
---

Loading Local Images#

Place your image files in the /public/images directory. If there is no images folder, create one. Then, use the absolute path /images/xx.png to reference the images in Markdown.

For example, if you have an image named xxx.png and move it to the /public/images/2024/ folder, you only need to use the following format in the md file to use it normally: ![](/images/2024/xxx.png).

Modifying Icons#

All icons in the blog use the open-source icon library remixicon, and you can replace them with your favorite icons.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.