Typography

Live Demo

This work is rewrite from hexo-theme-Typography

English | 简体中文

Features

• 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.

Demo

• Live Demo
• My Blog

Getting Started

Typography is a minimal, responsive and SEO-friendly Astro blog theme. This guide will help you get started with a new project.

Quick Start

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.

Add content

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

Updating the theme

You can update the theme by running by running the following command in your terminal:

pnpm update-theme

Customization

Typography is highly customizable. The config file is in src/theme.config.ts

Social links

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.

Navigation links

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

Dark mode

Typography supports dark mode. You can change it in the config file:

export const THEME_CONFIG: App.Locals['config'] = {
  themeStyle: 'dart' // 'light' | 'dark'
}

Internationalization (i18n)

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.

Pagespeed Score

TODO

• WebSub
• comment
• search
• analytics