This work is rewrite from hexo-theme-Typography
English | 简体中文
- Build with TypeScript and UnoCSS
- Fast. 100% Pagespeed Score.
- Typography Derived from prevalent Chinese typographic norms and aims to provide an enhanced reading experience for website visitors.
- Responsive. Responsive and works well on all screen sizes.
- Accessible. A well thought out semantic and accessible content.
- SEO friendly.Open Graph and Twitter Cards support for a better social sharing experience.
- Sitemap and RSS feed for search engines.
- i18n support.
- Dark mode support.
Submit a PR to add your blog Demo.
Typography is a minimal, responsive and SEO-friendly Astro blog theme. This guide will help you get started with a new project.
You can easily create a new project by licking the below button.
Or, you can deploy it by create a repo from this template.
Click here to create a repo from this template on GitHub.
You can add content by creating a new markdown file in src/content/posts
. The file need metadata in the frontmatter, like this:
---
title: title
pubDate: 2021-08-01
categories: ['article']
description: 'description'
---
Or, you can use the following command in your terminal to create a new post:
pnpm new-post
You can update the theme by running by running the following command in your terminal:
pnpm update-theme
Typography is highly customizable. The config file is in src/theme.config.ts
Typography has built-in support for adding links to your social media accounts to the site via the social option in the config file:
export const THEME_CONFIG: App.Locals['config'] = {
socials: [
{
name: "github",
href: "https://github.com/moeyua/astro-theme-typography"
}
...
]
}
The name is the icon name in Material Design Icons, which will be automatically generated as the icon.
By default, the navigation are Posts
, Archive
, Categories
and About
. You can add more in the config file:
export const THEME_CONFIG: App.Locals['config'] = {
navs: [
{
name: "Categories",
href: "/categories"
}
...
]
}
And then add the corresponding page in src/pages
, see more in Astro Pages
Typography supports dark mode. You can change it in the config file:
export const THEME_CONFIG: App.Locals['config'] = {
themeStyle: 'dart' // 'light' | 'dark'
}
Typography provides built-in support for multilingual sites. By default, the language is en-us
, you can change it in the config file:
export const THEME_CONFIG: App.Locals['config'] = {
locale: "zh-cn"
}
For now, Typography supports below languages:
en-us
zh-cn
zh-tw
ja-jp
You can see all supported languages in src/i18n.ts, and add more if you need.
- WebSub
- comment
- search
- analytics