{"id":13449507,"url":"https://github.com/flaribbit/vitepress-theme-sakura","last_synced_at":"2025-03-22T13:23:38.261Z","repository":{"id":51650432,"uuid":"457589240","full_name":"flaribbit/vitepress-theme-sakura","owner":"flaribbit","description":"A lovely blog theme for vitepress. 可爱又轻量的二次元博客主题！大概是隔壁 wordpress sakura 主题的移植吧","archived":false,"fork":false,"pushed_at":"2024-02-06T10:11:12.000Z","size":1144,"stargazers_count":123,"open_issues_count":4,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T19:52:12.848Z","etag":null,"topics":["blog","theme","vitepress","vitepress-theme"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flaribbit.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-10T01:33:24.000Z","updated_at":"2025-03-05T14:53:13.000Z","dependencies_parsed_at":"2024-02-06T10:42:05.423Z","dependency_job_id":"9e065106-fd6c-4626-9a01-64fcf395a8f9","html_url":"https://github.com/flaribbit/vitepress-theme-sakura","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaribbit%2Fvitepress-theme-sakura","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaribbit%2Fvitepress-theme-sakura/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaribbit%2Fvitepress-theme-sakura/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaribbit%2Fvitepress-theme-sakura/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flaribbit","download_url":"https://codeload.github.com/flaribbit/vitepress-theme-sakura/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244960713,"owners_count":20538867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","theme","vitepress","vitepress-theme"],"created_at":"2024-07-31T06:00:40.681Z","updated_at":"2025-03-22T13:23:38.231Z","avatar_url":"https://github.com/flaribbit.png","language":"Vue","funding_links":[],"categories":[":art: Themes"],"sub_categories":["Community Themes"],"readme":"# vitepress-theme-sakura\n\n[![npm](https://img.shields.io/npm/v/vitepress-theme-sakura?logo=npm)](https://www.npmjs.com/package/vitepress-theme-sakura)\n[![Build](https://github.com/flaribbit/vitepress-theme-sakura/actions/workflows/build.yml/badge.svg)](https://github.com/flaribbit/vitepress-theme-sakura/actions)\n\n可爱又轻量的二次元博客主题！大概是隔壁wp主题的移植吧\n\n[在线预览](https://flaribbit.github.io/vitepress-theme-sakura/)\n\n![preview](./preview.webp)\n\n## 快速开始\n\n安装依赖，推荐使用 pnpm 包管理器，如果没有的话根据自己的情况把命令中的 `pnpm` 换成 `npm` 或者 `yarn`。\n\n```\npnpm add vitepress vitepress-theme-sakura sass\n```\n\n创建配置文件\n\n`.vitepress/config.ts`\n```ts\nimport { type ThemeConfig } from 'vitepress-theme-sakura/.vitepress/config'\nimport { defineConfigWithTheme } from 'vitepress'\nimport fixKatex from 'vitepress-theme-sakura/.vitepress/fix-katex'\nexport default defineConfigWithTheme\u003cThemeConfig\u003e({\n  lang: 'zh-CN',\n  title: 'xxx的小站',\n  head: [\n    // 字体支持\n    ['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/regular.min.css' }],\n    ['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css' }],\n    ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Noto+Serif+SC' }],\n    // waline\n    ['script', { src: 'https://cdn.jsdelivr.net/npm/@waline/client@1.5.4/dist/Waline.min.js' }],\n    // katex\n    ['script', { src: 'https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js' }],\n    ['script', { src: 'https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/contrib/auto-render.min.js' }],\n    ['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css' }],\n  ],\n  markdown: {\n    theme: 'github-light',\n    lineNumbers: true,\n    config: md =\u003e { md.use(fixKatex) },\n  },\n  themeConfig: {\n    // ...\n  }\n})\n```\n\n其中 `themeConfig` 里面的内容就是要手动填写的主题配置。\n\n`.vitepress/theme/index.ts`\n```ts\nimport { type EnhanceAppContext } from 'vitepress'\n// @ts-ignore\nimport Layout from 'vitepress-theme-sakura'\n\nexport default {\n  Layout,\n  NotFound: () =\u003e 'custom 404', // \u003c- this is a Vue 3 functional component\n  enhanceApp({ app, router, siteData }: EnhanceAppContext) {\n    // app is the Vue 3 app instance from `createApp()`. router is VitePress'\n    // custom router. `siteData`` is a `ref`` of current site-level metadata.\n  }\n}\n```\n\n然后创建 `posts` 目录，编写 markdown 文件保存到 `posts` 目录中。\n\n执行 `vitepress dev` 命令，以开发模式预览效果；\n\n执行 `vitepress build` 命令，构建用于发布的网页文件，输出到 `.vitepress/dist` 目录中。\n\n## 主题配置\n\n```ts\nexport interface ThemeConfig {\n  name?: string, // 名字，用于显示文章作者等\n  cover?: string, // 首页封面图\n  hello?: string, // 首页问候语\n  motto?: string, // 首页签名\n  social?: { icon: string, url: string }[], // 联系方式\n  waline?: string, // waline 评论系统服务端地址\n}\n```\n\n代码块主题配置，参见 [shiki 主题](https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes)\n```ts\nexport type Theme =\n  | 'css-variables'\n  | 'dark-plus'\n  | 'dracula-soft'\n  | 'dracula'\n  | 'github-dark-dimmed'\n  | 'github-dark'\n  | 'github-light'\n  | 'hc_light'\n  | 'light-plus'\n  | 'material-darker'\n  | 'material-default'\n  | 'material-lighter'\n  | 'material-ocean'\n  | 'material-palenight'\n  | 'min-dark'\n  | 'min-light'\n  | 'monokai'\n  | 'nord'\n  | 'one-dark-pro'\n  | 'poimandres'\n  | 'rose-pine-dawn'\n  | 'rose-pine-moon'\n  | 'rose-pine'\n  | 'slack-dark'\n  | 'slack-ochin'\n  | 'solarized-dark'\n  | 'solarized-light'\n  | 'vitesse-dark'\n  | 'vitesse-light'\n```\n\n## 文章配置\n```md\n---\ntitle: 标题\ndate: 日期\ncover: 封面图\ntags: [标签1, 标签2]\n---\n\n这里的文字会作为预览显示在文章列表中\n\n---\n\n这里的文字点进文章才能看到\n```\n\n## 功能\n- [x] 首页横幅\n- [x] 文章列表\n- [x] 文章样式\n- [x] waline 评论\n- [x] 文章导航\n- [x] 代码高亮\n- [x] 手机端适配\n- [x] 目录\n- [x] 目录锚点双向同步\n- [x] 标签页面\n- [x] latex 公式\n- [x] RSS\n- [ ] 页脚\n- [ ] 搜索\n- [ ] PWA\n\n## 其他说明\n如你所见，这个博客主题完成度不是很高。\n\n我写这个主题的初衷有两个，一是为了学习前端，二是看到隔壁 wordpress 主题的性能太烂了，所以就想着移植一下。\n\n如果你想安安静静写博客，需要体验友好、性能绝佳、扩展性出色的博客系统，推荐看一下 [Valaxy](https://valaxy.site/).\n\n如果你希望学习自制博客所需要的前端技术，但目前是小白，那或许可以参考本项目代码。本项目代码质量不高，但毕竟也是小白写的，所以应该比较容易看懂。如果不是小白，则可以参考 [云猫猫的 Valaxy 仓库](https://github.com/YunYouJun/valaxy)。\n\n## 感谢\n- [wordpress-theme-sakura](https://github.com/mashirozx/sakura)\n- [hexo-theme-yun](https://github.com/YunYouJun/hexo-theme-yun)\n- [vuejs/blog](https://github.com/vuejs/blog)\n- [wordpress-theme-Sakurairo](https://github.com/mirai-mamori/Sakurairo)\n- [xiaowai-api](https://api.ixiaowai.cn/)\n\n## 不感谢\n- 某个关闭图床的网站\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflaribbit%2Fvitepress-theme-sakura","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflaribbit%2Fvitepress-theme-sakura","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflaribbit%2Fvitepress-theme-sakura/lists"}