Skip to content

WRXinYue/valaxy-theme-sakura

Repository files navigation

Valaxy Theme Sakura

🧪 正在测试、完善主题示例和主题文档

NPM version Release Open in StackBlitz

Note

该主题尚未完全准备好,我们正在更新主题文档及示例,预计将在 v0.7.0 版本会发布到 Valaxy 主题橱窗 。由于时间有限,我们将优先编写中文文档,并将其设为第一语言,因为绝大部分用户为中国用户

🌟 特性

  • 🌈 主题化: 主题化包含 Sakura 及 Ocean 🚧
  • 🌸 Sakura: 主题化样式完全支持 wordpress-theme-sakura
  • ❤️ 轻量级: 未使用组件会通过树摇方式优化,实际使用中非常轻量
  • ⚡️ 快速: 我们较注重性能优化,确保主题的性能
  • 🎪 互动文档与演示: 提供互动性强的文档和演示功能
  • 🦾 类型安全: 完全采用 TypeScript 编写,并使用 TS Docs 提供详尽的文档说明
  • 🔩 高度可定制化: 主题和功能可根据需求进行高度定制,完全可以利用主题组件构建全新样式
  • 📦 附加组件: 集成多种常用插件,且发布主题常用插件,部分插件可通过主题化添加样式
  • 🌍 多语言支持: 内置 i18n 中文和英文语言切换功能
  • 🎥 多媒体横幅: 支持多种媒体格式的横幅,如图片、视频等,集成横幅组件如打字机效果、一言效果等
  • 🧩 多列布局: 可以自由改变文章列表、主页排版及其他页面布局,使主题更加丰富多样
  • 📚 侧边栏: 侧边栏可以设置为左侧或右侧打开,甚至可以将导航栏变成侧边栏
  • 🎞 动画效果: 集成多种动画效果,用户可以方便地添加动画,不再依赖于主题默认效果
  • 🔮 其他特性: 支持文章列表预加载、滚动阻尼、网络图谱等功能

📦 安装

如果您还不清楚如何安装 Valaxy,建议先查看 Valaxy 的安装文档了解安装过程。关于本主题的详细安装教程,请参考 valaxy-theme-sakura 的 安装文档

如下是简要的安装方式:

pnpm add valaxy-theme-sakura

在您的 valaxy.config.ts 文件中进行如下修改:

import { defineConfig } from 'valaxy'
import type { ThemeUserConfig } from 'valaxy-theme-sakura'

export default defineValaxyConfig<ThemeUserConfig>({
  theme: 'sakura'
})

🚀 使用

如下是配置主题的一个简单的配置示例:

import { defineValaxyConfig } from 'valaxy'
import type { ThemeUserConfig } from 'valaxy-theme-sakura'

export default defineValaxyConfig<ThemeUserConfig>({
  theme: 'sakura',

  themeConfig: {
    navbarTitle: ['かなしい', 'の', '心悦'],
    banner: {
      title: 'Hello, sakura',
      motto: 'You got to put the past behind you before you can move on.',
      urls: [
        'https://wrxinyue-images.s3.bitiful.net/wallpaper/Genshin Impact - Yae Miko (4) Cybust PC.mp4',
        'https://wrxinyue-images.s3.bitiful.net/pc-wallpaper/wallhaven-yxwy7k.jpg'
      ],
      style: 'filter-dot',
    },
  },
})

由于配置项较多,关于配置详情请见主题配置

🎨 主题化

或许有些人并不喜欢花哨的效果,更偏爱简洁的博客风格。我们在默认配置中没有包含 Sakura 的样式,您可以按照以下步骤自行添加所需的效果。以下是最简单的添加主题文件的方法:

styles 目录的 index.scss 文件,填入以下内容:

@use "valaxy-theme-sakura/styles/themes/sakura/index.scss" as *;

这样您的主题就添加了 Sakura 样式。关于更多主题配置,请参见主题化

🔄 更新主题

随着版本不断迭代,我们建议您更新 valaxyvalaxy-theme-sakura 的版本,以确保主题和框架保持最新同步。未来或许会有更多有趣的功能等待您去发现

pnpm add valaxy@latest
pnpm add valaxy-theme-sakura@latest

🌌 派生插件

valaxy-theme-sakura 项目中,一些功能被抽离出来形成新的 npm 包,供其他 Valaxy 主题开发者使用

Note

为了保持项目的轻量化,我们不会添加过多非必要依赖,可以自行安装所需插件

插件 是否集成 描述
valaxy-addon-live2d ❌ 否 集成萌萌哒 live2d 看板娘
valaxy-addon-hitokoto ✅ 是 主题默认集成的一言插件
valaxy-addon-vercount ✅ 是 主题默认集成的网站访问统计插件
valaxy-addon-git-log ❌ 否 主题文档底部贡献者信息

关于更多的插件可以访问 Valaxy 插件橱窗

🧱 贡献

我们欢迎任何人参与贡献。如果你有好的想法或建议,可以随时提出,详情请参见 CONTRIBUTING.md

📋 其他

相关计划清单已迁移至 valaxy-theme-sakura projects

🌸 致谢

本项目很大程度上受到了以下令人敬畏的项目的启发

感谢 GitHub上的所有贡献者

📄 License

Important

valaxy-theme-sakura 并未抄袭任何 wordpress-theme-sakura 的源码。valaxy-theme-sakura 是根据 wordpress-theme-sakura 的样式进行模仿,并实现了主题化和组件设计。这些主题化文件和组件均以 sakura 命名。而 valaxy-theme-sakura 中的 sakura 仅仅是主题的一部分

MIT License © 2024-PRESENT WRXinYue