Demo：Astro-Theme-Yi
A content-focused Astro blog theme, Yi, in Chinese, it means fast and concise.
- Supports multi-platform display.
- Supports dark mode.
- Supports Memos.
- supports i18n.
- Supports search functionality.
- SEO-friendly
- Supports sitemap and RSS.
- Supports article drafts.
- Supports Waline/Giscus Comment.
- Image lazy loading and scaling support.
- Supports fixed permalinks for articles.
- Supports meriand
- Supports mathjax
- Supports expressive code
......
Give it a try! Click the button above, and you can deploy with just one click.
Recommended for use nodejs >= 18，pnpm >= 8。
git clone https://github.com/cirry/astro-yi.git
cd astro-yi
npm install -g pnpm # install pnpm
pnpm i # installs dependencies
npm run dev # preview, starts local dev server at localhost:4321npm run build # build your production site to ./dist After the packaging is completed, Upload the dist folder to the web server directory.
In the src/const.ts file, you can make some modifications according to your needs.
/**
* title {string} website title
* favicon {string} website favicon url
* description {string} website description
* author {string} author
* avatar {string} Avatar used in the profile
* motto {string} used in the profile
* url {string} Website link
* recentBlogSize {number} Number of recent articles displayed in the sidebar
* archivePageSize {number} Number of articles on archive pages
* postPageSize {number} Number of articles on blog pages
* feedPageSize {number} Number of articles on feed pages
* beian {string} Chinese policy
*/
export const site = {
title: 'Astro Theme Yi',
favicon: '/favicon.svg',
description: 'Welcome to my independent blog website! ',
author: "xxxxx",
avatar: '/avatar.png',
motto: 'Keep moving.',
url: 'https://astro-yi-nu.vercel.app',
recentBlogSize: 5,
archivePageSize: 25,
postPageSize: 10,
feedPageSize: 20,
beian: ''
}
/**
* busuanzi {boolean} Enable Busuanzi Statistics Functionality
* lang {string} Default website language: English
* codeFoldingStartLines {number} default 16
* ga {string} google analytics code
* memosUrl {string} memos server url
* memosUsername {string} memos login name
* memosPageSize {number} 10
*/
export const config = {
busuanzi: false,
lang: 'en', // English: en | 简体中文: zh-cn | 繁體中文: zh-Hant | cs
codeFoldingStartLines: 16, // Need to re-run the project to take effect
ga: false, // If you want to integrate with Google Analytics, just enter your GA-ID here.
// memos config
memosUrl: '', // https://xxxx.xxx.xx
memosUsername: '', // login name
memosPageSize: 10, // number
}
/**
* Navigator
*/
export const categories = [
{
name: "Homepage",
iconClass: "ri-home-4-line",
href: "/",
},
{
name: "Blog",
iconClass: "ri-draft-line",
href: "/blog/1",
},
{
name: "Feed",
iconClass: "ri-lightbulb-flash-line",
href: "/feed/1",
},
{
name: "Archive",
iconClass: "ri-archive-line",
href: "/archive/1",
},
{
name: "Message",
iconClass: "ri-chat-1-line",
href: "/message/",
},
{
name: "Search",
iconClass: "ri-search-line",
href: "/search",
},
{
name: "More",
iconClass: "ri-more-fill",
href: "javascript:void(0);",
children: [
{
name: 'About',
iconClass: 'ri-information-line',
href: '/about',
},
{
name: 'Friends',
iconClass: 'ri-user-5-line',
href: '/friends',
target: '_self', // _self | _blank
},
]
}
]
/**
* Personal link address
*/
export const infoLinks = [
{
icon: 'ri-telegram-fill',
name: 'telegram',
outlink: 'xxxxxxx',
},
{
icon: 'ri-twitter-fill',
name: 'twitter',
outlink: 'xxxxxxx',
},
{
icon: 'ri-instagram-fill',
name: 'instagram',
outlink: 'xxxxxxx',
},
{
icon: 'ri-github-fill',
name: 'github',
outlink: 'https://github.com/cirry',
},
{
icon: 'ri-mail-fill',
name: '[email protected]',
outlink: 'mailto:[email protected]',
},
{
icon: 'ri-rss-fill',
name: 'rss',
outlink: 'https://xxxxx.com/rss.xml',
}
]
/**
* Donation feature
* Please replace the image and paypal link before use.
* enable {boolean}
* tip {string}
*/
export const donate = {
enable: false,
tip: "Thanks for the coffee !!!☕",
wechatQRCode: "/WeChatQR.png",
alipayQRCode: "/AliPayQR.png",
paypalUrl: "https://paypal.me/xxxxxxxx",
}
/**
* Friends Links Page
* name {string}
* url {string}
* avatar {string}
* description {string}
*/
export const friendshipLinks =
[
{
name: "Cirry's Blog",
url: 'https://cirry.cn',
avatar: "https://cirry.cn/avatar.png",
description: 'frontend development'
},
]
/**
* Comment Feature
* enable {boolean}
* type {string} giscus and waline are currently supported.
* walineConfig.serverUrl {string} server link
* walineConfig.pageSize {number} number of comments per page. default 10
* walineConfig.wordLimit {number} Comment word s limit. When a single number is filled in, it 's the maximum number of comment words. No limit when set to 0
* walineConfig.count {number} recent comment numbers
* walineConfig.pageview {boolean} display the number of page views and comments of the article
* walineConfig.reaction {string | string[]} Add emoji interaction function to the article
* walineConfig.requiredMeta {string[]} Set required fields, default anonymous
*/
export const comment = {
enable: false,
type: 'giscus', // waline | giscus,
walineConfig:{
serverUrl: "https://xxxxx.xxxxx.app",
lang: 'en',
pageSize: 20,
wordLimit: '',
count: 5,
pageview: true,
reaction: true,
requiredMeta: ["nick", "mail"],
whiteList: ['/message/', '/friends/'],
},
// giscus config
giscusConfig: {
'data-repo': "xxxxxxx",
'data-repo-id': "xxxxxx",
'data-category': "Announcements",
'data-category-id': "xxxxxxxxx",
'data-mapping': "pathname",
'data-strict': "0",
'data-reactions-enabled': "1",
'data-emit-metadata': "0",
'data-input-position': "bottom",
'data-theme': "light",
'data-lang': "xxxxxxxxxxx",
'crossorigin': "anonymous",
}
}Please modify your website configuration, comment system configuration, appreciation function image, personal information links, and of course, you can also modify other configuration content.
With the Yi theme, all you need to do is create a new md document in src/content/blog and you're ready to start writing your blog.
According to Astro's Markdown document standard, each document should have its own frontmatter information and add --- as the beginning and the end of the document's header in md to mark the frontmatter, which gives us a lot of convenience:.
-
for example, if we want to add tags and categories to a document or top some documents, we can add some attributes to the document in Frontmatter, such as
tags,stickyand so on. -
For example, to avoid using Chinese as the blog path and file name, we can set
titleas the title of the md document in Chinese, and the file name in English with-as the word connecting symbol.
In Astro-Yi, You need to set two important properties: title and date, the following is the simplest frontmatter setup for a Md document:
---
title: Display pictures
date: 2024-03-05
---If you feel that this is not quite enough, Yi also provides more properties for you to use, this is a complete example:
---
title: Display pictures
description: Display pictures
date: 2024-03-05
tags: [astro]
category: astro
sticky: 100 // Document top weight, the larger the number, the greater the weight
slug: poem/ci // Permanent link to document
mathjax: false // enable formula display
mermaid: false // enable mermaid
draft: false
toc: true
donate: false
comment: false
---With the Yi theme, all you need to do is create a new md document in src/content/feed and you're ready to start writing.
feed frontmatter needs to set an important property date, the rest of the attributes are optional.
---
date: 2024-03-20
---All the icons in the blog are using the open source icon library remixicon, you can replace your favorite icons by yourself.
In the astro.config.mjs file in the root directory, it is recommended to modify the site property to correctly generate the site map.
export default defineConfig({
site: 'https://xxxx.com',// Modify to your own website address
// ...
})Add a line to the path of your sitemap file at the end of the robots.txt file in the public directory.
Sitemap: [blog-url]/sitemap-0.xml
// ps：Sitemap: https://astro-yi-nu.vercel.app/sitemap-0.xml