Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flaribbit/vitepress-theme-sakura
A lovely blog theme for vitepress. 可爱又轻量的二次元博客主题！大概是隔壁 wordpress sakura 主题的移植吧
https://github.com/flaribbit/vitepress-theme-sakura
blog theme vitepress vitepress-theme
Last synced: 2 months ago
JSON representation
A lovely blog theme for vitepress. 可爱又轻量的二次元博客主题！大概是隔壁 wordpress sakura 主题的移植吧
- Host: GitHub
- URL: https://github.com/flaribbit/vitepress-theme-sakura
- Owner: flaribbit
- Created: 2022-02-10T01:33:24.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-06T10:11:12.000Z (4 months ago)
- Last Synced: 2024-03-06T11:06:09.293Z (3 months ago)
- Topics: blog, theme, vitepress, vitepress-theme
- Language: Vue
- Homepage:
- Size: 1.09 MB
- Stars: 87
- Watchers: 2
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
Lists
- awesome-vitepress-v1 - vitepress-theme-sakura - A cute and animated blog theme for vitepress (:art: Themes / Community Themes)
README
# vitepress-theme-sakura
[](https://www.npmjs.com/package/vitepress-theme-sakura)
[](https://github.com/flaribbit/vitepress-theme-sakura/actions)
可爱又轻量的二次元博客主题！大概是隔壁wp主题的移植吧
[在线预览](https://flaribbit.github.io/vitepress-theme-sakura/)
## 快速开始
安装依赖，推荐使用 pnpm 包管理器，如果没有的话根据自己的情况把命令中的 `pnpm` 换成 `npm` 或者 `yarn`。
```
pnpm add vitepress vitepress-theme-sakura sass
```
创建配置文件
`.vitepress/config.ts`
```ts
import { type ThemeConfig } from 'vitepress-theme-sakura/.vitepress/config'
import { defineConfigWithTheme } from 'vitepress'
import fixKatex from 'vitepress-theme-sakura/.vitepress/fix-katex'
export default defineConfigWithTheme({
lang: 'zh-CN',
title: 'xxx的小站',
head: [
// 字体支持
['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/regular.min.css' }],
['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css' }],
['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Noto+Serif+SC' }],
// waline
['script', { src: 'https://cdn.jsdelivr.net/npm/@waline/[email protected]/dist/Waline.min.js' }],
// katex
['script', { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js' }],
['script', { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js' }],
['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css' }],
],
markdown: {
theme: 'github-light',
lineNumbers: true,
config: md => { md.use(fixKatex) },
},
themeConfig: {
// ...
}
})
```
其中 `themeConfig` 里面的内容就是要手动填写的主题配置。
`.vitepress/theme/index.ts`
```ts
import { type EnhanceAppContext } from 'vitepress'
// @ts-ignore
import Layout from 'vitepress-theme-sakura'
export default {
Layout,
NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
enhanceApp({ app, router, siteData }: EnhanceAppContext) {
// app is the Vue 3 app instance from `createApp()`. router is VitePress'
// custom router. `siteData`` is a `ref`` of current site-level metadata.
}
}
```
然后创建 `posts` 目录，编写 markdown 文件保存到 `posts` 目录中。
执行 `vitepress dev` 命令，以开发模式预览效果；
执行 `vitepress build` 命令，构建用于发布的网页文件，输出到 `.vitepress/dist` 目录中。
## 主题配置
```ts
export interface ThemeConfig {
name?: string, // 名字，用于显示文章作者等
cover?: string, // 首页封面图
hello?: string, // 首页问候语
motto?: string, // 首页签名
social?: { icon: string, url: string }[], // 联系方式
waline?: string, // waline 评论系统服务端地址
}
```
代码块主题配置，参见 [shiki 主题](https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes)
```ts
export type Theme =
| 'css-variables'
| 'dark-plus'
| 'dracula-soft'
| 'dracula'
| 'github-dark-dimmed'
| 'github-dark'
| 'github-light'
| 'hc_light'
| 'light-plus'
| 'material-darker'
| 'material-default'
| 'material-lighter'
| 'material-ocean'
| 'material-palenight'
| 'min-dark'
| 'min-light'
| 'monokai'
| 'nord'
| 'one-dark-pro'
| 'poimandres'
| 'rose-pine-dawn'
| 'rose-pine-moon'
| 'rose-pine'
| 'slack-dark'
| 'slack-ochin'
| 'solarized-dark'
| 'solarized-light'
| 'vitesse-dark'
| 'vitesse-light'
```
## 文章配置
```md
---
title: 标题
date: 日期
cover: 封面图
tags: [标签1, 标签2]
---
这里的文字会作为预览显示在文章列表中
---
这里的文字点进文章才能看到
```
## 功能
- [x] 首页横幅
- [x] 文章列表
- [x] 文章样式
- [x] waline 评论
- [x] 文章导航
- [x] 代码高亮
- [x] 手机端适配
- [x] 目录
- [x] 目录锚点双向同步
- [x] 标签页面
- [x] latex 公式
- [x] RSS
- [ ] 页脚
- [ ] 搜索
- [ ] PWA
## 其他说明
如你所见，这个博客主题完成度不是很高。
我写这个主题的初衷有两个，一是为了学习前端，二是看到隔壁 wordpress 主题的性能太烂了，所以就想着移植一下。
如果你想安安静静写博客，需要体验友好、性能绝佳、扩展性出色的博客系统，推荐看一下 [Valaxy](https://valaxy.site/).
如果你希望学习自制博客所需要的前端技术，但目前是小白，那或许可以参考本项目代码。本项目代码质量不高，但毕竟也是小白写的，所以应该比较容易看懂。如果不是小白，则可以参考 [云猫猫的 Valaxy 仓库](https://github.com/YunYouJun/valaxy)。
## 感谢
- [wordpress-theme-sakura](https://github.com/mashirozx/sakura)
- [hexo-theme-yun](https://github.com/YunYouJun/hexo-theme-yun)
- [vuejs/blog](https://github.com/vuejs/blog)
- [wordpress-theme-Sakurairo](https://github.com/mirai-mamori/Sakurairo)
- [xiaowai-api](https://api.ixiaowai.cn/)
## 不感谢
- 某个关闭图床的网站