Typography

Live Demo

This work is rewrite from hexo-theme-Typography

English | 简体中文

Features

• Build with Astro, 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.
• Support Disqus, Giscus, Twikoo as comment service.
• Dark mode support.

Demo

Submit a PR to add your blog Demo.

• Live Demo
• My Blog
• Julyfun's Blog (how to fully build this blog using bun in minutes)
• Jinx's 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 fork the repository to your account by clicking the Fork button in the upper right corner, click the button below, select the repository you just forked, click the Import button, and you will be taken to the project configuration page.

Or you can refer to the Astro documentation to deploy to your favorite platform.

Add post

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 simply Sync Fork on your own forked project (do not click Discard Changes, otherwise you will lose your own changes).

Customization

Typography is highly customizable. The default configuration file is src/.config/default.ts, you can override the default configuration in src/.config/user.ts as needed.

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:

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.

Note that you need to restart the development server to see the changes.

Navigation links

By default, the navigation are Posts, Archive, Categories and About. You can add more in the config file:

{
  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:

themeStyle: 'dark' // '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:

locale: 'zh-cn'

For now, Typography supports below languages:

• en-us
• zh-cn
• zh-tw
• ja-jp
• it-it

You can see all supported languages in src/i18n.ts, and add more if you need.

Comment

Typography supports multiple comment services, currently supports Disqus, Giscus and Twikoo.

Enable the corresponding comment service by adding the configuration to the config file, when you fill in multiple comment services, only the first service will be displayed.

Disqus

You can enable Disqus by adding the following configuration to the config file:

comments: {
  disqus: {
    shortname: 'your-disqus-shortname'
  }
}

Giscus

Based on the Giscus web component implementation.

The prop names are the same as the data- attributes shown on the giscus website, but written in camelCase with the data- prefix and dashes removed.

You can enable Giscus by adding the following configuration to the config file:

{
  comments: {
    giscus: {
      repo: 'moeyua/astro-theme-typography'
      repoId: 'R_kgDOKy9HOQ'
      category: 'General'
      categoryId: 'DIC_kwDOKy9HOc4CegmW'
      mapping: 'title'
      strict: '0'
      reactionsEnabled: '1'
      emitMetadata: '1'
      inputPosition: 'top'
      theme: 'light'
      lang: 'zh-CN'
      loading: 'lazy'
    }
  }
}

Twikoo

You can enable Twikoo by adding the following configuration to the config file:

{
  comments: {
    twikoo: {
      envId: 'your-env-id'
    }
  }
}

Pagespeed Score

TODO

• WebSub
• comment
• search
• analytics