Back to themes

sify

A modern blog theme based on Astro

Get started Live demo
Cost

Free

Created by
santisify
<h1>Sify Blog</h1>

基于 Astro 6 + Tailwind CSS v4 的现代化博客主题，支持亮色/暗色模式、MDX、数学公式、全站搜索、评论系统。

特性

  • Markdown / MDX — 支持标准 Markdown 和 JSX 内嵌组件
  • KaTeX 数学公式 — 行内与块级 LaTeX 数学公式渲染
  • 代码高亮 — Shiki 语法高亮 + 一键复制按钮
  • 暗色模式 — 跟随系统偏好 + 手动切换，<code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">localStorage</code> 持久化
  • 全站搜索 — <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">Ctrl+K</code> 唤出，匹配标题/正文，高亮显示
  • Waline 评论 — 开箱即用的评论系统
  • 友链页面 — 好友链接 + 友链圈文章动态
  • 文章封面 — 支持远程 URL 和本地图片
  • RSS 订阅 — 自动生成 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">/rss.xml</code>
  • 响应式设计 — 桌面端双栏 + 移动端抽屉侧边栏
  • SEO 优化 — Open Graph、Twitter Card、Canonical URL
  • 侧边栏 — 个人信息、分类/标签云、随机推荐

技术栈

技术用途Astro 6静态站点生成Tailwind CSS v4CSS 框架Shiki代码语法高亮KaTeX数学公式渲染MDXMarkdown + JSXWaline评论系统

快速开始

环境要求

  • Bun（推荐）或 Node.js 18+

安装

git clone https://github.com/santisify/astro-theme-sify
cd astro-theme-sify
bun install

本地开发


bun dev

打开 

http://localhost:4321，支持热重载。

构建

bun run build

输出在 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">dist/</code> 目录。

预览生产构建

bun preview

配置

编辑 

<code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">src/consts.ts</code>：

export const SITE_TITLE = 'Sify Blog';
export const SITE_DESCRIPTION = '一个基于 Astro 的现代化博客主题';
export const SITE_AUTHOR = 'santisify';
export const SITE_URL = 'https://example.com';
export const SITE_AVATAR = '/favicon.svg';
export const SITE_COVER = '/images/cover.jpg';

export const PAGE_SIZE = 10;

export const NAV_ITEMS = [
  { label: '首页', href: '/' },
  { label: '周刊', href: '/weekly' },
  { label: '文章', href: '/archives' },
  { label: '友链', href: '/friends' },
  { label: '关于', href: '/about' },
];

export const SOCIAL_LINKS = [
  { name: 'GitHub', href: 'https://github.com/yourname', icon: 'github' },
  { name: 'RSS', href: '/rss.xml', icon: 'rss' },
];

自定义主题色

编辑 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">src/styles/global.css</code>：

@theme {
  --color-primary: #e9536a;
  --color-bg-light: #f5f5f5;
  --color-bg-dark: #1a1a2e;
  --color-card-light: #ffffff;
  --color-card-dark: #1e2a45;
}

自定义字体

--font-family-sans: 'Inter', 'Noto Sans SC', sans-serif;
--font-family-mono: 
'JetBrains Mono', 'Fira Code', monospace;

编写文章

在 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">src/content/blog/</code> 下创建 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">.md</code> 或 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">.mdx</code> 文件。

Frontmatter

---
title: 文章标题
description: 文章描述
date: 2024-06-01
updated: 2024-06-15     # 可选，更新日期
tags: [标签1, 标签2]
category: 分类
cover: ./images/cover.webp  # 远程 URL 或本地相对路径
pinned: false              # 是否置顶
draft: false               # 草稿不入 RSS
---

目录结构

支持两种方式：

src/content/blog/
├── my-post.md              # 单文件（slug: my-post）
└── another-post/
    ├── index.md             # 目录形式（slug: another-post）
    └── cover.webp           # 本地图片


周刊

在 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">src/content/weekly/</code> 下创建文章，额外需要 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">issue</code> 字段：

---
title: 周刊 #1
date: 2024-06-02
tags: [前端]
issue: 1
cover: https://example.com/cover.jpg
---

MDX 与组件

在 MDX 文件中可以 import 并使用自定义 Astro 组件：

---
title: MDX 示例
date: 2024-06-01
---

import LinkCard from '../../../components/LinkCard.astro';

<LinkCard
  url="https://astro.build"
  title="Astro 官方文档"
  description="适合内容型网站的全能 web 框架"
/>


内置组件：

  • <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">LinkCard</code> — 外链卡片（<code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">src/components/LinkCard.astro</code>）

创建新组件：

  1. 在 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">src/components/</code> 下创建 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">.astro</code> 文件
  2. 在 MDX 文件中 import 使用

数学公式

KaTeX 已预配置。在 Markdown 中直接使用 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">$...$</code> 或 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">$$...$$</code>：

行内公式：$E = mc^2$

块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$


评论系统

配置 Waline 评论服务器：

编辑 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">src/components/waline/Comment.astro</code>，修改 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">serverURL</code>：

walineInit({
  el: '#waline',
  serverURL: 'https://your-waline-server.com',
  lang: 'zh-CN',
  // ...
});

友链

编辑 <code style="background-color: rgba(212, 222, 231, 0.098); color: rgb(171, 178, 191);">public/links.json</code> 添加好友链接：

<code style="background-color: transparent; color: rgb(171, 178, 191);"> </code>

{
"friends": [
    {
      "id_name": "cf-links",
      "desc": "好友链接",
      "link_list": [
        {
          "name": "Friend's Blog",
          "link": "https://friend.example.com",
          "avatar": "https://friend.example.com/avatar.jpg",
          "intro": "个人简介"
        }
      ]
    }
  ]
}

License

MIT

Other themes to consider

View more themes