├── index.md
├── .gitignore
├── public
    └── res
    │   ├── icon.png
    │   ├── avatar.png
    │   ├── favicon.png
    │   ├── posts
    │       └── helloworld.jpg
    │   └── iro
    │       └── sakura_icon.svg
├── .vitepress
    ├── theme
    │   ├── env.d.ts
    │   ├── iro.data.ts
    │   ├── template.vue
    │   ├── components
    │   │   ├── Home
    │   │   │   ├── Home.vue
    │   │   │   ├── CoverSocialButton.vue
    │   │   │   ├── PostList.vue
    │   │   │   ├── Cover.vue
    │   │   │   └── PostListItem.vue
    │   │   ├── Footer.vue
    │   │   ├── Header
    │   │   │   ├── Nav.vue
    │   │   │   ├── NavSearch.vue
    │   │   │   ├── NavMo.vue
    │   │   │   └── NavHeader.vue
    │   │   ├── Post
    │   │   │   └── Post.vue
    │   │   └── Panel.vue
    │   ├── NotFound.vue
    │   ├── index.ts
    │   ├── config
    │   │   ├── posts.ts
    │   │   ├── iro.ts
    │   │   ├── example.ts
    │   │   └── types.mts
    │   ├── Iro.vue
    │   ├── style.scss
    │   └── Layout.vue
    └── config.mts
├── posts
    └── helloworld.md
├── example.md
├── package.json
├── readme.md
└── LICENSE.txt


/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: home
3 | ---


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vitepress/cache
2 | .vitepress/dist
3 | 
4 | node_modules/
5 | package-lock.json


--------------------------------------------------------------------------------
/public/res/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeqingMoe/sakurairo/HEAD/public/res/icon.png


--------------------------------------------------------------------------------
/public/res/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeqingMoe/sakurairo/HEAD/public/res/avatar.png


--------------------------------------------------------------------------------
/public/res/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeqingMoe/sakurairo/HEAD/public/res/favicon.png


--------------------------------------------------------------------------------
/public/res/posts/helloworld.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeqingMoe/sakurairo/HEAD/public/res/posts/helloworld.jpg


--------------------------------------------------------------------------------
/.vitepress/theme/env.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |     import type { DefineComponent } from 'vue'
3 |     const component: DefineComponent<{}, {}, any>
4 |     export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/.vitepress/theme/iro.data.ts:
--------------------------------------------------------------------------------
1 | import { Iro } from "./config/types.mts";
2 | import iro from "./config/iro";
3 | 
4 | export default {
5 |     load() {
6 |         return iro;
7 |     }
8 | };
9 | 


--------------------------------------------------------------------------------
/.vitepress/theme/template.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { inject } from 'vue';
 3 | 
 4 | import { data as iro } from '指向 iro.data.ts 的相对路径';
 5 | 
 6 | const iroDark = inject('iroDark');
 7 | 
 8 | </script>
 9 | 
10 | <template>
11 |     <div class="iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
12 |     </div>
13 | </template>
14 | 
15 | 
16 | <style scoped lang="scss">
17 | .iro-root {
18 |     /*
19 |         --iro-var-: ;
20 |     */
21 |     &.iro-light {
22 |     }
23 | 
24 |     &.iro-dark {
25 |     }
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Home/Home.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { useData } from 'vitepress';
 3 | 
 4 | import Cover from './Cover.vue';
 5 | import PostList from './PostList.vue';
 6 | 
 7 | </script>
 8 | 
 9 | <template>
10 |     <Cover>
11 |         <template v-slot:iro-signature>
12 |             <slot name="iro-signature"></slot>
13 |         </template>
14 |     </Cover>
15 |     <slot name="iro-post-list">
16 |         <PostList></PostList>
17 |     </slot>
18 |     <slot name="iro-home-page">
19 |         <Content />
20 |     </slot>
21 | </template>
22 | 
23 | <style scoped lang="scss"></style>
24 | 


--------------------------------------------------------------------------------
/posts/helloworld.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 你好，世界！
 3 | ---
 4 | 
 5 | ## 序言
 6 | 
 7 | 在这篇文章里，我们将一起探索“你好，世界！”这个简单而又意义深远的短语。
 8 | 
 9 | ## 起源
10 | 
11 | “你好，世界！”的起源可以追溯到 1970 年代，由 Brian Kernighan 编写的 C 语言书籍中首次出现。这个短语很快成为了程序员们的传统，用于测试新语言是否能够成功编译和运行。
12 | 
13 | ## 为什么是“你好，世界！”？
14 | 
15 | 选择“你好，世界！”作为第一个程序的原因很简单：它足够简单，能够展示基本的输入输出功能，同时又能传达出友好和探索的精神。
16 | 
17 | ## 编程语言中的“你好，世界！”
18 | 
19 | 几乎所有的编程语言都有“你好，世界！”的版本，以下是一些示例：
20 | 
21 | - **C++**:
22 |     ```cpp
23 |     #include <print>
24 | 
25 |     int main() {
26 |         std::println("你好，世界！");
27 |     }
28 |     ```
29 | 
30 | - **JavaScript**:
31 |     ```js
32 |     console.log("你好，世界！");
33 |     ```
34 | 
35 | ## “你好，世界！”的意义
36 | 
37 | 虽然“你好，世界！”看起来只是一个简单的输出语句，但它实际上代表了程序员与计算机之间的第一次交流。它标志着程序员开始探索新语言的旅程。
38 | 
39 | ## 结语
40 | 
41 | “你好，世界！”不仅仅是一个程序，它是一个传统，一个开始，一个探索未知的邀请。每次我们写下这个短语，我们都在向一个全新的世界问好。
42 | 


--------------------------------------------------------------------------------
/.vitepress/theme/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { useData } from 'vitepress';
 3 | const { theme } = useData();
 4 | 
 5 | import { data as iro } from './iro.data';
 6 | 
 7 | </script>
 8 | 
 9 | <template>
10 |     <div class="iro-container">
11 |         <div class="iro-center">
12 |             <h1 v-html="iro?.error404?.title ?? '404 Not Found'"></h1>
13 |             <p v-html="iro?.error404?.text ?? '这里什么都没有...'"></p>
14 |         </div>
15 |     </div>
16 | </template>
17 | 
18 | <style scoped lang="scss">
19 | .iro-container {
20 |     display: flex;
21 |     justify-content: center;
22 |     align-items: center;
23 |     position: relative;
24 |     top: 160px;
25 | 
26 |     .iro-center {
27 |         font-size: 20px;
28 | 
29 |         h1 {
30 |             font-size: 48px;
31 |             line-height: 48px;
32 |         }
33 |     }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/.vitepress/theme/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Theme } from 'vitepress';
 2 | import DefaultTheme from 'vitepress/theme';
 3 | import { h } from 'vue';
 4 | 
 5 | import { library } from '@fortawesome/fontawesome-svg-core';
 6 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 7 | import { fas } from '@fortawesome/free-solid-svg-icons';
 8 | import { far } from '@fortawesome/free-regular-svg-icons'
 9 | library.add(fas, far);
10 | 
11 | import vitepressNprogress from 'vitepress-plugin-nprogress';
12 | import 'vitepress-plugin-nprogress/lib/css/index.css'
13 | 
14 | import IroLayout from './Iro.vue';
15 | import './style.scss';
16 | 
17 | export default {
18 |     extends: DefaultTheme,
19 |     Layout: IroLayout,
20 |     enhanceApp({ app, router, siteData }) {
21 |         app.component('fa-i', FontAwesomeIcon);
22 |         vitepressNprogress({ app, router, siteData });
23 |     }
24 | } satisfies Theme;
25 | 


--------------------------------------------------------------------------------
/example.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 这是一个演示页面
 3 | ---
 4 | 
 5 | # 测试一级标题
 6 | 
 7 | ## 测试二级标题
 8 | 
 9 | ### 测试三级标题
10 | 
11 | #### 测试四级标题
12 | 
13 | ##### 测试五级标题
14 | 
15 | ###### 测试六级标题
16 | 
17 | 测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落，测试段落。
18 | 
19 | 测试无序列表：
20 | - 测试无序列表
21 | - 测试无序列表
22 | - 测试无序列表
23 | 
24 | 测试有序列表：
25 | 1. 测试有序列表
26 | 2. 测试有序列表
27 | 3. 测试有序列表
28 | 
29 | > 测试引用内容
30 | 
31 | [测试超链接](/readme)。
32 | 
33 | ```cpp
34 | import std;
35 | 
36 | int main()
37 | {
38 |     std::println("测试多行代码。");
39 | }
40 | ```
41 | 
42 | | 测试表格 | 测试表格 | 测试表格 | 测试表格 |
43 | | :--- | :---: | :---: | ---: |
44 | | 测 | 试 | 表 | 格 |
45 | | 测 | 试 | 表 | 格 |
46 | | 测 | 试 | 表 | 格 |
47 | | 测 | 试 | 表 | 格 |
48 | 
49 | {测试:cè|shì}{注音符号:振り仮名}。
50 | 
51 | 测试 LaTeX： $e^{i\pi}+1=0$
52 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Home/CoverSocialButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { data as iro } from '../../iro.data';
 3 | 
 4 | const iconUrl = iro.social?.iconUrl ?? 'https://s.nmxc.ltd/sakurairo_vision/@2.6/display_icon/';
 5 | const iconPkg = iro.social?.iconPkg ?? 'sakura';
 6 | 
 7 | const { iroIconName, iroIconUrl, iroLink, alt } = defineProps({
 8 |     iroIconName: String,
 9 |     iroIconUrl: String,
10 |     iroLink: String,
11 |     alt: String
12 | });
13 | 
14 | const url = iroIconName == 'custom' ? iroIconUrl : (new URL(`${iconPkg}/${iroIconName}.png`, iconUrl).href);
15 | 
16 | </script>
17 | 
18 | <template>
19 |     <li id="bg-next">
20 |         <a v-if="iroLink" :href="iroLink" target="_blank" :title="alt" rel="external noopener">
21 |             <img :alt="alt" loading="lazy" :src="url">
22 |         </a>
23 |         <img v-else loading="lazy" :src="url" :alt="alt">
24 |     </li>
25 | </template>
26 | 
27 | <style scoped lang="scss"></style>
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "sakurairo",
 3 |     "version": "1.0.0",
 4 |     "description": "将 WordPress 主题 Sakurairo 移植到 VitePress",
 5 |     "scripts": {
 6 |         "dev": "vitepress dev --host 0.0.0.0",
 7 |         "build": "vitepress build",
 8 |         "preview": "vitepress preview --host 0.0.0.0"
 9 |     },
10 |     "author": "keqingmoe",
11 |     "license": "ISC",
12 |     "devDependencies": {
13 |         "@mdit/plugin-ruby": "^0.13.0",
14 |         "@types/node": "^22.4.2",
15 |         "markdown-it-mathjax3": "^4.3.2",
16 |         "sass": "^1.77.8",
17 |         "url-polyfill": "^1.1.12",
18 |         "vitepress": "^1.3.3",
19 |         "vitepress-plugin-nprogress": "^0.0.4",
20 |         "vue": "^3.4.38"
21 |     },
22 |     "dependencies": {
23 |         "@fortawesome/fontawesome-svg-core": "^6.6.0",
24 |         "@fortawesome/free-brands-svg-icons": "^6.6.0",
25 |         "@fortawesome/free-regular-svg-icons": "^6.6.0",
26 |         "@fortawesome/free-solid-svg-icons": "^6.6.0",
27 |         "@fortawesome/vue-fontawesome": "^3.0.8"
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/.vitepress/theme/config/posts.ts:
--------------------------------------------------------------------------------
 1 | import { Iro } from "./types.mts";
 2 | 
 3 | /**
 4 |  * VitePress 主题 Sakurairo 的配置文件
 5 |  */
 6 | export default [
 7 |     {
 8 |         title: '你好，世界！',
 9 |         url: '/posts/helloworld',
10 |         thumb: '/res/posts/helloworld.jpg',
11 |         date: '2024-10-4',
12 |         description: '在这篇文章中，我们深入探讨了“你好，世界！”这一短语的起源、意义以及它的重要性。从最初的 C 语言教科书到今天所有编程语言的入门教程，这个短语已经成为了传统。通过不同编程语言的示例，我们看到了“你好，世界！”的普遍性。这个短语提醒我们，每次我们开始学习新语言时，我们都在向一个充满可能性的新世界问好。'
13 |     }, {
14 |         title: '演示页面',
15 |         url: '/example',
16 |         date: '2024-9-6',
17 |         description: '该页面通过展示 Markdown 格式的不同元素，包括标题、段落、列表、引用、超链接、代码块、表格和 LaTeX 公式，来呈现 Markdown 的多样化内容展示能力。页面涵盖了从一级到六级的标题、列表、引用内容、超链接、代码示例、表格布局、注音符号，以及 LaTeX 公式的渲染。这些丰富的格式和功能，为内容创建提供了强大支持。'
18 |     }, {
19 |         title: '自述文件',
20 |         url: '/readme',
21 |         date: '2024-8-25',
22 |         description: 'Sakurairo 是一个从 WordPress 移植到 VitePress 的主题，它利用 Vue3 提高了二次开发的效率和可复用性。该主题适用于静态站点，响应速度快，易于部署。它提供了快速开始指南，包括安装依赖、开发模式运行、构建和本地部署的命令。用户可以自定义主题，包括基本配置和高级自定义，如插槽使用和内部组件重写。此外，它还支持站内搜索功能，并有详细的发展规划，包括更多样式实现、增强可扩展性、优化项目结构等。项目遵循 GPLv2 开源协议，鼓励社区参与和贡献。'
23 |     }
24 | ] satisfies Iro.Post[];


--------------------------------------------------------------------------------
/.vitepress/config.mts:
--------------------------------------------------------------------------------
 1 | import { defineConfigWithTheme } from 'vitepress';
 2 | import { ruby } from "@mdit/plugin-ruby";
 3 | import iro from './theme/config/iro';
 4 | import { statSync } from 'fs';
 5 | 
 6 | export default defineConfigWithTheme({
 7 |     title: iro.title,
 8 |     titleTemplate: iro.titleTemplate,
 9 |     description: iro.description,
10 |     cleanUrls: true,
11 |     ignoreDeadLinks: true,
12 |     markdown: {
13 |         config: md => {
14 |             md.use(ruby);
15 |         },
16 |         math: true
17 |     },
18 |     lastUpdated: true,
19 |     head: [
20 |         ['link', { rel: 'icon', href: iro.favicon }],
21 |     ],
22 |     lang: 'zh',
23 |     transformPageData(pageData) {
24 |         if (pageData.isNotFound) return;
25 | 
26 |         pageData.lastUpdated = statSync(pageData.filePath).mtimeMs
27 | 
28 |         if (!('layout' in pageData.frontmatter)) {
29 |             pageData.frontmatter.layout = 'post'
30 |         }
31 | 
32 |         const title = '自述文件';
33 |         if (pageData.filePath == 'readme.md') {
34 |             pageData.title = title;
35 |             pageData.frontmatter.title = title;
36 |         }
37 |     },
38 | });
39 | 


--------------------------------------------------------------------------------
/.vitepress/theme/Iro.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import Layout from './Layout.vue';
 3 | </script>
 4 | 
 5 | <template>
 6 |     <ClientOnly>
 7 |         <Layout>
 8 |             <template v-slot:iro-home-page>
 9 |                 <slot name="iro-home-page"></slot>
10 |             </template>
11 |             <template v-slot:iro-signature>
12 |                 <slot name="iro-signature"></slot>
13 |             </template>
14 |             <template v-slot:iro-not-found>
15 |                 <slot name="iro-not-found"></slot>
16 |             </template>
17 |             <template v-slot:iro-page>
18 |                 <slot name="iro-page"></slot>
19 |             </template>
20 |             <template v-slot:iro-home>
21 |                 <slot name="iro-home"></slot>
22 |             </template>
23 |             <template v-slot:iro-post-list>
24 |                 <slot name="iro-post-list"></slot>
25 |             </template>
26 |             <template v-slot:iro-post>
27 |                 <slot name="iro-post"></slot>
28 |             </template>
29 |             <template v-slot:iro-other>
30 |                 <slot name="iro-other"></slot>
31 |             </template>
32 |             <template v-slot:iro-footer>
33 |                 <slot name="iro-footer"></slot>
34 |             </template>
35 |         </Layout>
36 |     </ClientOnly>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/public/res/iro/sakura_icon.svg:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE svg>
 2 | <svg width="30px" height="30px" t="1682340134496" class="sakura-svg" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5240">
 3 |     <path
 4 |         d="M525.58396628 573.34694353s268.83106938-2.62915481 309.36387092 193.24287089l-76.46458293 21.90962291 12.92667757 84.13295086a214.05701289 214.05701289 0 0 1-96.84053193-4.82011663A224.79272784 224.79272784 0 0 1 525.58396628 578.38615666z"
 5 |         fill="#EE9ca7" p-id="5241"></path>
 6 |     <path
 7 |         d="M552.75189802 512.4381922s131.45773592-233.7756732 321.63325979-170.89505575L854.2283053 418.66500728l79.31283344 30.89256828a215.59068679 215.59068679 0 0 1-52.58309388 81.50379604 224.57363215 224.57363215 0 0 1-325.35789552-14.67944718z"
 8 |         fill="#EE9ca7" p-id="5242"></path>
 9 |     <path
10 |         d="M508.49446078 494.0341093S317.00435871 306.48774025 426.77156822 139.31731943l69.4535037 38.78003191L547.4935884 109.30113636a214.05701289 214.05701289 0 0 1 65.72886796 71.86356201 225.01182435 225.01182435 0 0 1-98.37420505 310.67844912z"
11 |         fill="#EE9ca7" p-id="5243"></path>
12 |     <path
13 |         d="M473.21996809 525.58396628S242.2925454 661.64272234 109.30113636 512.4381922l55.43134521-57.18411482-53.45947909-65.72886795a213.61882069 213.61882069 0 0 1 86.32391269-43.81924506 224.79272784 224.79272784 0 0 1 274.527572 175.27698099z"
14 |         fill="#EE9ca7" p-id="5244"></path>
15 |     <path
16 |         d="M481.76472043 566.55496s72.0826585 258.31445093-106.4807652 348.14390364l-40.31370582-68.13892627-78.21735252 34.17901099a212.30424328 212.30424328 0 0 1-20.15685331-94.64956933 224.57363215 224.57363215 0 0 1 241.00584894-219.09622602z"
17 |         fill="#EE9ca7" p-id="5245"></path>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/.vitepress/theme/config/iro.ts:
--------------------------------------------------------------------------------
 1 | import { Iro } from "./types.mts";
 2 | import posts from "./posts";
 3 | 
 4 | /**
 5 |  * VitePress 主题 Sakurairo 的配置文件
 6 |  */
 7 | export default {
 8 |     title: "Sakurairo",
 9 |     titleTemplate: "Sakurairo 主题演示站点",
10 |     description: "正在努力移植到 VitePress！",
11 |     favicon: '/res/favicon.png',
12 |     cover: {
13 |         avatar: '/res/avatar.png',
14 |         signature: '心有所向，日复一日，必有精进',
15 |         background: {
16 |             random: true,
17 |             desktop: 'https://t.alcy.cc/fj/',
18 |             mobile: 'https://t.alcy.cc/mp/',
19 |         }
20 |     },
21 |     nav: {
22 |         icon: '/res/icon.png',
23 |         links: [
24 |             { title: '首页', url: '/' },
25 |             { title: '演示页面', url: '/example' },
26 |             { title: '文章演示', url: '/posts/helloworld' },
27 |             { title: '自述文件', url: '/readme' },
28 |             { title: '404 页面演示', url: '/404' },
29 |             { title: '使用文档', url: 'https://docs.keqing.moe/iro/' },
30 |             { title: '源码', url: 'https://github.com/KeqingMoe/sakurairo' },
31 |         ]
32 |     },
33 |     search: {
34 |         path: '/',
35 |         param: 's',
36 |     },
37 |     social: {
38 |         links: [
39 |             {
40 |                 icon: 'github',
41 |                 link: 'https://github.com/KeqingMoe',
42 |                 name: 'GitHub'
43 |             },
44 |             {
45 |                 icon: 'tg',
46 |                 link: 'https://t.me/keqingmoe',
47 |                 name: 'Telegram'
48 |             },
49 |             {
50 |                 icon: 'mail',
51 |                 link: 'mailto:me@keqing.moe',
52 |                 name: 'E-mail'
53 |             },
54 |         ]
55 |     },
56 |     footer: {
57 |         content: '感谢您的使用！'
58 |     },
59 |     style: {
60 |         themeSkin: '#8e78c6',
61 |         themeSkinMatching: '#5892eb',
62 |         themeSkinDark: '#211a39',
63 | 
64 |         menuRadius: '10px',
65 |         menuSelectionRadius: '10px',
66 |     },
67 |     posts: posts
68 | } satisfies Iro.Config;
69 | 


--------------------------------------------------------------------------------
/.vitepress/theme/config/example.ts:
--------------------------------------------------------------------------------
 1 | import { Iro } from "./types.mts";
 2 | 
 3 | /**
 4 |  * VitePress 主题 Sakurairo 的配置文件示例
 5 |  */
 6 | export default {
 7 |     title: "Sakurairo",
 8 |     titleTemplate: "Sakurairo 主题演示站点",
 9 |     description: "Hello world!",
10 |     favicon: '/favicon.png',
11 |     cover: {
12 |         avatar: '/avatar.png',
13 |         signature: '正在努力移植到 VitePress！',
14 |         background: {
15 |             random: true,
16 |             desktop: 'https://t.alcy.cc/fj/',
17 |             mobile: 'https://t.alcy.cc/mp/',
18 |         }
19 |     },
20 |     nav: {
21 |         icon: '/icon.png',
22 |         links: [
23 |             { title: '首页', url: '/' },
24 |             { title: '404 页面演示', url: '/404' },
25 |             { title: '源码', url: 'https://github.com/keqingmoe/sakurairo' },
26 |         ]
27 |     },
28 |     search: {
29 |         path: '/',
30 |         param: 's',
31 |     },
32 |     social: {
33 |         links: [
34 |             {
35 |                 icon: 'github',
36 |                 link: 'https://github.com/KeqingMoe',
37 |                 name: 'GitHub',
38 |             },
39 |             {
40 |                 icon: 'tg',
41 |                 link: 'https://t.me/keqingmoe',
42 |                 name: 'Telegram',
43 |             },
44 |             {
45 |                 icon: 'mail',
46 |                 link: 'mailto:me@keqing.moe',
47 |                 name: 'E-mail',
48 |             },
49 |         ]
50 |     },
51 |     footer: {
52 |         content: 'Hello world!',
53 |         beforeSlot: false,
54 |     },
55 |     error404: {
56 |         title: '404 Not Found',
57 |         text: '这里什么都没有...',
58 |     },
59 |     style: {
60 |         themeSkin: '#8e78c6',
61 |         themeSkinMatching: '#5892eb',
62 |         themeSkinDark: '#211a39',
63 | 
64 |         menuRadius: '10px',
65 |         menuSelectionRadius: '10px',
66 |     },
67 |     posts:[
68 |         {
69 |             title:'这不是一篇文章',
70 |             url:'/404',
71 |             date:'2024-10-16',
72 |             description:'点进去是 404 页面。'
73 |         }
74 |     ]
75 | } satisfies Iro.Config;
76 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Home/PostList.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { inject } from 'vue';
 3 | 
 4 | import { data as iro } from '../../iro.data';
 5 | 
 6 | const iroDark = inject('iroDark');
 7 | 
 8 | import PostListItem from './PostListItem.vue';
 9 | 
10 | const posts = iro.posts;
11 | const bg = iro.cover.background;
12 | 
13 | for (let i in posts) {
14 |     posts[i].floatRight = (i % 2) == 0;
15 |     if (!('thumb' in posts[i])) {
16 |         let thumb = bg.desktop;
17 |         if (bg.random) {
18 |             thumb += `?${i}`;
19 |         }
20 |         posts[i].thumb = thumb;
21 |     }
22 | }
23 | 
24 | </script>
25 | 
26 | <template>
27 |     <div class="iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
28 |         <div class="iro-post-list">
29 |             <div>
30 |                 <main class="iro-main" role="main">
31 |                     <h1 class="title">
32 |                         <fa-i icon="fa-solid fa-feather"></fa-i>
33 |                         <br>
34 |                         文章
35 |                     </h1>
36 |                     <PostListItem v-for="(post, index) in posts" :title="post.title" :url="post.url" :thumb="post.thumb"
37 |                         :date="post.date" :description="post.description" :float-right="post.floatRight"></PostListItem>
38 |                 </main>
39 |                 <div class="iro-pagination"></div>
40 |             </div>
41 |         </div>
42 |     </div>
43 | </template>
44 | 
45 | 
46 | <style scoped lang="scss">
47 | .iro-root {
48 | 
49 |     /*
50 |         --iro-var-: ;
51 |     */
52 |     &.iro-light {
53 |         --iro-var-1: var(--iro-theme-skin, #505050);
54 |     }
55 | 
56 |     &.iro-dark {
57 |         --iro-var-1: #CCCCCC;
58 |     }
59 | }
60 | 
61 | .iro-main {
62 |     padding: 7.5% 0 0;
63 | }
64 | 
65 | .iro-post-list {
66 |     max-width: 820px;
67 |     margin-left: auto;
68 |     margin-right: auto;
69 | }
70 | 
71 | .title {
72 |     color: var(--iro-var-1);
73 |     font-size: 20px;
74 |     font-weight: var(--iro-global-font-weight, 400);
75 |     padding-bottom: 10px;
76 |     padding-left: 3px;
77 |     padding-right: 3px;
78 |     margin-bottom: 30px;
79 |     transition: all 0.8s ease !important;
80 |     animation: iro-fade-in-down 2s;
81 |     text-align: center;
82 |     line-height: 30px;
83 | }
84 | 
85 | .iro-pagination {
86 |     width: 100%;
87 |     padding: 20px 0;
88 |     text-align: center;
89 |     margin: 40px 0 80px;
90 |     display: inline-block;
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Footer.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useData } from 'vitepress';
  3 | import { inject, ref } from 'vue';
  4 | 
  5 | import { data as iro } from '../iro.data';
  6 | 
  7 | const iroDark = inject('iroDark');
  8 | 
  9 | </script>
 10 | 
 11 | <template>
 12 |     <div class="iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
 13 |         <footer class="iro-footer" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
 14 |             <div class="iro-header-container">
 15 |                 <div class="iro-sakura-icon">
 16 |                     <img src="/res/iro/sakura_icon.svg" draggable="false" alt="sakura icon">
 17 |                 </div>
 18 |                 <p v-if="iro?.footer?.beforeSlot" v-html="iro.footer.content"></p>
 19 |                 <slot name="iro-footer"></slot>
 20 |                 <p v-if="!iro?.footer?.beforeSlot" v-html="iro.footer.content"></p>
 21 |                 <span class="iro-theme-info">
 22 |                     <a href="https://github.keqing.moe/keqingmoe/sakurairo">Theme VitePress Sakurairo</a> <a
 23 |                         href="https://keqing.moe">by KeqingMoe</a>
 24 |                 </span>
 25 |             </div>
 26 |         </footer>
 27 |     </div>
 28 | </template>
 29 | 
 30 | <style scoped lang="scss">
 31 | .iro-root {
 32 |     &.iro-light {
 33 |         --iro-var-1: rgba(255, 255, 255, 0.8);
 34 |     }
 35 | 
 36 |     &.iro-dark {
 37 |         --iro-var-1: rgba(51, 51, 51);
 38 |     }
 39 | }
 40 | 
 41 | .iro-footer {
 42 |     position: relative !important;
 43 |     padding: max(2%, 45px);
 44 |     background: var(--iro-var-1);
 45 |     animation: iro-blur .8s;
 46 |     transition: all 0.8s ease;
 47 |     display: block;
 48 | 
 49 |     font-size: 13px;
 50 |     font-weight: var(--iro-global-font-weight);
 51 | 
 52 |     .iro-sakura-icon {
 53 |         width: max-content;
 54 |         height: max-content;
 55 |         margin: auto;
 56 |         margin-bottom: 16px;
 57 | 
 58 |         img {
 59 |             animation: iro-slow-rotate 10s linear infinite;
 60 |         }
 61 |     }
 62 | 
 63 |     :deep(a) {
 64 |         color: #B9B9B9;
 65 | 
 66 |         &:hover {
 67 |             color: var(--iro-theme-skin-matching, #F9D938);
 68 |         }
 69 |     }
 70 | 
 71 |     :deep(p) {
 72 |         color: #666666;
 73 |     }
 74 | }
 75 | 
 76 | .iro-header-container {
 77 |     margin: 0 auto;
 78 |     max-width: var(--vp-layout-max-width);
 79 |     text-align: center;
 80 | }
 81 | 
 82 | @keyframes iro-blur {
 83 |     0% {
 84 |         -webkit-filter: blur(10px);
 85 |         -moz-filter: blur(10px);
 86 |         -ms-filter: blur(10px);
 87 |         filter: blur(10px);
 88 |     }
 89 | 
 90 |     50% {
 91 |         -webkit-filter: blur(5px);
 92 |         -moz-filter: blur(5px);
 93 |         -ms-filter: blur(5px);
 94 |         filter: blur(5px);
 95 |     }
 96 | 
 97 |     100% {
 98 |         -webkit-filter: blur(0px);
 99 |         -moz-filter: blur(0px);
100 |         -ms-filter: blur(0px);
101 |         filter: blur(0px);
102 |     }
103 | }
104 | 
105 | 
106 | @keyframes iro-slow-rotate {
107 |     from {
108 |         transform: rotate(0deg);
109 |     }
110 | 
111 |     to {
112 |         transform: rotate(360deg);
113 |     }
114 | }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Header/Nav.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useData } from 'vitepress';
  3 | import { inject, provide, ref } from 'vue';
  4 | 
  5 | import { data as iro } from '../../iro.data';
  6 | 
  7 | import NavHeader from './NavHeader.vue';
  8 | 
  9 | const iroDark = inject('iroDark');
 10 | const isAtTop = inject('isAtTop');
 11 | 
 12 | provide('isAtTop', isAtTop);
 13 | 
 14 | const toggleIroOpen = () => {
 15 |     const htmlEl = document.getElementsByTagName('html')[0];
 16 |     iroNavOpen.value = !iroNavOpen.value;
 17 |     htmlEl.classList.toggle('iro-open-nav');
 18 | }
 19 | 
 20 | const iroNavOpen = inject('iroNavOpen');
 21 | 
 22 | </script>
 23 | 
 24 | <template>
 25 |     <div class="iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
 26 |         <NavHeader></NavHeader>
 27 |         <div class="iro-open-nav iro-no-select" :class="{ 'iro-nav-open': iroNavOpen }" @click="toggleIroOpen">
 28 |             <div class="iro-icon-flat iro-no-select" style="padding: 30px;">
 29 |                 <div class="iro-more-icon"></div>
 30 |             </div>
 31 |         </div>
 32 |     </div>
 33 | </template>
 34 | 
 35 | <style scoped lang="scss">
 36 | .iro-root {
 37 |     &.iro-light {
 38 |         --iro-var-1: var(--iro-theme-skin, #505050);
 39 |         --iro-var-2: #FFFFFF;
 40 |     }
 41 | 
 42 |     &.iro-dark {
 43 |         --iro-var-1: var(--iro-theme-skin-dark);
 44 |         --iro-var-2: var(--iro-theme-skin-dark);
 45 |     }
 46 | }
 47 | 
 48 | .iro-open-nav {
 49 |     transition-duration: .5s;
 50 |     height: 50px;
 51 |     position: fixed;
 52 |     top: 0;
 53 |     z-index: 9999;
 54 |     background: 0 0;
 55 |     display: none;
 56 | 
 57 |     @media (max-width:860px) {
 58 |         display: block;
 59 |     }
 60 | 
 61 |     &.iro-open-nav {
 62 |         left: 0px;
 63 |         transition: all 0.5s ease-in-out;
 64 | 
 65 |         &.iro-nav-open {
 66 |             left: 250px;
 67 | 
 68 |             .iro-more-icon {
 69 |                 background-color: transparent !important;
 70 | 
 71 |                 &::before,
 72 |                 &::after {
 73 |                     top: 0 !important;
 74 |                     background-color: var(--iro-var-2) !important;
 75 |                 }
 76 | 
 77 |                 &::before {
 78 |                     transform: rotate(-45deg);
 79 |                 }
 80 | 
 81 |                 &::after {
 82 |                     transform: rotate(45deg);
 83 |                 }
 84 |             }
 85 |         }
 86 |     }
 87 | 
 88 |     .iro-icon-flat {
 89 |         padding: 30px;
 90 | 
 91 |         left: 5vw;
 92 |         transition-duration: .2s;
 93 |         top: 28px;
 94 | 
 95 |     }
 96 | 
 97 |     .iro-more-icon {
 98 | 
 99 |         &,
100 |         &::before,
101 |         &::after {
102 |             background-color: var(--iro-var-1);
103 |             position: absolute;
104 |             width: 20px;
105 |             height: 3px;
106 |         }
107 | 
108 |         &::before,
109 |         &::after {
110 |             transition-duration: .5s;
111 |             content: "";
112 |             left: 0;
113 |         }
114 | 
115 |         &::before {
116 |             top: -8px;
117 |         }
118 | 
119 |         &::after {
120 |             top: +8px;
121 |         }
122 |     }
123 | }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Post/Post.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { computed, inject } from 'vue';
  3 | 
  4 | import { data as iro } from '../../iro.data';
  5 | import { useData } from 'vitepress';
  6 | 
  7 | const iroDark = inject('iroDark');
  8 | 
  9 | const { page } = useData();
 10 | 
 11 | const date = computed(
 12 |     () => new Date(page.value.lastUpdated)
 13 | );
 14 | 
 15 | </script>
 16 | 
 17 | <template>
 18 |     <div>
 19 |         <div class="iro-blank" style="padding-top: 75px;"></div>
 20 |         <div class="iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
 21 |             <main class="iro-post-main">
 22 |                 <article>
 23 |                     <header class="iro-post-header">
 24 |                         <h1 class="iro-post-title">
 25 |                             {{ $frontmatter.title ?? '文章' }}
 26 |                         </h1>
 27 |                         <p class="iro-post-ctime">
 28 |                             最后更新时间：
 29 |                             <time :datetime="date.toISOString">{{ date.toLocaleString() }}</time>
 30 |                         </p>
 31 |                         <hr />
 32 |                     </header>
 33 |                     <div class="iro-post-content">
 34 |                         <slot></slot>
 35 |                     </div>
 36 |                     <div class="iro-post-footer"></div>
 37 |                 </article>
 38 |             </main>
 39 |         </div>
 40 |     </div>
 41 | </template>
 42 | 
 43 | 
 44 | <style scoped lang="scss">
 45 | .iro-root {
 46 |     width: min(860px, 100%);
 47 |     padding: 0 20px 80px 20px;
 48 |     margin: auto;
 49 |     background-color: transparent !important;
 50 |     animation: iro-main 1s;
 51 | 
 52 |     /*
 53 |         --iro-var-: ;
 54 |     */
 55 |     transition: --iro-var-1 0.8s ease !important;
 56 | 
 57 |     &::before {
 58 |         content: "";
 59 |         display: table;
 60 |         table-layout: fixed;
 61 |     }
 62 | 
 63 |     &.iro-light {
 64 |         --iro-var-1: rgba(255, 255, 255, 1);
 65 |     }
 66 | 
 67 |     &.iro-dark {
 68 |         --iro-var-1: rgba(51, 51, 51, 1);
 69 |     }
 70 | }
 71 | 
 72 | .iro-post-main {
 73 |     display: block;
 74 |     padding: 7.5% 0 0;
 75 |     margin-left: 10px;
 76 | }
 77 | 
 78 | :deep(h1),
 79 | :deep(h2),
 80 | :deep(h3),
 81 | :deep(h4),
 82 | :deep(h5),
 83 | :deep(h6) {
 84 |     margin-left: -10px;
 85 |     /* 或者你希望的任何缩进值 */
 86 | }
 87 | 
 88 | article {
 89 |     display: block;
 90 |     margin: 0 0 1.5em;
 91 | }
 92 | 
 93 | .iro-post-header {
 94 |     text-align: center;
 95 |     margin: auto;
 96 | }
 97 | 
 98 | .iro-post-title {
 99 |     animation: iro-fade-in-down 2s;
100 |     font-size: 24px;
101 |     font-weight: 300;
102 | 
103 |     &::before {
104 |         display: block;
105 |         content: " ";
106 |         height: 80px;
107 |         margin-top: -80px;
108 |         visibility: hidden;
109 |     }
110 | }
111 | 
112 | .iro-post-ctime {
113 |     font-size: 12px;
114 |     margin: 0;
115 |     color: #888;
116 |     font-weight: var(--iro-global-font-weight);
117 |     animation: iro-fade-in-down 2s;
118 | }
119 | 
120 | hr {
121 |     width: 30%;
122 |     height: 0px;
123 |     border: 0;
124 |     margin: 20px auto;
125 | }
126 | 
127 | .iro-post-content {
128 |     position: relative;
129 | }
130 | 
131 | @keyframes iro-main {
132 |     0% {
133 |         opacity: 0;
134 |         transform: translateY(50px);
135 |     }
136 | 
137 |     100% {
138 |         opacity: 1;
139 |         transform: translateY(0);
140 |     }
141 | }
142 | </style>
143 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Header/NavSearch.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useData } from 'vitepress';
  3 | import { inject } from 'vue';
  4 | 
  5 | import { data as iro } from '../../iro.data';
  6 | 
  7 | const iroDark = inject('iroDark');
  8 | 
  9 | const iroShowSearch = inject('iroShowSearch');
 10 | const toggleSearch = () => iroShowSearch.value = !iroShowSearch.value;
 11 | 
 12 | </script>
 13 | 
 14 | <template>
 15 | 	<div class="iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
 16 | 		<form class="iro-nav-search" :class="{ 'iro-show-search': iroShowSearch }" method="get"
 17 | 			:action="iro?.search?.path ?? 'search'" role="search">
 18 | 			<div class="iro-search-form">
 19 | 				<div class="micro">
 20 | 					<p class="micro mb-">想要找点什么呢？</p>
 21 | 					<input class="text-input" type="search" :name="iro?.search?.param ?? 's'" placeholder="搜索"
 22 | 						required="">
 23 | 				</div>
 24 | 			</div>
 25 | 			<div class="iro-search-close" @click="toggleSearch"></div>
 26 | 		</form>
 27 | 	</div>
 28 | </template>
 29 | 
 30 | <style scoped lang="scss">
 31 | .iro-root {
 32 | 	&.iro-light {
 33 | 		--iro-var-1: rgba(255, 255, 255, 0.7);
 34 | 		--iro-var-2: var(--iro-theme-skin) !important;
 35 | 		--iro-var-3: rgba(255, 255, 255, 0.7);
 36 | 	}
 37 | 
 38 | 	&.iro-dark {
 39 | 		--iro-var-1: rgba(51, 51, 51, 0.9);
 40 | 		--iro-var-2: #CCCCCC !important;
 41 | 		--iro-var-3: rgba(51, 51, 51, 0.8);
 42 | 	}
 43 | }
 44 | 
 45 | .iro-nav-search {
 46 | 	transition: opacity .25s ease;
 47 | 	overflow: hidden;
 48 | 	z-index: 9999;
 49 | 	position: fixed;
 50 | 	top: 0;
 51 | 	right: 0;
 52 | 	left: 0;
 53 | 	bottom: 0;
 54 | 	visibility: hidden;
 55 | 	opacity: 0;
 56 | 	backdrop-filter: blur(10px);
 57 | 
 58 | 	&.iro-show-search {
 59 | 		visibility: visible;
 60 | 		opacity: 1;
 61 | 		animation: iro-elastic .5s;
 62 | 		background-color: var(--iro-var-1);
 63 | 		background-repeat: no-repeat;
 64 | 		background-position: bottom right;
 65 | 	}
 66 | 
 67 | 	.iro-search-close {
 68 | 		position: absolute;
 69 | 		width: 35px;
 70 | 		height: 35px;
 71 | 		background: 0 0;
 72 | 		top: 20px;
 73 | 		right: 15px;
 74 | 		cursor: pointer;
 75 | 
 76 | 		&::before,
 77 | 		&::after {
 78 | 			background-color: var(--iro-var-2);
 79 | 			position: absolute;
 80 | 			content: "";
 81 | 			width: 30px;
 82 | 			height: 2px;
 83 | 			top: 17px;
 84 | 			left: 2px;
 85 | 		}
 86 | 
 87 | 		&::before {
 88 | 			transform: rotate(-45deg);
 89 | 		}
 90 | 
 91 | 		&::after {
 92 | 			transform: rotate(45deg);
 93 | 		}
 94 | 	}
 95 | 
 96 | 	.iro-search-form {
 97 | 		max-width: 640px;
 98 | 		padding: 0 20px;
 99 | 		margin: auto;
100 | 		text-align: left;
101 | 		position: absolute;
102 | 		width: 100%;
103 | 		left: 0;
104 | 		right: 0;
105 | 		height: 285px;
106 | 		top: 0;
107 | 		bottom: 0;
108 | 
109 | 		div {
110 | 			position: relative;
111 | 			width: 100%;
112 | 
113 | 			p {
114 | 				padding-left: 24px;
115 | 				position: relative;
116 | 				width: 100%;
117 | 			}
118 | 
119 | 			input {
120 | 				font-size: 1.5rem;
121 | 				background: var(--iro-var-3);
122 | 				padding: 12px 24px;
123 | 				width: 100%;
124 | 				outline: 0;
125 | 				border-radius: 50px;
126 | 				box-sizing: border-box;
127 | 				font-weight: var(--iro-global-font-weight);
128 | 				transition: all 0.8s ease;
129 | 			}
130 | 		}
131 | 	}
132 | }
133 | 
134 | @keyframes iro-elastic {
135 | 	0% {
136 | 		transform: scale(0);
137 | 	}
138 | 
139 | 	55% {
140 | 		transform: scale(1);
141 | 	}
142 | 
143 | 	70% {
144 | 		transform: scale(.98);
145 | 	}
146 | 
147 | 	100% {
148 | 		transform: scale(1);
149 | 	}
150 | }
151 | </style>
152 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | 已归档，死了，我没空继续维护它
  2 | 
  3 | # Sakurairo
  4 | 
  5 | 将 [WordPress 主题 Sakurairo](https://github.com/mirai-mamori/Sakurairo) 移植到 VitePress。
  6 | 
  7 | 演示站点：[iro.keqing.moe](https://iro.keqing.moe) 和 [iro.pages.dev](https://iro.pages.dev)。
  8 | 
  9 | 使用文档：[docs.keqing.moe/iro](https://docs.keqing.moe/iro/)。
 10 | 
 11 | ## 特性
 12 | 
 13 | - 适用于 VitePress 的静态站点，响应速度远快于 WordPress，可以部署于静态站点托管平台
 14 | - 内部使用 Vue3，二次开发效率高、难度低，结构清晰，可复用性高
 15 | 
 16 | ## 快速开始
 17 | 
 18 | 先基于本模板存储库创建一个自己的存储库。
 19 | 
 20 | 安装依赖：
 21 | 
 22 | ```shell
 23 | npm install
 24 | ```
 25 | 
 26 | 以开发模式运行：
 27 | ```shell
 28 | npm run dev
 29 | ```
 30 | 
 31 | 构建：
 32 | ```shell
 33 | npm run build
 34 | ```
 35 | 
 36 | 本地部署：
 37 | ```shell
 38 | npm run preview
 39 | ```
 40 | 
 41 | 部署于静态站点托管平台（如 GitHub Pages 或 Cloudflare Pages）的流程与其他 VitePress 项目相同。
 42 | 
 43 | ## 自定义
 44 | 
 45 | ### 基本自定义
 46 | 
 47 | 基本配置存放在 `iro.ts` 中，您可以自由修改。在 `types.mts` 中可以看到 `IroConfig` 的各种属性及其用法。`iro-example.ts` 中把每一个属性都写出来了，可以用作参考，或是直接复制后修改。
 48 | 
 49 | 在 `config.ts` 中添加 `markdown-it` 插件，默认自带<ruby>注音符号<rt>振假名</rt></ruby>插件 (@mdit/plugin-ruby)，使用的方式请自行参考该插件的文档。
 50 | 
 51 | 直接在根目录下创建 `.md` 文件撰写文章，将图片等资源文件放在 `public/` 目录下，如同本存储库演示的一样。
 52 | 
 53 | 使用了 Font Awesome Icons，并注册了全局组件 `<fa-i>`，使用方式请参考 [官方文档](https://docs.fontawesome.com/web/use-with/vue/style)。
 54 | 
 55 | ### 高级自定义
 56 | 
 57 | 可以像扩展 VitePress 默认主题一样扩展 Sakurairo，具体包括：
 58 | 
 59 | - 使用插槽：
 60 |   - 使用 `iro-home-page` 以自定义首页的封面之后的部分
 61 |   - 使用 `iro-signature` 以自定义签名组件
 62 |   - 使用 `iro-not-found` 以自定义 404 页面
 63 |   - 使用 `iro-page` 以自定义 **自定义页面**（与 VitePress 默认主题的 `layout` 为 `page` 的页面行为类似）。 
 64 |   - 使用 `iro-home` 以自定义首页
 65 |   - 使用 `iro-post-list` 以自定义首页文章展示部分
 66 |   - 使用 `iro-post` 以自定义文章页面
 67 |   - 使用 `iro-other` 以自定义其他页面
 68 |   - 使用 `iro-footer` 以在页脚添加自定义组件
 69 |   - 以上的插槽都被转发到 `Iro.vue` ，可以在其中找到
 70 | - 重写内部组件：
 71 |   - 重写 `Home.vue` 以自定义首页
 72 |   - 重写 `Panel.vue` 以自定义右下角小工具面板
 73 |   - 重写 `Footer.vue` 以自定义整个页脚
 74 |   - 重写 `Cover.vue` 以自定义首页封面
 75 |   - 重写 `CoverSocialButton.vue` 以自定义首页社交链接
 76 |   - 重写 `NavMo.vue` 以自定义移动端侧边栏
 77 |   - 重写 `NavSearch.vue` 以自定义桌面端搜索框
 78 |   - 重写 `NavHeader.vue` 以自定义导航栏
 79 |   - 重写 `NotFound.vue` 以自定义 404 页面
 80 |   - 重写 `Post.vue` 以自定义文章页面
 81 |   - 其他组件不建议重写，但如有重写的需求，可以在源代码中查找
 82 | 
 83 | 不过，并不建议您采用重写组件的方式，因为内部组件的名字在未来可能会频繁变动。
 84 | 
 85 | 由于本项目刚刚立项没多久，目前功能性还差很多没有实现，请耐心等待，或参与贡献。
 86 | 
 87 | ### 自己编写组件
 88 | 
 89 | 您可以以 `template.vue` 为模板，它已经预设了处理浅色、深色模式的逻辑，导入 `iro.data.ts` 等功能。也可适当参考我的源代码。
 90 | 
 91 | 很抱歉，由于能力问题，我暂时没有做任何 SSR 兼容，这是通过 `Iro.vue` 来封装 `Layout.vue` 并套上一层 `<ClientOnly>` 实现的。因此，当您自己编写组件并放入插槽或者用于重写时，暂时也可以不做 SSR 兼容，但在未来的版本，您可能需要进行修改以适应 SSR 兼容的 Sakurairo。
 92 | 
 93 | ### 站内搜索功能
 94 | 
 95 | 该功能会在未来的版本中得到支持，但如果您要自己实现该功能，可以按如下的方式实现：
 96 | 
 97 | 1. 配置 `iro.ts` ，填写 `iro.search` 字段。
 98 | 2. 自己实现一个位于 ``` `http(s)://您的域名/`${iro.search.path}?${iro.search.param}=搜索内容 ``` （这是一个模板字符串）的搜索页面，例如 `https://keqing.moe/?s=114514` ，您需要自己处理参数实现站内搜索功能。
 99 | 
100 | ## 发展规划
101 | 
102 | - 实现更多原版 Sakurairo 的样式。
103 | - 增强可拓展性。
104 | - 优化项目结构和代码组织。
105 | - 发布 npm 包。
106 | - 评论系统。
107 | - 统计功能。
108 | - 辅助配置主题的控制面板或脚本。
109 | - 站内搜索功能。
110 | - 字体自定义。
111 | - SSR 兼容
112 | 
113 | ## 开源信息
114 | 
115 | 本项目受 [WordPress 主题 Sakurairo](https://github.com/mirai-mamori/Sakurairo)。因不满于 WordPress 的高占用，又舍不得 Sakurairo 主题，我决定将其移植到 VitePress 上。
116 | 
117 | 本项目是 [原项目](https://github.com/mirai-mamori/Sakurairo) 的衍生项目，最终目标是在外观和功能上还原原主题，并实现一些特色功能。因原项目使用的是 GPLv2 开源协议，所以本项目也使用 GPLv2 开源协议，如果您要基于本项目进行二次开发，或（模仿我）基于原 Sakurairo 进行二次开发，也应当使用 GPLv2 开源协议并遵守协议的要求。
118 | 
119 | 本衍生项目使用了原项目的部分资源（例如图片等），我暂未获得原项目的授权，也未与其联系，如有任何侵权，请联系我。
120 | 
121 | 项目的开发是困难的事情，如果你喜欢（原） Sakurairo 主题，或有参与本项目的打算，请发起 Issues 或 PR，或在我的个人主页找到我的联系方式并联系我。
122 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Header/NavMo.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useData } from 'vitepress';
  3 | import { inject } from 'vue';
  4 | 
  5 | import { data as iro } from '../../iro.data';
  6 | 
  7 | const iroDark = inject('iroDark');
  8 | 
  9 | </script>
 10 | 
 11 | <template>
 12 |     <div class="iro-m-nav iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
 13 |         <div class="iro-m-avatar">
 14 |             <img alt="mobile avatar" :src="iro.cover.avatar">
 15 |         </div>
 16 |         <div class="iro-m-search" v-if="iro?.search">
 17 |             <form class="iro-m-search-form" method="get" :action="iro?.search?.path ?? 'search'" role="search">
 18 |                 <input class="iro-m-search-input" type="search" :name="iro?.search?.param ?? 's'" placeholder="搜索..."
 19 |                     required>
 20 |             </form>
 21 |         </div>
 22 |         <div class="iro-nav-menu" v-if="iro.nav?.links">
 23 |             <ul>
 24 |                 <li v-for="link in iro.nav.links"><a :href="link.url">{{ link.title }}</a></li>
 25 |             </ul>
 26 |         </div>
 27 |     </div>
 28 | </template>
 29 | 
 30 | <style scoped lang="scss">
 31 | .iro-root {
 32 |     &.iro-light {
 33 |         --iro-var-1: rgb(255, 255, 255, 0.9);
 34 |         --iro-var-2: #666;
 35 |         --iro-var-3: 0 1px 30px -4px #e8e8e8;
 36 |         --iro-var-4: rgba(255, 255, 255, 0.5);
 37 |         --iro-var-5: var(--iro-theme-skin, #505050);
 38 |     }
 39 | 
 40 |     &.iro-dark {
 41 |         --iro-var-1: rgba(26, 26, 26, 0.85);
 42 |         --iro-var-2: #CCCCCC;
 43 |         --iro-var-3: 0 1px 20px 2px rgb(26, 26, 26, 0.8);
 44 |         --iro-var-4: rgba(26, 26, 26, 0.6);
 45 |         --iro-var-5: #CCCCCC;
 46 |     }
 47 | }
 48 | 
 49 | .iro-m-nav {
 50 |     display: none;
 51 | }
 52 | 
 53 | @media (max-width:860px) {
 54 |     .iro-m-nav {
 55 |         background-color: var(--iro-var-1);
 56 |         height: 100%;
 57 |         display: block;
 58 | 
 59 |         .iro-m-avatar {
 60 |             position: relative;
 61 |             width: 250px;
 62 |             max-width: 250px;
 63 |             height: auto;
 64 |             margin: 0 auto;
 65 |             padding: 40px 0 0;
 66 |             text-align: center;
 67 | 
 68 |             img {
 69 |                 width: 80px;
 70 |                 height: 80px;
 71 |                 max-width: 80px;
 72 |                 border-radius: 100%;
 73 |                 margin: auto;
 74 |             }
 75 |         }
 76 |     }
 77 | 
 78 |     .iro-m-search {
 79 |         .iro-m-search-form {
 80 |             position: relative;
 81 |             width: 250px;
 82 |             max-width: 250px;
 83 |             margin: 20px 0px;
 84 |             padding: 0px 20px;
 85 |         }
 86 | 
 87 |         .iro-m-search-input {
 88 |             width: 100%;
 89 |             border: 0;
 90 |             padding: 10px;
 91 |             box-shadow: var(--iro-var-3);
 92 |             background: var(--iro-var-4);
 93 |             border-radius: 10px;
 94 |             outline: 0;
 95 |             color: var(--iro-var-2);
 96 |         }
 97 | 
 98 |     }
 99 | 
100 |     .iro-nav-menu {
101 |         display: flex;
102 |         flex-direction: column;
103 |         align-items: center;
104 |         padding: 0;
105 |         margin: 0;
106 | 
107 |         ul li {
108 |             transition-duration: .25s;
109 |             display: block;
110 |             padding: 10px 0px;
111 |             color: #fff;
112 |             letter-spacing: .02em;
113 |             text-align: center;
114 | 
115 |             a {
116 |                 color: var(--iro-var-5);
117 |                 font-size: 16px;
118 |             }
119 |         }
120 |     }
121 | }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/.vitepress/theme/style.scss:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     // --iro-global-font-weight: 300;
  3 |     // --iro-font-color: #505050;
  4 |     // --iro-dm-bg-transparency: 0.8;
  5 | }
  6 | 
  7 | * {
  8 |     box-sizing: border-box;
  9 | }
 10 | 
 11 | html {
 12 |     font-family: Arial, Helvetica;
 13 |     overflow-x: hidden;
 14 |     background-color: unset;
 15 | 
 16 |     &.iro-open-nav {
 17 |         overflow: hidden;
 18 |     }
 19 | 
 20 |     &::-webkit-scrollbar {
 21 |         width: 6px;
 22 |         height: 6px;
 23 |     }
 24 | 
 25 |     &::-webkit-scrollbar-track,
 26 |     &.dark::-webkit-scrollbar-thumb {
 27 |         background-color: #eee;
 28 |     }
 29 | 
 30 |     &::-webkit-scrollbar-thumb {
 31 |         background-color: var(--iro-theme-skin);
 32 |         border-radius: 25px;
 33 |     }
 34 | 
 35 |     &.dark::-webkit-scrollbar-track {
 36 |         background-color: var(--iro-theme-skin);
 37 |     }
 38 | 
 39 | }
 40 | 
 41 | body {
 42 |     margin: 0;
 43 |     font-size: 17px;
 44 |     text-shadow: 0 0 1px rgba(0, 0, 0, .1);
 45 |     font-size: 15px;
 46 |     line-height: 1.5;
 47 |     background-attachment: fixed;
 48 |     background-position: center;
 49 |     scrollbar-width: 6px;
 50 |     font-weight: var(--iro-global-font-weight);
 51 | 
 52 |     font-family: Noto Serif SC !important;
 53 | }
 54 | 
 55 | ::before,
 56 | ::after {
 57 |     box-sizing: inherit;
 58 | }
 59 | 
 60 | a {
 61 |     background-color: transparent;
 62 |     text-decoration: none;
 63 |     outline: 0;
 64 |     transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
 65 |     word-break: break-word;
 66 | }
 67 | 
 68 | input {
 69 |     color: var(--iro-theme-skin);
 70 |     font: inherit;
 71 |     margin: 0;
 72 |     line-height: 1.5;
 73 |     font-size: 15px;
 74 |     font-weight: var(--iro-global-font-weight);
 75 | }
 76 | 
 77 | input[type=search] {
 78 |     color: #666;
 79 |     border: 1px solid var(--iro-theme-skin, #505050);
 80 |     border-radius: 10px;
 81 |     padding: 3px;
 82 | }
 83 | 
 84 | ul {
 85 |     margin: 5px;
 86 |     padding-left: 0px;
 87 |     list-style: disc;
 88 | }
 89 | 
 90 | p {
 91 |     margin-bottom: 1.5em;
 92 | }
 93 | 
 94 | button {
 95 |     color: var(--iro-btn-bg-color);
 96 |     font: inherit;
 97 |     margin: 0;
 98 |     overflow: visible;
 99 |     text-transform: none;
100 |     appearance: button;
101 |     cursor: pointer;
102 |     font-size: .75rem;
103 |     line-height: 1;
104 |     border: 1px solid;
105 |     border-color: #ccc #ccc #bbb;
106 |     border-radius: 3px;
107 |     background: #e6e6e6;
108 |     box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 15px 17px rgba(255, 255, 255, .5), inset 0 -5px 12px rgba(0, 0, 0, .05);
109 |     padding: .6em 1em .4em;
110 |     font-weight: var(--iro-global-font-weight);
111 | }
112 | 
113 | rt {
114 |     font-size: 75%;
115 | }
116 | 
117 | .iro-no-select {
118 |     user-select: none;
119 | }
120 | 
121 | .iro-blank {
122 |     padding-top: 80px;
123 |     background-color: rgba(0, 0, 0, 0);
124 |     transition: background-color 0.8s;
125 | }
126 | 
127 | h1 {
128 |     font-size: 2em;
129 |     margin: .67em 0;
130 |     clear: both;
131 |     font-weight: var(--iro-global-font-weight);
132 | 
133 |     &::before {
134 |         display: block;
135 |         content: " ";
136 |         height: 80px;
137 |         margin-top: -80px;
138 |         visibility: hidden;
139 |     }
140 | }
141 | 
142 | h1,
143 | h2,
144 | h3,
145 | h4,
146 | h5,
147 | h6 {
148 |     border-top: none !important;
149 | }
150 | 
151 | hr {
152 |     box-sizing: content-box;
153 |     height: 1px;
154 |     background-color: #ccc;
155 |     border: 0;
156 |     margin-bottom: 1.5em;
157 | }
158 | 
159 | @keyframes iro-fade-in-down {
160 |     0% {
161 |         -moz-transform: translateY(-100%);
162 |         -ms-transform: translateY(-100%);
163 |         -webkit-transform: translateY(-100%);
164 |         transform: translateY(-100%);
165 |         opacity: 0
166 |     }
167 | 
168 |     50% {
169 |         -moz-transform: translateY(-100%);
170 |         -ms-transform: translateY(-100%);
171 |         -webkit-transform: translateY(-100%);
172 |         transform: translateY(-100%);
173 |         opacity: 0
174 |     }
175 | 
176 |     100% {
177 |         -moz-transform: translateY(0%);
178 |         -ms-transform: translateY(0%);
179 |         -webkit-transform: translateY(0%);
180 |         transform: translateY(0%);
181 |         opacity: 1
182 |     }
183 | }


--------------------------------------------------------------------------------
/.vitepress/theme/components/Panel.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useData } from 'vitepress';
  3 | import { inject, ref } from 'vue';
  4 | 
  5 | import { data as iro } from '../iro.data';
  6 | 
  7 | const iroDark = inject('iroDark');
  8 | const setLight = () => {
  9 |     const htmlEl = document.getElementsByTagName('html')[0];
 10 |     htmlEl.classList.remove('dark');
 11 |     iroDark.value = false;
 12 | };
 13 | const setDark = () => {
 14 |     const htmlEl = document.getElementsByTagName('html')[0];
 15 |     htmlEl.classList.add('dark');
 16 |     iroDark.value = true;
 17 | };
 18 | if (iroDark.value) {
 19 |     setDark();
 20 | } else {
 21 |     setLight();
 22 | }
 23 | 
 24 | const isAtTop = inject('isAtTop');
 25 | const iroShow = ref(false);
 26 | 
 27 | const toggleShow = () => iroShow.value = !iroShow.value;
 28 | 
 29 | </script>
 30 | 
 31 | <template>
 32 |     <div class="iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
 33 |         <button class="iro-panel-btn iro-go-top" :class="{ 'iro-hide': isAtTop }" title="回到顶部">
 34 |             <fa-i icon="fa-solid fa-caret-up" size="lg"></fa-i>
 35 |         </button>
 36 |         <button class="iro-panel-btn iro-show-panel" title="控制面板" @click="toggleShow">
 37 |             <fa-i icon="fa-solid fa-compass-drafting" size="lg" flip></fa-i>
 38 |         </button>
 39 | 
 40 |         <div class="iro-panel iro-no-select" :class="{ 'iro-show': iroShow }">
 41 |             <div class="iro-theme-ctrl">
 42 |                 <ul class="iro-list">
 43 |                     <li title="浅色模式" @click="setLight">
 44 |                         <fa-i icon="fa-regular fa-sun"></fa-i>
 45 |                     </li>
 46 |                     <li title="深色模式" @click="setDark">
 47 |                         <fa-i icon="fa-regular fa-moon"></fa-i>
 48 |                     </li>
 49 |                 </ul>
 50 |                 <!-- <ul class="iro-list iro-font-btn">
 51 |                     <li title="切换到字体 A">
 52 |                         <fa-i icon="fa-solid fa-font fa-lg"></fa-i>
 53 |                     </li>
 54 |                     <li title="切换到字体 B">
 55 |                         <fa-i icon="fa-solid fa-bold fa-lg"></fa-i>
 56 |                     </li>
 57 |                 </ul> -->
 58 |             </div>
 59 |         </div>
 60 |     </div>
 61 | </template>
 62 | 
 63 | <style scoped lang="scss">
 64 | .iro-root {
 65 |     &.iro-light {
 66 |         --iro-var-1: 0 1px 30px -4px #e8e8e8;
 67 |         --iro-var-2: rgba(255, 255, 255, 0.65);
 68 |         --iro-var-3: 1px solid #FFFFFF;
 69 |         --iro-var-4: var(--iro-theme-skin-matching, #F9D938);
 70 |         --iro-var-5: 0 1px 20px 10px #e8e8e8;
 71 |         --iro-var-6: rgba(255, 255, 255, 0.85);
 72 |         --iro-var-7: rgba(255, 255, 255, 0.8);
 73 |         --iro-var-8: 1px solid #FFFFFF;
 74 |         --iro-var-9: rgba(255, 255, 255, 0.8);
 75 |         --iro-var-10: 0 1px 20px 10px #e8e8e8;
 76 |     }
 77 | 
 78 |     &.iro-dark {
 79 |         --iro-var-1: 0 1px 20px 2px rgba(26, 26, 26, 0.8);
 80 |         --iro-var-2: rgba(26, 26, 26, 0.6);
 81 |         --iro-var-3: 1px solid #7d7d7d30;
 82 |         --iro-var-4: var(--iro-theme-skin-dark);
 83 |         --iro-var-5: 0 1px 30px -2px var(--iro-theme-skin-dark);
 84 |         --iro-var-6: rgba(26, 26, 26, 0.8);
 85 |         --iro-var-7: rgba(26, 26, 26, 0.6);
 86 |         --iro-var-8: 1.5px solid #7d7d7d30;
 87 |         --iro-var-9: rgba(26, 26, 26, 0.8);
 88 |         --iro-var-10: 0 1px 30px -2px rgba(26, 26, 26, 0.95);
 89 |     }
 90 | }
 91 | 
 92 | .iro-panel-btn {
 93 |     transition: all 0.8s ease;
 94 |     border-radius: var(--iro-menu-radius, 10px);
 95 |     outline: 0;
 96 |     z-index: 10000;
 97 |     right: 10px;
 98 |     position: fixed;
 99 |     color: #7D7D7D;
100 |     box-shadow: var(--iro-var-1);
101 |     background: var(--iro-var-2);
102 |     border: var(--iro-var-3);
103 |     --fa-animation-duration: 3s;
104 | 
105 |     &:hover {
106 |         color: var(--iro-var-4) !important;
107 |         box-shadow: var(--iro-var-5);
108 |         background: var(--iro-var-6);
109 |     }
110 | }
111 | 
112 | .iro-go-top {
113 |     bottom: 65px;
114 |     font-size: 16px;
115 |     padding: 6px 16px;
116 | }
117 | 
118 | .iro-show-panel {
119 |     bottom: 15px;
120 |     padding: 15px;
121 |     animation-duration: 3s;
122 | }
123 | 
124 | .iro-hide {
125 |     transform: scale(0);
126 | }
127 | 
128 | .iro-panel {
129 |     position: fixed;
130 |     left: auto;
131 |     bottom: 15px;
132 |     height: auto;
133 |     width: auto;
134 |     padding: 16px;
135 |     padding-bottom: 0;
136 |     border-radius: var(--iro-menu-selection-radius, 15px);
137 |     font-size: larger;
138 |     text-align: center;
139 |     box-shadow: none;
140 |     display: flex;
141 |     justify-content: space-between;
142 |     flex-direction: column;
143 |     z-index: 10000;
144 |     transform: translateY(120%);
145 |     transition: transform 0.4s ease-in-out;
146 |     right: 50px;
147 |     max-height: 85%;
148 | }
149 | 
150 | .iro-show {
151 |     transform: translateY(0);
152 |     transition: transform 0.4s ease-in-out;
153 | }
154 | 
155 | .iro-theme-ctrl {
156 |     height: auto;
157 |     margin: 0;
158 |     padding: 0;
159 |     text-align: center;
160 |     flex-grow: 1;
161 |     display: flex;
162 |     flex-direction: row-reverse;
163 | 
164 | }
165 | 
166 | .iro-list {
167 |     display: flex;
168 |     flex-wrap: wrap;
169 |     justify-content: space-between;
170 |     text-align: center;
171 |     padding: 5px;
172 |     margin: 5px;
173 |     flex-grow: 1;
174 |     border-radius: var(--iro-menu-selection-radius, 20%);
175 |     max-width: 125px;
176 |     transition: all .8s;
177 |     flex-direction: row;
178 |     box-shadow: var(--iro-var-1);
179 |     background-color: var(--iro-var-7);
180 |     border: var(--iro-var-8);
181 | 
182 |     &:hover {
183 |         background-color: var(--iro-var-9);
184 |         box-shadow: var(--iro-var-10);
185 |     }
186 | 
187 |     li {
188 |         display: inline-block;
189 |         margin: 2.5px;
190 |         line-height: 50px;
191 |         width: 50px;
192 |         border-radius: var(--iro-menu-radius, 20%);
193 |         transition: all .8s;
194 |         border: var(--iro-var-3);
195 |         flex-grow: 1;
196 |         box-sizing: border-box;
197 |         box-shadow: var(--iro-var-1);
198 |         background-color: var(--iro-var-9);
199 | 
200 |         &:hover {
201 |             color: #fff;
202 |             background-color: var(--iro-var-4);
203 |         }
204 |     }
205 | }
206 | 
207 | .iro-font-btn li {
208 |     font-family: 'Noto Serif SC';
209 |     border-style: none;
210 |     min-height: 30px;
211 |     min-width: 50px;
212 |     color: var(--iro-theme-skin, #505050);
213 |     border-radius: var(--iro-menu-radius, 5px);
214 | }
215 | </style>
216 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Home/Cover.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useData } from 'vitepress';
  3 | import { computed, inject, ref } from 'vue';
  4 | import CoverSocialButton from './CoverSocialButton.vue';
  5 | 
  6 | import { data as iro } from '../../iro.data';
  7 | 
  8 | const iroDark = inject('iroDark');
  9 | 
 10 | const iroBgPageId = ref(0);
 11 | 
 12 | const iroRandom = iro.cover.background?.random ?? false;
 13 | 
 14 | const isMobile = () => {
 15 |     let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
 16 |     return flag;
 17 | }
 18 | 
 19 | const iroBgUrlRaw = isMobile() ? iro.cover.background.mobile : iro.cover.background.desktop;
 20 | 
 21 | const iroBgUrl = computed(() => {
 22 |     return iroRandom ? iroBgUrlRaw + '?' + iroBgPageId.value : iroBgUrlRaw
 23 | });
 24 | 
 25 | </script>
 26 | 
 27 | <template>
 28 |     <div class="iro-header-top iro-root" :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark }">
 29 |         <figure class="iro-center-bg" :style="{ 'background-image': 'url(' + iroBgUrl + ')' }">
 30 |             <div class="iro-focus-info">
 31 |                 <div class="iro-favicon">
 32 |                     <a href="/">
 33 |                         <img alt="avatar" loading="lazy" :src="iro.cover.avatar">
 34 |                     </a>
 35 |                 </div>
 36 |                 <div class="iro-signature">
 37 |                     <slot name="iro-signature">
 38 |                         <p>{{ iro.cover.signature }}</p>
 39 |                     </slot>
 40 |                 </div>
 41 | 
 42 |                 <div class="iro-social">
 43 |                     <CoverSocialButton v-if="iroRandom" iro-icon-name="pre" @click="() => { --iroBgPageId; }" alt="上一篇">
 44 |                     </CoverSocialButton>
 45 | 
 46 |                     <CoverSocialButton v-if="iro.social?.links" v-for="link in iro.social.links"
 47 |                         :iro-icon-name="link.icon" :iro-icon-url="link?.iconUrl" :iro-link="link.link" :alt="link.name">
 48 |                     </CoverSocialButton>
 49 | 
 50 |                     <CoverSocialButton v-if="iroRandom" iro-icon-name="next" @click="() => { ++iroBgPageId; }"
 51 |                         alt="下一篇">
 52 |                     </CoverSocialButton>
 53 |                 </div>
 54 |             </div>
 55 |         </figure>
 56 |     </div>
 57 | </template>
 58 | 
 59 | <style scoped lang="scss">
 60 | .iro-root {
 61 |     &.iro-light {
 62 |         --iro-var-1: var(--iro-theme-skin, #505050);
 63 |         --iro-var-2: rgba(255, 255, 255, 0.6);
 64 |     }
 65 | 
 66 |     &.iro-dark {
 67 |         --iro-var-1: #CCCCCC;
 68 |         --iro-var-2: rgba(51, 51, 51, 0.8);
 69 |     }
 70 | }
 71 | 
 72 | .iro-header-top {
 73 |     border-radius: 0;
 74 |     animation: blur .8s;
 75 |     position: relative;
 76 |     overflow: hidden;
 77 |     height: auto;
 78 |     transition: all 0.8s ease !important;
 79 | 
 80 |     .iro-center-bg {
 81 |         margin: 0;
 82 |         padding: 0;
 83 |         background-position: top center;
 84 |         background-repeat: no-repeat;
 85 |         background-attachment: scroll;
 86 |         background-size: cover;
 87 |         display: block;
 88 |         height: 100vh;
 89 | 
 90 |         .iro-focus-info {
 91 |             position: relative;
 92 |             max-width: 800px;
 93 |             padding: 0 10px;
 94 |             top: 49.3%;
 95 |             left: 50%;
 96 |             transform: translate(-50%, -50%);
 97 |             text-align: center;
 98 |             z-index: 5;
 99 |             transition: .4s ease all;
100 | 
101 |             .iro-favicon {
102 |                 display: grid;
103 |                 justify-items: center;
104 |                 justify-content: center;
105 |                 margin: 0;
106 |                 max-height: 130px;
107 | 
108 |                 img {
109 |                     width: 130px;
110 |                     height: 130px;
111 |                     position: relative;
112 |                     padding: 5px;
113 |                     opacity: 1;
114 |                     transform: rotate(0);
115 |                     transition: all 0.8s ease !important;
116 |                     border-radius: 100px;
117 |                     animation: iro-fade-in-down 2s;
118 | 
119 |                     &:hover {
120 |                         transform: rotate(360deg);
121 |                     }
122 |                 }
123 | 
124 |             }
125 | 
126 |             .iro-signature {
127 |                 width: 65%;
128 |                 margin: auto;
129 |                 font-size: 16px;
130 |                 color: var(--iro-var-1);
131 |                 background: var(--iro-var-2);
132 |                 padding: 15px;
133 |                 margin-top: 22px;
134 |                 letter-spacing: 0;
135 |                 line-height: 30px;
136 |                 border-radius: 15px;
137 |                 border: 1px solid var(--iro-var-2);
138 |                 box-sizing: initial;
139 |                 white-space: nowrap;
140 |                 font-weight: var(--global-font-weight);
141 |                 backdrop-filter: blur(10px);
142 |                 transition: all 0.8s ease !important;
143 |                 animation: iro-fade-in-down 2s;
144 | 
145 |                 p {
146 |                     font-size: 16px;
147 |                     animation: iro-fade-in-down 2s;
148 |                     margin: 0;
149 |                     font-family: 'Noto Serif SC';
150 |                     overflow: hidden;
151 |                     text-overflow: ellipsis;
152 |                     white-space: nowrap;
153 |                     transition: all 0.8s ease !important;
154 | 
155 |                     &:hover {
156 |                         color: var(--iro-theme-skin-matching, #505050);
157 |                     }
158 |                 }
159 |             }
160 | 
161 |             .iro-social {
162 |                 height: 30px;
163 |                 margin-top: 28px;
164 |                 list-style: none;
165 |                 display: inline-block;
166 | 
167 |                 :deep(li) {
168 |                     float: left;
169 |                     margin: 0px 5px;
170 |                 }
171 | 
172 |                 :deep(img) {
173 |                     border-radius: 15px;
174 |                     height: 36px;
175 |                     width: 40px;
176 |                     padding: 8px 10px;
177 |                     border: 0.5px solid var(--iro-var-2);
178 |                     background: var(--iro-var-2);
179 |                     transition: all 0.8s ease !important;
180 |                     animation: iro-fade-in-down 2s;
181 |                 }
182 |             }
183 |         }
184 |     }
185 | }
186 | </style>
187 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Home/PostListItem.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { inject } from 'vue';
  3 | 
  4 | import { data as iro } from '../../iro.data';
  5 | 
  6 | const iroDark = inject('iroDark');
  7 | 
  8 | const { url, thumb, title, date, description, floatRight } = defineProps({
  9 |     url: String,
 10 |     thumb: String,
 11 |     title: String,
 12 |     date: String,
 13 |     description: String,
 14 |     floatRight: {
 15 |         type: Boolean,
 16 |         default: false
 17 |     }
 18 | });
 19 | 
 20 | </script>
 21 | 
 22 | <template>
 23 |     <div>
 24 |         <article class="iro-root"
 25 |             :class="{ 'iro-light': !iroDark, 'iro-dark': iroDark, 'iro-thumb-float-right': floatRight }" itemscope
 26 |             itemtype=" http://schema.org/BlogPosting">
 27 |             <div class="iro-thumb" :style="{ float: floatRight }">
 28 |                 <a :href="url">
 29 |                     <img :alt="title" loading="lazy" :src="thumb">
 30 |                 </a>
 31 |             </div>
 32 |             <div class="iro-post" :style="{ float: floatRight }">
 33 |                 <div class="iro-post-content">
 34 |                     <div class="iro-post-date">
 35 |                         <fa-i icon="fa-regular fa-clock"></fa-i>
 36 |                         发布于 {{ date }}
 37 |                     </div>
 38 |                     <a :href="url" class="iro-post-title">
 39 |                         <h3><b>{{ title }}</b></h3>
 40 |                     </a>
 41 |                     <div class="iro-post-description">
 42 |                         {{ description }}
 43 |                     </div>
 44 |                 </div>
 45 |             </div>
 46 |         </article>
 47 |     </div>
 48 | </template>
 49 | 
 50 | 
 51 | <style scoped lang="scss">
 52 | .iro-root {
 53 | 
 54 |     /*
 55 |         --iro-var-: ;
 56 |     */
 57 |     &.iro-light {
 58 |         --iro-var-1: 0 1px 30px -4px #e8e8e8;
 59 |         --iro-var-2: rgba(255, 255, 255, 1);
 60 |         --iro-var-3: rgba(255, 255, 255, 0.9);
 61 |         --iro-var-4: #504E4E;
 62 |         --iro-var-5: #4a49db26;
 63 |         --iro-var-6: #4a49db;
 64 |         --iro-var-7: #504E4E;
 65 |         --iro-var-8: rgba(0, 0, 0, .66);
 66 |         --iro-var-9: rgba(255, 255, 255, 1);
 67 |         --iro-var-10: 0 1px 20px 10px #e8e8e8;
 68 |     }
 69 | 
 70 |     &.iro-dark {
 71 |         --iro-var-1: 0 1px 35px -8px rgba(26, 26, 26, 0.6);
 72 |         --iro-var-2: rgba(51, 51, 51, 1);
 73 |         --iro-var-3: rgba(51, 51, 51, var(--iro-dm-bg-transparency, 1));
 74 |         --iro-var-4: #888;
 75 |         --iro-var-5: #333333;
 76 |         --iro-var-6: #888;
 77 |         --iro-var-7: #999999;
 78 |         --iro-var-8: #999999;
 79 |         --iro-var-9: rgba(51, 51, 51, 1);
 80 |         --iro-var-10: 0 1px 20px 10px rgba(26, 26, 26, 0.6);
 81 |     }
 82 | }
 83 | 
 84 | article {
 85 |     will-change: auto;
 86 |     display: block;
 87 |     animation: main .6s;
 88 |     will-change: transform;
 89 |     float: left;
 90 |     width: 100%;
 91 |     height: 300px;
 92 |     position: relative;
 93 |     margin: 20px 0 20px;
 94 |     border-radius: 10px;
 95 |     background-color: var(--iro-var-3);
 96 |     box-shadow: var(--iro-var-1);
 97 |     opacity: 0;
 98 |     content-visibility: auto;
 99 |     contain-intrinsic-size: auto none;
100 |     animation: iro-post-list-show .5s;
101 |     opacity: 1;
102 |     transition: all 0.8s ease !important;
103 | 
104 |     &::after {
105 |         content: "";
106 |         position: absolute;
107 |         bottom: 0;
108 |         left: 0;
109 |         right: 0;
110 |         height: 20px;
111 |         z-index: 10;
112 |         background: linear-gradient(to top, var(--iro-var-9), transparent);
113 |     }
114 | 
115 |     &:hover {
116 |         box-shadow: var(--iro-var-10);
117 |     }
118 | }
119 | 
120 | .iro-thumb-float-right {
121 |     .iro-thumb {
122 |         float: left;
123 | 
124 |         a {
125 |             border-radius: 10px 0 0 10px;
126 |         }
127 |     }
128 | 
129 |     .iro-post {
130 |         float: left;
131 |         text-align: right;
132 |         padding-left: 30px;
133 |         padding-right: 0;
134 |         margin: 20px 10px 10px 0;
135 |     }
136 | }
137 | 
138 | .iro-thumb {
139 |     width: 55%;
140 |     float: right;
141 | 
142 |     a {
143 |         height: 300px;
144 |         position: relative;
145 |         display: block;
146 |         background-repeat: no-repeat;
147 |         background-size: cover;
148 |         overflow: hidden;
149 |         border-radius: 0 10px 10px 0;
150 |         color: var(--iro-var-4);
151 | 
152 |         * {
153 |             width: 100%;
154 |             height: 100%;
155 |             object-fit: cover;
156 |             transition: all .6s;
157 | 
158 |             &:hover {
159 |                 transform: scale(1.1);
160 |             }
161 |         }
162 |     }
163 | }
164 | 
165 | .iro-post {
166 |     float: right;
167 |     text-align: left;
168 |     position: relative;
169 |     display: block;
170 |     padding-right: 30px;
171 |     padding-left: 0;
172 |     width: 40%;
173 |     margin: 20px 10px 0 10px;
174 |     z-index: 9;
175 | }
176 | 
177 | .iro-post-date {
178 |     background-color: var(--iro-var-5);
179 |     font-size: 12px;
180 |     width: max-content;
181 |     padding: 4px 10px 4px 10px;
182 |     border-radius: 6px;
183 |     color: var(--iro-var-6);
184 |     white-space: nowrap;
185 |     font-weight: var(--global-font-weight);
186 |     transition: all 0.8s ease !important;
187 | }
188 | 
189 | .iro-post-title {
190 |     h3 {
191 |         display: -webkit-box;
192 |         -webkit-box-orient: vertical;
193 |         -webkit-line-clamp: 2;
194 |         overflow: hidden;
195 |         text-overflow: ellipsis;
196 |         font-size: 20px;
197 |         word-wrap: break-word;
198 |         margin-block-start: 1em;
199 |         margin-block-end: 1em;
200 |         font-weight: bold;
201 |         color: var(--iro-var-7);
202 | 
203 |         &:hover {
204 |             color: var(--iro-theme-skin-matching, #F9D938);
205 |         }
206 | 
207 |         &::before {
208 |             display: block;
209 |             content: " ";
210 |             height: 80px;
211 |             margin-top: -80px;
212 |             visibility: hidden;
213 |         }
214 |     }
215 | }
216 | 
217 | .iro-post-description {
218 |     position: relative;
219 |     width: 100%;
220 |     right: 0;
221 |     margin: 0;
222 |     margin-top: 10px;
223 |     z-index: 50;
224 |     color: var(--iro-var-8);
225 |     transition: all 0.8s ease !important;
226 | }
227 | 
228 | @keyframes iro-post-list-show {
229 |     0% {
230 |         opacity: 0;
231 |         transform: translateY(80px);
232 |     }
233 | 
234 |     100% {
235 |         opacity: 1;
236 |         transform: translateY(0);
237 |     }
238 | }
239 | </style>
240 | 


--------------------------------------------------------------------------------
/.vitepress/theme/config/types.mts:
--------------------------------------------------------------------------------
  1 | export namespace Iro {
  2 |     /**
  3 |      * 封面设置
  4 |      */
  5 |     export interface Cover {
  6 |         /**
  7 |          * 封面的签名，纯文本，html 不起作用
  8 |          */
  9 |         signature: string;
 10 |         /**
 11 |          * 网站拥有者的头像的 url，直接作为 img 元素的 src 属性值，会在主页展示
 12 |          */
 13 |         avatar: string;
 14 |         /**
 15 |          * 首页封面图片，固定图片或随机图片
 16 |          */
 17 |         background: {
 18 |             /**
 19 |              * 为 true 时使用随机图片
 20 |              */
 21 |             random?: boolean;
 22 |             /**
 23 |              * 桌面端图片 URL，直接填入 CSS url(...)中
 24 |              */
 25 |             desktop: string;
 26 |             /**
 27 |              * 移动端图片 URL，直接填入 CSS url(...)中
 28 |              */
 29 |             mobile: string;
 30 |         };
 31 |     };
 32 | 
 33 |     /**
 34 |      * 导航栏相关设置
 35 |      */
 36 |     export interface Nav {
 37 |         /**
 38 |          * 导航菜单图标的 url，直接作为 img 元素的 src 属性值
 39 |          */
 40 |         icon: string;
 41 |         /**
 42 |          * 导航栏显示的链接
 43 |          */
 44 |         links?: {
 45 |             /**
 46 |              * 链接的提示文本
 47 |              */
 48 |             title: string;
 49 |             /**
 50 |              * 链接的 url，直接作为 a 元素的 href 属性值
 51 |              */
 52 |             url: string;
 53 |         }[];
 54 |     };
 55 | 
 56 |     /**
 57 |      * 拼接出用于搜索的 url，例如 `https://example.com/search?s=keyword` ，请看各属性的注释。没有该属性则不会显示搜索框
 58 |      */
 59 |     export interface Search {
 60 |         /**
 61 |          * 搜索 url 的 pathname 部分，默认为 `search` 
 62 |          * 不要带前面的斜杠，除非搜索 url 的 pathname 是根目录
 63 |          */
 64 |         path?: string;
 65 |         /**
 66 |          * 搜索 url 的 param 部分，默认为 `s`
 67 |          */
 68 |         param?: string;
 69 |     };
 70 | 
 71 |     /**
 72 |      * 社交网络链接
 73 |      */
 74 |     export interface SocialLink {
 75 |         /**
 76 |          * 图标的名字，对于 WordPress 主题 Sakurairo 的图标包集中的图标包，可能的值可以是：
 77 |          * @enum `mail`: E-mail 图标
 78 |          * @enum `github`: GitHub 图标
 79 |          * @enum `tg`: Telegram 图标
 80 |          * @enum `zhihu`: 知乎图标
 81 |          * @enum `book`: 简书图标
 82 |          * @enum `st`: Steam 图标
 83 |          * @enum `lofter`: Lofter 图标
 84 |          * @enum `ncm`: 网易云音乐图标 
 85 |          * @enum `bilibili`: 哔哩哔哩图标 
 86 |          * @enum `lk`: 领英图标
 87 |          * @enum `tw`: 原 Twitter 图标
 88 |          * @enum `fb`: Facebook 图标
 89 |          * @enum `qq`: QQ 图标
 90 |          * @enum `qz`: QQ 空间图标
 91 |          * @enum `wechat`: 微信图标
 92 |          * @enum `youku`: 优酷图标 
 93 |          * @enum `weibo`: 微博图标
 94 |          * @enum `csdn`
 95 |          * @enum `custom`: 使用 `iconUrl` 提供的图标
 96 |          */
 97 |         icon: string;
 98 |         /**
 99 |          * 自定义图标的 url，直接作为 img 的 src 属性值
100 |          */
101 |         iconUrl?: string;
102 |         /**
103 |          * 社交网络链接的 url
104 |          */
105 |         link: string;
106 |         /**
107 |          * 提示文本
108 |          */
109 |         name: string;
110 |     }
111 | 
112 |     /**
113 |      * 社交网络链接的集合及对应图标包集/图标包
114 |      */
115 |     export interface Social {
116 |         /**
117 |          * 图标包集引用链接，不填默认为 WordPress 主题 Sakurairo 的图标包集 `https://s.nmxc.ltd/sakurairo_vision/@2.6/display_icon/`
118 |          */
119 |         iconUrl?: string;
120 |         /**
121 |          * 图标包，不填默认为 `sakura` 。可能的值可以是：
122 |          * @enum `sakura`: 樱花配色
123 |          * @enum `fluent_design`: 流畅设计
124 |          * @enum `muh2`: 沐氢图标
125 |          * @enum `flat_colorful`: 扁平多彩
126 |          * @enum `macaronblue`: 马卡龙蓝
127 |          * @enum `macarongreen`: 马卡龙绿
128 |          * @enum `macaronpurple`: 马卡龙紫
129 |          * @enum `pink`: 初始粉色
130 |          * @enum `orange`: 阳光橙色
131 |          * @enum `sangosyu`: 珊瑚朱色
132 |          * @enum `sora`: 传统空色
133 |          * @enum `nae:` 新生苗色
134 |          */
135 |         iconPkg?: string;
136 |         /**
137 |          * 一系列社交网络链接
138 |          */
139 |         links?: SocialLink[];
140 |     };
141 | 
142 |     /**
143 |      * 页脚相关配置
144 |      */
145 |     export interface Footer {
146 |         /**
147 |          * 页脚内容，可以填 html
148 |          */
149 |         content?: string;
150 |         /**
151 |          * 在设置了 iro-footer 插槽后，用来决定 content 是否放在插槽前面
152 |          */
153 |         beforeSlot?: boolean;
154 |     };
155 | 
156 |     /**
157 |      * 404 页面相关配置
158 |      */
159 |     export interface Error404 {
160 |         /**
161 |          * 404 页面标题，可以填 html
162 |          */
163 |         title?: string;
164 |         /**
165 |          * 404 页面文本，可以填 html
166 |          */
167 |         text?: string;
168 |     };
169 | 
170 |     /**
171 |      * 主题样式的 CSS 变量，属性值将直接作为 CSS 变量的值，请按 CSS 的写法来填写各个属性
172 |      */
173 |     export interface Style {
174 |         /** 主题色 */
175 |         themeSkin: string;
176 |         /** 主题搭配色 */
177 |         themeSkinMatching: string;
178 |         /** 深色模式主题色 */
179 |         themeSkinDark: string;
180 |         /** 小组件面板按钮圆角 */
181 |         menuRadius: string;
182 |         /** 小组件面板组件圆角 */
183 |         menuSelectionRadius: string;
184 |     };
185 | 
186 |     /**
187 |      * 文章信息
188 |      */
189 |     export interface Post {
190 |         /**
191 |          * 文章标题
192 |          */
193 |         title: string;
194 |         /**
195 |          * 文章链接
196 |          */
197 |         url: string;
198 |         /**
199 |          * 文章缩略图，可选，不填则默认为 PC 端的封面图
200 |          */
201 |         thumb?: string;
202 |         /**
203 |          * 文章发布日期
204 |          */
205 |         date: any;
206 |         /**
207 |          * 文章描述或摘要
208 |          */
209 |         description: string;
210 |     };
211 | 
212 |     /**
213 |      * VitePress 主题 Sakurairo 的配置类型
214 |      */
215 |     export interface Config {
216 |         /**
217 |          * 网站标题
218 |          */
219 |         title: string;
220 |         /**
221 |          * 网站标题后缀
222 |          */
223 |         titleTemplate?: string;
224 |         /**
225 |          * 网站描述
226 |          */
227 |         description: string;
228 |         /**
229 |          * 网页图标的 url，直接作为 img 元素的 src 属性值
230 |          */
231 |         favicon: string;
232 |         /**
233 |          * 封面设置
234 |          */
235 |         cover: Cover;
236 |         /**
237 |          * 导航栏相关设置
238 |          */
239 |         nav?: Nav;
240 |         /**
241 |          * 拼接出用于搜索的 url，例如 `https://example.com/search?s=keyword` ，请看各属性的注释。没有该属性则不会显示搜索框
242 |          */
243 |         search?: Search;
244 |         /**
245 |          * 社交网络链接
246 |          */
247 |         social?: Social;
248 |         /**
249 |          * 页脚相关配置
250 |          */
251 |         footer?: Footer;
252 |         /**
253 |          * 404 页面相关配置
254 |          */
255 |         error404?: Error404;
256 |         /**
257 |          * 主题样式的 CSS 变量，属性值将直接作为 CSS 变量的值，请按 CSS 的写法来填写各个属性
258 |          */
259 |         style?: Style;
260 |         /**
261 |          * 文章信息列表
262 |          */
263 |         posts?: Post[];
264 |     };
265 | }


--------------------------------------------------------------------------------
/.vitepress/theme/Layout.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useData } from 'vitepress'
  3 | import { onMounted, onUnmounted, provide, ref, watch } from 'vue';
  4 | 
  5 | import NotFound from './NotFound.vue';
  6 | import Footer from './components/Footer.vue';
  7 | import Home from './components/Home/Home.vue';
  8 | import Nav from './components/Header/Nav.vue';
  9 | import Panel from './components/Panel.vue';
 10 | import NavMo from './components/Header/NavMo.vue';
 11 | import Post from './components/Post/Post.vue'
 12 | 
 13 | import { data as iro } from './iro.data';
 14 | 
 15 | const { frontmatter, page } = useData();
 16 | 
 17 | const iroDark = ref(
 18 |     localStorage.getItem('iro-theme') == 'dark'
 19 | );
 20 | const iroNavOpen = ref(false);
 21 | const isAtTop = ref(true);
 22 | 
 23 | provide('iroDark', iroDark);
 24 | provide('iroNavOpen', iroNavOpen);
 25 | provide('isAtTop', isAtTop);
 26 | 
 27 | watch(iroDark, iroDark_ => {
 28 |     localStorage.setItem('iro-theme', iroDark_ ? 'dark' : 'light');
 29 | });
 30 | 
 31 | const scrollPercent = ref(0);
 32 | 
 33 | const closeNavMo = () => {
 34 |     const htmlEl = document.getElementsByTagName('html')[0];
 35 |     htmlEl.classList.remove('iro-open-nav');
 36 |     iroNavOpen.value = false;
 37 | };
 38 | 
 39 | const scrollHandle = () => {
 40 |     let a = document.documentElement.scrollTop,
 41 |         b = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight;
 42 |     isAtTop.value = window.scrollY == 0;
 43 |     scrollPercent.value = Math.round(a / b * 100);
 44 | };
 45 | scrollHandle();
 46 | 
 47 | onMounted(() => {
 48 |     addEventListener('scroll', scrollHandle);
 49 | });
 50 | onUnmounted(() => {
 51 |     removeEventListener('scroll', scrollHandle);
 52 | });
 53 | 
 54 | const iroStyleConv = str => `--iro-${str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()}`;
 55 | const root = document.querySelector(':root');
 56 | for (let key in iro.style) {
 57 |     root.style.setProperty(iroStyleConv(key), iro.style[key]);
 58 | }
 59 | 
 60 | </script>
 61 | 
 62 | <template>
 63 |     <div class="iro-container iro-root"
 64 |         :class="{ 'iro-nav-open': iroNavOpen, 'iro-light': !iroDark, 'iro-dark': iroDark }">
 65 |         <div class="iro-scroll-percent" id="bar" :style="{ width: scrollPercent + '%' }"></div>
 66 |         <div class="iro-nav-mo-container" :class="{ 'iro-nav-open': iroNavOpen }">
 67 |             <NavMo :iro-nav-open="iroNavOpen"></NavMo>
 68 |         </div>
 69 |         <Panel></Panel>
 70 |         <Nav></Nav>
 71 |         <div class="iro-main-container" :class="{ 'iro-nav-open': iroNavOpen }" @click="closeNavMo">
 72 |             <div v-if="frontmatter.layout !== false" class="iro-layout" :class="frontmatter.pageClass">
 73 |                 <slot v-if="page.isNotFound" name="iro-not-found">
 74 |                     <NotFound />
 75 |                 </slot>
 76 |                 <slot v-else-if="frontmatter.layout == 'page'" name="iro-page">
 77 |                     <Content />
 78 |                 </slot>
 79 |                 <slot v-else-if="frontmatter.layout == 'home'" name="iro-home">
 80 |                     <Home>
 81 |                         <template v-slot:iro-home-page>
 82 |                             <slot name="iro-home-page"></slot>
 83 |                         </template>
 84 |                     </Home>
 85 |                 </slot>
 86 |                 <slot v-else-if="frontmatter.layout == 'post'" name="iro-post">
 87 |                     <Post>
 88 |                         <Content class="vp-doc" />
 89 |                     </Post>
 90 |                 </slot>
 91 |                 <slot v-else name="iro-other">
 92 |                     <Content />
 93 |                 </slot>
 94 |             </div>
 95 | 
 96 |             <Footer>
 97 |                 <template v-slot:iro-footer>
 98 |                     <slot name="iro-footer"></slot>
 99 |                 </template>
100 |             </Footer>
101 |         </div>
102 |     </div>
103 | </template>
104 | 
105 | 
106 | <style scoped lang="scss">
107 | @import url(https://fonts.googleapis.com/css?family=Noto+Serif|Noto+Serif+SC|Noto+Sans+SC|Dela+Gothic+One|Fira+Code&display=swap);
108 | 
109 | .iro-root {
110 |     color: var(--iro-font-color);
111 |     
112 |     &.iro-light {
113 |         --iro-global-font-weight: 300;
114 |         --iro-font-color: #505050;
115 |         --iro-dm-bg-transparency: 0.8;
116 | 
117 |         // --iro-var-1: rgb(255, 255, 255, 0.9); 这行必须注释掉，因为我不知道为什么在注释掉下面的那行后这一行会透传到里面去
118 |         @media (max-width:860px) {
119 | 
120 |             //只能是单独摘出来写在这里了
121 |             .iro-nav-mo-container {
122 |                 background-color: rgb(255, 255, 255, 0.9);
123 |             }
124 | 
125 |         }
126 |     }
127 | 
128 |     &.iro-dark {
129 |         --iro-font-color: #CCCCCC;
130 |         background-color: rgb(51, 51, 51);
131 | 
132 |         // --iro-var-1: transparent; 不知道为什么这里必须删掉这一行才能还原原本的色彩
133 |         :deep(img) {
134 |             filter: brightness(0.8);
135 |         }
136 | 
137 |         :deep(.iro-scroll-percent) {
138 |             background-color: var(--iro-theme-skin-dark);
139 |         }
140 |     }
141 | }
142 | 
143 | .iro-container {
144 |     transition: all 0.8s ease !important;
145 | 
146 |     &.iro-nav-open {
147 |         overflow: hidden;
148 |     }
149 | }
150 | 
151 | .iro-scroll-percent {
152 |     position: fixed;
153 |     top: 0;
154 |     height: 3px;
155 |     background: var(--iro-theme-skin-matching, #F9D938);
156 |     transition-property: width, background-color;
157 |     transition-duration: 1s, 1s;
158 |     z-index: 99999;
159 | }
160 | 
161 | 
162 | .iro-layout {
163 |     display: flex;
164 |     flex-direction: column;
165 |     min-height: 100vh;
166 | }
167 | 
168 | @media (max-width:860px) {
169 |     .iro-nav-mo-container {
170 |         background-color: var(--iro-var-1);
171 |         width: 250px;
172 |         max-width: 250px !important;
173 |         height: 100%;
174 |         z-index: 9999;
175 |         position: fixed;
176 |         top: 0;
177 |         bottom: 0;
178 |         display: block;
179 |         overflow-x: hidden !important;
180 |         overflow-y: auto;
181 |         transition: all .5s ease-in-out !important;
182 |         left: -250px;
183 | 
184 |         &.iro-nav-open {
185 |             transform: translateX(250px);
186 |         }
187 |     }
188 | 
189 |     .iro-main-container {
190 |         transition: all .5s ease-in-out !important;
191 |         position: relative;
192 |         z-index: 2;
193 | 
194 |         &.iro-nav-open {
195 |             transform: translateX(250px);
196 |             overflow: hidden;
197 | 
198 |             &::before {
199 |                 content: "";
200 |                 width: 100%;
201 |                 height: 100%;
202 |                 position: fixed;
203 |                 background-color: rgba(0, 0, 0, 0.4);
204 |                 z-index: 99;
205 |             }
206 |         }
207 | 
208 |     }
209 | 
210 | 
211 | }
212 | </style>
213 | 


--------------------------------------------------------------------------------
/.vitepress/theme/components/Header/NavHeader.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useData } from 'vitepress';
  3 | import { inject, provide, ref } from 'vue';
  4 | 
  5 | import NavSearch from './NavSearch.vue';
  6 | 
  7 | import { data as iro } from '../../iro.data';
  8 | 
  9 | const iroDark = inject('iroDark');
 10 | const isAtTop = inject('isAtTop');
 11 | const iroNavOpen = inject('iroNavOpen');
 12 | 
 13 | const iroShowSearch = ref(false);
 14 | provide('iroShowSearch', iroShowSearch);
 15 | const toggleSearch = () => iroShowSearch.value = !iroShowSearch.value;
 16 | 
 17 | </script>
 18 | 
 19 | <template>
 20 |     <header class="iro-header iro-no-select iro-root"
 21 |         :class="{ 'iro-yya': !isAtTop, 'iro-nav-open': iroNavOpen, 'iro-light': !iroDark, 'iro-dark': iroDark }"
 22 |         role="banner">
 23 |         <div class="iro-header-container">
 24 |             <div class="iro-site-branding">
 25 |                 <div class="iro-site-icon">
 26 |                     <a href="/"><img :src="iro.nav.icon"></a>
 27 |                 </div>
 28 |             </div>
 29 |             <div class="iro-search-box" @click="toggleSearch">
 30 |                 <fa-i icon="fa-solid fa-magnifying-glass" v-if="iro?.search" />
 31 |             </div>
 32 |             <nav class="iro-links" v-if="iro.nav?.links">
 33 |                 <ul>
 34 |                     <li v-for="link in iro.nav.links"><a :href="link.url">{{ link.title }}</a></li>
 35 |                 </ul>
 36 |             </nav>
 37 |         </div>
 38 |     </header>
 39 |     <NavSearch></NavSearch>
 40 | </template>
 41 | 
 42 | <style scoped lang="scss">
 43 | .iro-root {
 44 |     &.iro-light {
 45 |         --iro-var-1: rgba(255, 255, 255, 0.9);
 46 |         --iro-var-2: rgba(255, 255, 255, 0.7);
 47 |         --iro-var-3: #FFFFFF;
 48 |         --iro-var-4: var(--iro-theme-skin);
 49 |     }
 50 | 
 51 |     &.iro-dark {
 52 |         --iro-var-1: #333333;
 53 |         --iro-var-2: rgba(38, 38, 38, 0.8);
 54 |         --iro-var-3: #7d7d7d30;
 55 |         --iro-var-4: #CCCCCC;
 56 |     }
 57 | }
 58 | 
 59 | .iro-header {
 60 |     width: 95%;
 61 |     height: 60px;
 62 |     transition: all 1s ease !important;
 63 |     position: fixed;
 64 |     left: 2.5%;
 65 |     top: 2.5%;
 66 |     z-index: 999;
 67 |     border-radius: 20px;
 68 |     word-break: keep-all;
 69 |     border: 1.5px solid transparent;
 70 | 
 71 |     @media (max-width: 860px) {
 72 |         background: 0 0;
 73 |         width: 100%;
 74 |         top: 0;
 75 |         left: 0;
 76 |         border-radius: 0;
 77 | 
 78 |         &.iro-nav-open {
 79 |             opacity: 0;
 80 |         }
 81 |     }
 82 | 
 83 |     &:hover {
 84 |         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
 85 |         background-color: var(--iro-var-1) !important;
 86 |     }
 87 | 
 88 |     // WP 版 Sakuriaro 的背景色对浅色与深色模式采用了不同的处理逻辑，这里统一为浅色模式的逻辑
 89 |     &.iro-yya {
 90 |         transition: all 1s ease;
 91 |         border-radius: 15px;
 92 |         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
 93 | 
 94 |         background: var(--iro-var-2);
 95 |         border-bottom: 1.5px solid var(--iro-var-3);
 96 |         width: 100%;
 97 |         left: 0;
 98 |         top: 0;
 99 |         border-radius: 0;
100 |     }
101 | 
102 | }
103 | 
104 | .iro-header-container {
105 |     width: 100%;
106 |     display: block;
107 |     margin: 0 auto;
108 |     padding: 0 20px;
109 | 
110 |     nav {
111 |         position: relative;
112 |         float: right;
113 |         animation: iro-anim-search-box .2s;
114 |         display: block;
115 |         margin: 7.5px 0 0 0;
116 |         font-size: 16px;
117 |         font-weight: var(--global-font-weight);
118 | 
119 |         @media (max-width: 860px) {
120 |             display: none;
121 |         }
122 | 
123 |         ul {
124 |             margin: 0;
125 |             padding: 0;
126 |             list-style: none;
127 |             display: inline-block;
128 |             animation: iro-anim-fade-in-left 1s;
129 |             max-width: 76vw;
130 | 
131 |             li {
132 |                 float: left;
133 |                 margin-left: 28px;
134 |                 position: relative;
135 |                 transition: all 1s ease;
136 | 
137 |                 a {
138 |                     padding: 10px 0;
139 |                     display: inline-block;
140 |                     color: var(--iro-var-4);
141 | 
142 |                     &:hover {
143 |                         color: var(--iro-theme-skin-matching, #F9D938);
144 |                     }
145 | 
146 |                     &::after {
147 |                         content: "";
148 |                         display: block;
149 |                         position: absolute;
150 |                         bottom: -5px;
151 |                         height: 4px;
152 |                         background-color: var(--iro-theme-skin-matching, #F9D938);
153 |                         width: 100%;
154 |                         border-radius: 30px;
155 |                         max-width: 0;
156 |                         transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
157 |                     }
158 | 
159 |                     &:hover::after {
160 |                         max-width: 100%;
161 |                     }
162 |                 }
163 |             }
164 |         }
165 |     }
166 | }
167 | 
168 | .iro-site-branding {
169 |     animation: iro-anim-top 1s;
170 |     float: left;
171 |     position: relative;
172 |     height: 60px;
173 |     line-height: 60px;
174 |     margin-left: -6px;
175 | 
176 |     @media (max-width: 860px) {
177 |         float: right;
178 |         height: 50px;
179 |         line-height: 43px;
180 |         margin-right: -30px;
181 |         margin-top: -10px;
182 |     }
183 | 
184 | 
185 |     a {
186 |         color: #464646;
187 |         font-weight: 400;
188 |         line-height: 40px;
189 |         white-space: nowrap;
190 |         font-family: 'Noto Serif SC';
191 |     }
192 | 
193 |     img {
194 |         height: 40px;
195 |         margin-left: 10px;
196 |         margin-top: 10px;
197 |         opacity: .75;
198 |         transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
199 | 
200 |         @media (max-width: 860px) {
201 |             height: 40px;
202 |             line-height: 40px;
203 |             vertical-align: middle;
204 |             margin-right: 15px;
205 |             margin-top: 20px;
206 |         }
207 |     }
208 | }
209 | 
210 | .iro-site-icon {
211 |     margin: 0;
212 | 
213 |     @media (max-width: 860px) {
214 |         font-size: 20px;
215 |         margin-right: 10px;
216 |     }
217 | }
218 | 
219 | .iro-search-box {
220 |     color: var(--iro-theme-skin, #505050);
221 |     cursor: pointer;
222 |     transition: all .3s ease-in-out;
223 |     font-weight: var(--iro-global-font-weight);
224 |     animation: iro-anim-search-box 1s;
225 |     border: 2px solid transparent;
226 |     float: right;
227 |     height: auto;
228 |     font-size: 18px;
229 |     width: auto;
230 |     margin: 10px 0;
231 |     border-radius: 10px;
232 |     padding: 5px 9px;
233 |     margin-left: 15px;
234 | 
235 |     @media (max-width: 860px) {
236 |         display: none;
237 |     }
238 | 
239 |     &:hover {
240 |         color: var(--iro-theme-skin-matching);
241 |         transition: all .3s ease-in-out;
242 |         border: 2px solid var(--iro-theme-skin-matching);
243 |     }
244 | 
245 |     fa-i {
246 |         display: inline-block;
247 |         font-style: normal;
248 |         font-variant: normal;
249 |         line-height: 1;
250 |         text-rendering: auto;
251 |     }
252 | }
253 | 
254 | @keyframes iro-anim-top {
255 |     0% {
256 |         opacity: 0;
257 |         transform: translateX(-30px);
258 |     }
259 | 
260 |     100% {
261 |         opacity: 1;
262 |         transform: translateX(0);
263 |     }
264 | }
265 | 
266 | @keyframes iro-anim-search-box {
267 |     0% {
268 |         opacity: 0;
269 |         transform: translateX(30px);
270 |     }
271 | 
272 |     100% {
273 |         opacity: 1;
274 |         transform: translateX(0);
275 |     }
276 | }
277 | 
278 | @keyframes iro-anim-fade-in-left {
279 |     0% {
280 |         transform: translateX(100%);
281 |         opacity: 0;
282 |     }
283 | 
284 |     50% {
285 |         transform: translateX(100%);
286 |         opacity: 0;
287 |     }
288 | 
289 |     100% {
290 |         transform: translateX(0%);
291 |         opacity: 1;
292 |     }
293 | }
294 | </style>
295 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
  1 | GNU GENERAL PUBLIC LICENSE
  2 |                        Version 2, June 1991
  3 | 
  4 |  Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
  5 |  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  6 |  Everyone is permitted to copy and distribute verbatim copies
  7 |  of this license document, but changing it is not allowed.
  8 | 
  9 |                             Preamble
 10 | 
 11 |   The licenses for most software are designed to take away your
 12 | freedom to share and change it.  By contrast, the GNU General Public
 13 | License is intended to guarantee your freedom to share and change free
 14 | software--to make sure the software is free for all its users.  This
 15 | General Public License applies to most of the Free Software
 16 | Foundation's software and to any other program whose authors commit to
 17 | using it.  (Some other Free Software Foundation software is covered by
 18 | the GNU Lesser General Public License instead.)  You can apply it to
 19 | your programs, too.
 20 | 
 21 |   When we speak of free software, we are referring to freedom, not
 22 | price.  Our General Public Licenses are designed to make sure that you
 23 | have the freedom to distribute copies of free software (and charge for
 24 | this service if you wish), that you receive source code or can get it
 25 | if you want it, that you can change the software or use pieces of it
 26 | in new free programs; and that you know you can do these things.
 27 | 
 28 |   To protect your rights, we need to make restrictions that forbid
 29 | anyone to deny you these rights or to ask you to surrender the rights.
 30 | These restrictions translate to certain responsibilities for you if you
 31 | distribute copies of the software, or if you modify it.
 32 | 
 33 |   For example, if you distribute copies of such a program, whether
 34 | gratis or for a fee, you must give the recipients all the rights that
 35 | you have.  You must make sure that they, too, receive or can get the
 36 | source code.  And you must show them these terms so they know their
 37 | rights.
 38 | 
 39 |   We protect your rights with two steps: (1) copyright the software, and
 40 | (2) offer you this license which gives you legal permission to copy,
 41 | distribute and/or modify the software.
 42 | 
 43 |   Also, for each author's protection and ours, we want to make certain
 44 | that everyone understands that there is no warranty for this free
 45 | software.  If the software is modified by someone else and passed on, we
 46 | want its recipients to know that what they have is not the original, so
 47 | that any problems introduced by others will not reflect on the original
 48 | authors' reputations.
 49 | 
 50 |   Finally, any free program is threatened constantly by software
 51 | patents.  We wish to avoid the danger that redistributors of a free
 52 | program will individually obtain patent licenses, in effect making the
 53 | program proprietary.  To prevent this, we have made it clear that any
 54 | patent must be licensed for everyone's free use or not licensed at all.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                     GNU GENERAL PUBLIC LICENSE
 60 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 61 | 
 62 |   0. This License applies to any program or other work which contains
 63 | a notice placed by the copyright holder saying it may be distributed
 64 | under the terms of this General Public License.  The "Program", below,
 65 | refers to any such program or work, and a "work based on the Program"
 66 | means either the Program or any derivative work under copyright law:
 67 | that is to say, a work containing the Program or a portion of it,
 68 | either verbatim or with modifications and/or translated into another
 69 | language.  (Hereinafter, translation is included without limitation in
 70 | the term "modification".)  Each licensee is addressed as "you".
 71 | 
 72 | Activities other than copying, distribution and modification are not
 73 | covered by this License; they are outside its scope.  The act of
 74 | running the Program is not restricted, and the output from the Program
 75 | is covered only if its contents constitute a work based on the
 76 | Program (independent of having been made by running the Program).
 77 | Whether that is true depends on what the Program does.
 78 | 
 79 |   1. You may copy and distribute verbatim copies of the Program's
 80 | source code as you receive it, in any medium, provided that you
 81 | conspicuously and appropriately publish on each copy an appropriate
 82 | copyright notice and disclaimer of warranty; keep intact all the
 83 | notices that refer to this License and to the absence of any warranty;
 84 | and give any other recipients of the Program a copy of this License
 85 | along with the Program.
 86 | 
 87 | You may charge a fee for the physical act of transferring a copy, and
 88 | you may at your option offer warranty protection in exchange for a fee.
 89 | 
 90 |   2. You may modify your copy or copies of the Program or any portion
 91 | of it, thus forming a work based on the Program, and copy and
 92 | distribute such modifications or work under the terms of Section 1
 93 | above, provided that you also meet all of these conditions:
 94 | 
 95 |     a) You must cause the modified files to carry prominent notices
 96 |     stating that you changed the files and the date of any change.
 97 | 
 98 |     b) You must cause any work that you distribute or publish, that in
 99 |     whole or in part contains or is derived from the Program or any
100 |     part thereof, to be licensed as a whole at no charge to all third
101 |     parties under the terms of this License.
102 | 
103 |     c) If the modified program normally reads commands interactively
104 |     when run, you must cause it, when started running for such
105 |     interactive use in the most ordinary way, to print or display an
106 |     announcement including an appropriate copyright notice and a
107 |     notice that there is no warranty (or else, saying that you provide
108 |     a warranty) and that users may redistribute the program under
109 |     these conditions, and telling the user how to view a copy of this
110 |     License.  (Exception: if the Program itself is interactive but
111 |     does not normally print such an announcement, your work based on
112 |     the Program is not required to print an announcement.)
113 | 
114 | These requirements apply to the modified work as a whole.  If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works.  But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 | 
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 | 
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 | 
134 |   3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 | 
138 |     a) Accompany it with the complete corresponding machine-readable
139 |     source code, which must be distributed under the terms of Sections
140 |     1 and 2 above on a medium customarily used for software interchange; or,
141 | 
142 |     b) Accompany it with a written offer, valid for at least three
143 |     years, to give any third party, for a charge no more than your
144 |     cost of physically performing source distribution, a complete
145 |     machine-readable copy of the corresponding source code, to be
146 |     distributed under the terms of Sections 1 and 2 above on a medium
147 |     customarily used for software interchange; or,
148 | 
149 |     c) Accompany it with the information you received as to the offer
150 |     to distribute corresponding source code.  (This alternative is
151 |     allowed only for noncommercial distribution and only if you
152 |     received the program in object code or executable form with such
153 |     an offer, in accord with Subsection b above.)
154 | 
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it.  For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable.  However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 | 
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 | 
172 |   4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License.  Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 | 
180 |   5. You are not required to accept this License, since you have not
181 | signed it.  However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works.  These actions are
183 | prohibited by law if you do not accept this License.  Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 | 
189 |   6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions.  You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 | 
197 |   7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License.  If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all.  For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 | 
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 | 
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices.  Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 | 
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 | 
229 |   8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded.  In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 | 
237 |   9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time.  Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 | 
242 | Each version is given a distinguishing version number.  If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation.  If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 | 
250 |   10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission.  For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this.  Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 | 
258 |                             NO WARRANTY
259 | 
260 |   11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 | 
270 |   12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 | 
280 |                      END OF TERMS AND CONDITIONS
281 | 
282 |             How to Apply These Terms to Your New Programs
283 | 
284 |   If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 | 
288 |   To do so, attach the following notices to the program.  It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 | 
293 |     <one line to give the program's name and a brief idea of what it does.>
294 |     Copyright (C) <year>  <name of author>
295 | 
296 |     This program is free software; you can redistribute it and/or modify
297 |     it under the terms of the GNU General Public License as published by
298 |     the Free Software Foundation; either version 2 of the License, or
299 |     (at your option) any later version.
300 | 
301 |     This program is distributed in the hope that it will be useful,
302 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
303 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
304 |     GNU General Public License for more details.
305 | 
306 |     You should have received a copy of the GNU General Public License along
307 |     with this program; if not, write to the Free Software Foundation, Inc.,
308 |     51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 | 
310 | Also add information on how to contact you by electronic and paper mail.
311 | 
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 | 
315 |     Gnomovision version 69, Copyright (C) year name of author
316 |     Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 |     This is free software, and you are welcome to redistribute it
318 |     under certain conditions; type `show c' for details.
319 | 
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License.  Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 | 
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary.  Here is a sample; alter the names:
328 | 
329 |   Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 |   `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 | 
332 |   <signature of Ty Coon>, 1 April 1989
333 |   Ty Coon, President of Vice
334 | 
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs.  If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library.  If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.


--------------------------------------------------------------------------------