Initial rearrangment of vuetom site source
This commit is contained in:
parent
dbd456a517
commit
e9d08bd263
5
.eslintignore
Normal file
5
.eslintignore
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
pnpm-lock.yaml
|
||||||
|
CHANGELOG.en-US.md
|
||||||
|
!.*
|
||||||
76
.eslintrc.js
Normal file
76
.eslintrc.js
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es2021: true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
'airbnb-base'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 13,
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
sourceType: 'module'
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
'vue',
|
||||||
|
'@typescript-eslint'
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
indent: ['error', 2],
|
||||||
|
|
||||||
|
// 'linebreak-style': ['error', 'unix'],
|
||||||
|
'linebreak-style': 'off',
|
||||||
|
quotes: ['error', 'single'],
|
||||||
|
semi: ['error', 'never'],
|
||||||
|
'no-console': 'warn',
|
||||||
|
'no-unused-vars': 0,
|
||||||
|
'arrow-parens': 0,
|
||||||
|
|
||||||
|
// 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
|
||||||
|
'comma-dangle': [2, 'never'],
|
||||||
|
|
||||||
|
// 控制逗号前后的空格
|
||||||
|
'comma-spacing': [2, { before: false, after: true }],
|
||||||
|
|
||||||
|
// 控制逗号在行尾出现还是在行首出现
|
||||||
|
'comma-style': [2, 'last'],
|
||||||
|
'no-tabs': 0,
|
||||||
|
'import/no-extraneous-dependencies': [1, { devDependencies: true }],
|
||||||
|
'import/no-unresolved': 0,
|
||||||
|
'import/no-absolute-path': 0,
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'vue/html-self-closing': 'off',
|
||||||
|
'vue/no-multiple-template-root': 1,
|
||||||
|
'max-len': ['warn', 80],
|
||||||
|
'no-param-reassign': ['error', { props: false }],
|
||||||
|
'no-use-before-define': 1,
|
||||||
|
'no-unused-expressions': 0,
|
||||||
|
|
||||||
|
// add new line above comment
|
||||||
|
'lines-around-comment': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
beforeBlockComment: true,
|
||||||
|
beforeLineComment: true,
|
||||||
|
allowBlockStart: true,
|
||||||
|
allowClassStart: true,
|
||||||
|
allowObjectStart: true,
|
||||||
|
allowArrayStart: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
// 'newline-before-return': 'error',
|
||||||
|
'import/newline-after-import': ['error', { count: 1 }],
|
||||||
|
'import/extensions': [
|
||||||
|
'warn',
|
||||||
|
'ignorePackages',
|
||||||
|
{
|
||||||
|
js: 'never',
|
||||||
|
jsx: 'never',
|
||||||
|
ts: 'never',
|
||||||
|
tsx: 'never'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
9
.gitignore
vendored
9
.gitignore
vendored
@ -1 +1,10 @@
|
|||||||
public
|
public
|
||||||
|
|
||||||
|
temp
|
||||||
|
fr-FR
|
||||||
|
es-ES
|
||||||
|
ja-JP
|
||||||
|
|
||||||
|
vuetom-test
|
||||||
|
dist
|
||||||
|
node_modules
|
||||||
|
|||||||
61
package.json
Normal file
61
package.json
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
{
|
||||||
|
"name": "@lauset/root",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev:blog": "pnpm run -C packages/blog dev",
|
||||||
|
"dev:docs": "pnpm run -C packages/docs dev",
|
||||||
|
"build:all": "pnpm build:theme && pnpm build:docs && pnpm build:blog",
|
||||||
|
"build:theme": "pnpm run -C packages/vuetom build",
|
||||||
|
"build:blog": "pnpm run -C packages/blog build",
|
||||||
|
"build:docs": "pnpm run -C packages/docs build",
|
||||||
|
"preview:blog": "pnpm run -C packages/blog preview",
|
||||||
|
"preview:docs": "pnpm run -C packages/docs preview",
|
||||||
|
"serve:blog": "pnpm run -C packages/blog serve",
|
||||||
|
"serve:docs": "pnpm run -C packages/docs serve",
|
||||||
|
"clean:all": "pnpm -r --filter=./packages/* run clean"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/gulp": "^4.0.10",
|
||||||
|
"@types/gulp-autoprefixer": "0.0.33",
|
||||||
|
"@types/gulp-clean-css": "4.3.0",
|
||||||
|
"@types/gulp-rename": "2.0.1",
|
||||||
|
"@types/gulp-sass": "5.0.0",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.46.0",
|
||||||
|
"@typescript-eslint/parser": "^5.46.0",
|
||||||
|
"chalk": "^5.2.0",
|
||||||
|
"consola": "^2.15.3",
|
||||||
|
"cross-env": "7.0.3",
|
||||||
|
"eslint": "^8.29.0",
|
||||||
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
|
"eslint-define-config": "1.12.0",
|
||||||
|
"eslint-plugin-import": "^2.26.0",
|
||||||
|
"eslint-plugin-vue": "^9.8.0",
|
||||||
|
"fast-glob": "^3.2.12",
|
||||||
|
"fs-extra": "^11.1.0",
|
||||||
|
"gulp": "^4.0.2",
|
||||||
|
"gulp-autoprefixer": "8.0.0",
|
||||||
|
"gulp-clean-css": "4.3.0",
|
||||||
|
"gulp-rename": "2.0.0",
|
||||||
|
"gulp-sass": "5.1.0",
|
||||||
|
"http-proxy-middleware": "^2.0.6",
|
||||||
|
"prettier": "2.8.1",
|
||||||
|
"rimraf": "^3.0.2",
|
||||||
|
"sass": "^1.56.2",
|
||||||
|
"tsx": "^3.12.1",
|
||||||
|
"typescript": "^4.9.4"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"peerDependencyRules": {
|
||||||
|
"ignoreMissing": [
|
||||||
|
"@algolia/client-search",
|
||||||
|
"react",
|
||||||
|
"react-dom",
|
||||||
|
"@types/react"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
7
packages/blog/.vitepress/conf/path.ts
Normal file
7
packages/blog/.vitepress/conf/path.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export const vpRoot = path.resolve(__dirname, '..')
|
||||||
|
export const blogRoot = path.resolve(vpRoot, '..')
|
||||||
|
export const pageRoot = path.resolve(blogRoot, 'posts')
|
||||||
|
export const pkgsRoot = path.resolve(blogRoot, '..')
|
||||||
|
export const projRoot = path.resolve(pkgsRoot, '..')
|
||||||
26
packages/blog/.vitepress/conf/posts.ts
Normal file
26
packages/blog/.vitepress/conf/posts.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import fs from 'fs'
|
||||||
|
import { pageRoot } from './path'
|
||||||
|
|
||||||
|
const readDir = (dir) => {
|
||||||
|
const res = []
|
||||||
|
const files = fs.readdirSync(dir)
|
||||||
|
files.forEach(item => {
|
||||||
|
const filepath = `${dir}/${item}`
|
||||||
|
const stat = fs.statSync(filepath)
|
||||||
|
if (stat.isFile()) {
|
||||||
|
const name = item.replace('.md', '')
|
||||||
|
res.push({
|
||||||
|
text: name,
|
||||||
|
link: `/${name}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
const getDefaultPage = () => ({
|
||||||
|
text: '',
|
||||||
|
link: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
export default () => readDir(pageRoot)
|
||||||
70
packages/blog/.vitepress/config.ts
Normal file
70
packages/blog/.vitepress/config.ts
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import { defineConfigWithTheme } from 'vitepress'
|
||||||
|
import { VuetomThemeConfig } from 'vitepress-theme-vuetom'
|
||||||
|
import pages from './conf/posts'
|
||||||
|
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'Vuetom Blog',
|
||||||
|
titleTemplate: 'My Blog',
|
||||||
|
description: 'Just a blog',
|
||||||
|
base: '/myblog',
|
||||||
|
ignoreDeadLinks: true,
|
||||||
|
lastUpdated: true,
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
{ text: '首页', link: '/' },
|
||||||
|
{ text: '指导', link: '/pages/guide' },
|
||||||
|
{
|
||||||
|
text: '更多',
|
||||||
|
items: [
|
||||||
|
{ text: '分类', link: '/categories/index' },
|
||||||
|
{ text: '标签', link: '/tags/index' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: '首页',
|
||||||
|
link: '/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '指导',
|
||||||
|
link: '/pages/guide'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '更多',
|
||||||
|
items: []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
pages: pages(),
|
||||||
|
outlineTitle: 'In hac pagina',
|
||||||
|
socialLinks: [
|
||||||
|
{
|
||||||
|
icon: 'github',
|
||||||
|
link: 'https://github.com/lauset/vitepress-theme-vuetom'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
footer: {
|
||||||
|
message: 'Released under the MIT License.',
|
||||||
|
copyright: 'Copyright © 2021-present Vuetom'
|
||||||
|
},
|
||||||
|
lastUpdatedText: 'Updated Date',
|
||||||
|
docFooter: {
|
||||||
|
prev: 'Pagina prior',
|
||||||
|
next: 'Proxima pagina'
|
||||||
|
},
|
||||||
|
bgImg: '/imgs/blog-bg.png',
|
||||||
|
avatar: '/imgs/avatar.jpg',
|
||||||
|
author: 'Vuetom',
|
||||||
|
parallaxEnable: true,
|
||||||
|
},
|
||||||
|
markdown: {
|
||||||
|
theme: 'material-palenight',
|
||||||
|
lineNumbers: false
|
||||||
|
},
|
||||||
|
vite: {
|
||||||
|
ssr: {
|
||||||
|
noExternal: ["vitepress-theme-vuetom"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
0
packages/blog/.vitepress/theme/custom.scss
Normal file
0
packages/blog/.vitepress/theme/custom.scss
Normal file
18
packages/blog/.vitepress/theme/index.ts
Normal file
18
packages/blog/.vitepress/theme/index.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
// .vitepress/theme/index.js
|
||||||
|
|
||||||
|
// for prod
|
||||||
|
import BlogTheme from 'vitepress-theme-vuetom/blog'
|
||||||
|
|
||||||
|
// old
|
||||||
|
// import { BlogTheme } from 'vitepress-theme-vuetom'
|
||||||
|
|
||||||
|
import './custom.scss'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
...BlogTheme,
|
||||||
|
enhanceApp({ app, router, siteData }) {
|
||||||
|
// globals.forEach(([name, Comp]) => {
|
||||||
|
// app.component(name, Comp)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
}
|
||||||
6
packages/blog/.vitepress/utils/paths.ts
Normal file
6
packages/blog/.vitepress/utils/paths.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export const vpRoot = path.resolve(__dirname, '..')
|
||||||
|
export const docRoot = path.resolve(vpRoot, '..')
|
||||||
|
export const pkgsRoot = path.resolve(docRoot, '..')
|
||||||
|
export const projRoot = path.resolve(pkgsRoot, '..')
|
||||||
2
packages/blog/README.md
Normal file
2
packages/blog/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
<h1 align="center">Vuetom Theme Blog</h1>
|
||||||
15
packages/blog/api/proxy.js
Normal file
15
packages/blog/api/proxy.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const { createProxyMiddleware } = require('http-proxy-middleware')
|
||||||
|
|
||||||
|
module.exports = (req, res) => {
|
||||||
|
let target = ''
|
||||||
|
if (req.url.startsWith('/myblog')) {
|
||||||
|
target = 'https://vitepress-theme-vuetom-blog.vercel.app'
|
||||||
|
}
|
||||||
|
createProxyMiddleware({
|
||||||
|
target,
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite: {
|
||||||
|
'^/myblog/': '/'
|
||||||
|
}
|
||||||
|
})(req, res)
|
||||||
|
}
|
||||||
2
packages/blog/categories/index.md
Normal file
2
packages/blog/categories/index.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
Categories Index Page
|
||||||
14
packages/blog/index.md
Normal file
14
packages/blog/index.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
title: 欢迎
|
||||||
|
layout: home
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
const d = useData()
|
||||||
|
console.log(d)
|
||||||
|
|
||||||
|
</script>
|
||||||
17
packages/blog/package.json
Normal file
17
packages/blog/package.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "@lauset/vuetom-blog",
|
||||||
|
"version": "2.2.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vitepress dev .",
|
||||||
|
"build": "vitepress build .",
|
||||||
|
"preview": "vitepress preview .",
|
||||||
|
"serve": "vitepress serve .",
|
||||||
|
"clean": "rimraf .vitepress/dist"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"sass": "^1.56.1",
|
||||||
|
"vite": "^3.2.5",
|
||||||
|
"vitepress": "^1.0.0-alpha.30",
|
||||||
|
"vitepress-theme-vuetom": "workspace:*"
|
||||||
|
}
|
||||||
|
}
|
||||||
2
packages/blog/pages/guide.md
Normal file
2
packages/blog/pages/guide.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
**Guide Page**: `/blog/pages/guide.md`
|
||||||
180
packages/blog/posts/HelloWorld.md
Normal file
180
packages/blog/posts/HelloWorld.md
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
---
|
||||||
|
title: HelloWorld
|
||||||
|
tags: ui,front
|
||||||
|
categories: vue
|
||||||
|
time: 2022-08-31 16:21:11
|
||||||
|
layout: doc
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
主题的配置在 `.vitepress/config.ts` 文件中的 themeConfig 属性中配置
|
||||||
|
|
||||||
|
下面是一些简要的配置项一览：
|
||||||
|
|
||||||
|
其中 head、sidebar、nav 对应的分别是 head脚本、侧边栏菜单、头部导航栏都可以默认为 []
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
以下是版本号满足 `vitepress >= 1.x.x` `vuetom-theme >= 2.x.x` 的配置
|
||||||
|
|
||||||
|
```js
|
||||||
|
// .vitepress/config.ts
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
lang: 'en-US',
|
||||||
|
base: '/vt',
|
||||||
|
title: 'Vuetom Theme',
|
||||||
|
description: 'Theme For Vitepress',
|
||||||
|
// head,
|
||||||
|
themeConfig: {
|
||||||
|
nav: nav(),
|
||||||
|
sidebar: {
|
||||||
|
'zh-CN/guide/': sidebarGuide(),
|
||||||
|
'zh-CN/mdshow/': sidebarMdShow()
|
||||||
|
},
|
||||||
|
socialLinks: [
|
||||||
|
{ icon: 'github', link: pkg.repository }
|
||||||
|
],
|
||||||
|
footer: {
|
||||||
|
message: 'Released under the MIT License.',
|
||||||
|
copyright: 'Copyright © 2021-present Lauset'
|
||||||
|
},
|
||||||
|
logoImg: '/logo/vuetom-logo-m.png',
|
||||||
|
bgImg: '/imgs/homg-bg01.jpg',
|
||||||
|
bgColor: '0,0,0',
|
||||||
|
bgOpacity: 0.6,
|
||||||
|
flashEnable: true,
|
||||||
|
flashColor: ['238,17,17', '0,98,255'],
|
||||||
|
parallaxEnable: true,
|
||||||
|
pageBgEnable: true,
|
||||||
|
pageBgOpacity: 0.8,
|
||||||
|
featuresColor: ['#06cdff30', 'rgba(223,7,107,.3)']
|
||||||
|
|
||||||
|
},
|
||||||
|
markdown: {
|
||||||
|
lineNumbers: false,
|
||||||
|
config: (md) => mdPlugin(md)
|
||||||
|
},
|
||||||
|
lastUpdated: false
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
以下是版本号满足 `vitepress = 0.x.x` `vuetom-theme = 1.x.x` 的配置
|
||||||
|
|
||||||
|
```js light
|
||||||
|
import { defineConfigWithTheme } from 'vitepress'
|
||||||
|
import type { VuetomThemeConfig } from 'vitepress-theme-vuetom'
|
||||||
|
|
||||||
|
// .vitepress/config.ts
|
||||||
|
// 部分配置项
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
title: 'Vuetom',
|
||||||
|
base: '/',
|
||||||
|
head,
|
||||||
|
themeConfig: {
|
||||||
|
repo: 'GIT地址',
|
||||||
|
docsDir: 'docs',
|
||||||
|
sidebar,
|
||||||
|
nav,
|
||||||
|
bgImg: '/imgs/homg-bg01.jpg',
|
||||||
|
bgColor: '0,0,0',
|
||||||
|
bgOpacity: 0.6,
|
||||||
|
flashEnable: true,
|
||||||
|
flashColor: ['238,17,17', '0,98,255'],
|
||||||
|
pageBgEnable: true,
|
||||||
|
pageBgOpacity: 0.8,
|
||||||
|
featuresColor: ['#06cdff30', 'rgba(223,7,107,.3)']
|
||||||
|
},
|
||||||
|
|
||||||
|
// ...
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
以下是对配置项的简要说明
|
||||||
|
|
||||||
|
## 首页LOGO
|
||||||
|
|
||||||
|
**logoImg**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`''`
|
||||||
|
|
||||||
|
首页上方LOGO，路径中的首个 `/` 表示 `public` 目录
|
||||||
|
|
||||||
|
例如：`'/logo/homg-logo.jpg'`
|
||||||
|
|
||||||
|
## 首页背景图
|
||||||
|
|
||||||
|
**bgImg**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`undefined`
|
||||||
|
|
||||||
|
首页全屏背景图，路径中的首个 `/` 表示 `public` 目录
|
||||||
|
|
||||||
|
例如：`'/imgs/homg-bg01.jpg'` 等同于 `/public/imgs/home-bg01.jpg`
|
||||||
|
|
||||||
|
**bgColor**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`'0,0,0'`
|
||||||
|
|
||||||
|
背景图边缘的覆盖颜色，值是 `rgb` 的颜色值 `rgb(0,0,0)` 则写为 `'0,0,0'`，默认为黑色
|
||||||
|
|
||||||
|
**bgOpacity**
|
||||||
|
|
||||||
|
- 类型：`0 - 1`
|
||||||
|
- 默认值：`0.6`
|
||||||
|
|
||||||
|
覆盖颜色的透明度，搭配上面的覆盖颜色使用，图片中间透明度要比图片边缘透明度要小
|
||||||
|
|
||||||
|
图片中间透明度为 `当前bgOpacity - 0.3`，也就是说默认为 `0.3`
|
||||||
|
|
||||||
|
## 文章页背景图
|
||||||
|
|
||||||
|
注意：文章页背景图片与首页一致
|
||||||
|
|
||||||
|
**pageBgEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`true`
|
||||||
|
|
||||||
|
文章页面背景图是否开启，默认开启
|
||||||
|
|
||||||
|
**pageBgOpacity**
|
||||||
|
|
||||||
|
- 类型：`0 - 1`
|
||||||
|
- 默认值：`0.8`
|
||||||
|
|
||||||
|
文章页背景图透明度，1将看不到背景图，0能清晰看到背景图
|
||||||
|
|
||||||
|
**featuresColor**
|
||||||
|
|
||||||
|
- 类型：`string | Array`
|
||||||
|
- 默认值：`rgba(255,255,255,0.8)`
|
||||||
|
|
||||||
|
首页功能面板背景色，可以是单个颜色字符串，也可以是两个字符串组成的数组
|
||||||
|
|
||||||
|
**flashEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`false`
|
||||||
|
|
||||||
|
是否开启首页背景图闪烁功能，效果类似于朋克风故障
|
||||||
|
|
||||||
|
**flashColor**
|
||||||
|
|
||||||
|
- 类型：`string | Array`
|
||||||
|
- 默认值：`['0,0,0','0,0,0']`
|
||||||
|
|
||||||
|
首页背景闪烁时附加的色彩，0: Top位置的颜色，1: Right位置的颜色，默认都是黑色
|
||||||
|
|
||||||
|
**parallaxEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`false`
|
||||||
|
|
||||||
|
是否开启首页部分元素视觉差效果
|
||||||
14
packages/blog/posts/HelloWorld2.md
Normal file
14
packages/blog/posts/HelloWorld2.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
title: HelloWorld2
|
||||||
|
tags: java,spring
|
||||||
|
categories: java
|
||||||
|
time: 2022-08-31 16:21:22
|
||||||
|
layout: doc
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
This is a word in posts/HelloWorld2.md
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
99
packages/blog/posts/codeblock.md
Normal file
99
packages/blog/posts/codeblock.md
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
title: 代码块展示
|
||||||
|
tags: example
|
||||||
|
categories: md
|
||||||
|
time: 2022-10-31 20:21:11
|
||||||
|
layout: doc
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
## MD语法展示
|
||||||
|
|
||||||
|
使用三个 ` 符号将代码包裹其中便是展示代码块
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**亮/暗主题切换**
|
||||||
|
|
||||||
|
根据文档主题模式切换
|
||||||
|
|
||||||
|
**代码块主题 macos**
|
||||||
|
|
||||||
|
可以在 language_key(语言标识) 后加入 `macos`
|
||||||
|
|
||||||
|
输入内容：
|
||||||
|
|
||||||
|
<div>
|
||||||
|
```java macos
|
||||||
|
</div>
|
||||||
|
String language = "Java";
|
||||||
|
<div>
|
||||||
|
```
|
||||||
|
</div>
|
||||||
|
|
||||||
|
展示效果：
|
||||||
|
|
||||||
|
```java macos
|
||||||
|
String language = "Java";
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**默认主题**
|
||||||
|
|
||||||
|
默认主题是以暗色系为主的
|
||||||
|
|
||||||
|
输入内容：
|
||||||
|
|
||||||
|
<div>
|
||||||
|
```js
|
||||||
|
</div>
|
||||||
|
String language = "JS";
|
||||||
|
<div>
|
||||||
|
```
|
||||||
|
</div>
|
||||||
|
|
||||||
|
输出内容：
|
||||||
|
|
||||||
|
```java
|
||||||
|
String language = "JS";
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**示例展示**
|
||||||
|
|
||||||
|
- javascript ( js macos )
|
||||||
|
|
||||||
|
```js macos
|
||||||
|
function fun(){
|
||||||
|
echo "Hello, World!";
|
||||||
|
}
|
||||||
|
fun();
|
||||||
|
```
|
||||||
|
|
||||||
|
- Java ( java )
|
||||||
|
|
||||||
|
```java
|
||||||
|
System.out.print(1);
|
||||||
|
```
|
||||||
|
|
||||||
|
- Python ( py macos )
|
||||||
|
|
||||||
|
```py macos
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
print("Hello, World!");
|
||||||
|
```
|
||||||
|
|
||||||
|
- SQL ( sql )
|
||||||
|
|
||||||
|
```sql
|
||||||
|
select user_name from user_info
|
||||||
|
```
|
||||||
|
|
||||||
|
- Shell ( bash, shell )
|
||||||
|
|
||||||
|
```bash
|
||||||
|
echo '1'
|
||||||
|
```
|
||||||
2
packages/blog/tags/index.md
Normal file
2
packages/blog/tags/index.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
Tags Index Page
|
||||||
8
packages/blog/vercel.json
Normal file
8
packages/blog/vercel.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"rewrites": [
|
||||||
|
{
|
||||||
|
"source": "/myblog/(.*)",
|
||||||
|
"destination": "/api/proxy"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
32
packages/blog/vite.config.ts
Normal file
32
packages/blog/vite.config.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import path from 'path'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import type { Alias } from 'vite'
|
||||||
|
import { projRoot } from './.vitepress/utils/paths'
|
||||||
|
|
||||||
|
const alias: Alias[] = []
|
||||||
|
|
||||||
|
if (process.env.DOC_ENV !== 'production') {
|
||||||
|
alias.push(
|
||||||
|
{
|
||||||
|
find: /^vitepress-theme-vuetom\/docs$/,
|
||||||
|
replacement: path.resolve(projRoot, 'packages/vuetom/doc'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
find: /^vitepress-theme-vuetom\/blog$/,
|
||||||
|
replacement: path.resolve(projRoot, 'packages/vuetom/blog'),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
host: true,
|
||||||
|
fs: {
|
||||||
|
strict: true,
|
||||||
|
allow: ['../../']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias,
|
||||||
|
},
|
||||||
|
})
|
||||||
112
packages/docs/.vitepress/build/crowdin-generate.ts
Normal file
112
packages/docs/.vitepress/build/crowdin-generate.ts
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
import fs from 'fs'
|
||||||
|
import path from 'path'
|
||||||
|
import chalk from 'chalk'
|
||||||
|
import consola from 'consola'
|
||||||
|
import { docRoot } from '../utils/paths'
|
||||||
|
import { errorAndExit } from '../utils/log'
|
||||||
|
|
||||||
|
// NB: this file is only for generating files that enables developers to develop the website.
|
||||||
|
const componentLocaleRoot = path.resolve(docRoot, '.vitepress/crowdin')
|
||||||
|
|
||||||
|
const exists = 'File already exists'
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const localeOutput = path.resolve(docRoot, '.vitepress/i18n')
|
||||||
|
if (fs.existsSync(localeOutput)) {
|
||||||
|
throw new Error(exists)
|
||||||
|
}
|
||||||
|
|
||||||
|
consola.trace(chalk.cyan('Starting for build doc for developing'))
|
||||||
|
|
||||||
|
// all language should be identical since it is mirrored from crowdin.
|
||||||
|
const dirs = await fs.promises.readdir(componentLocaleRoot, {
|
||||||
|
withFileTypes: true
|
||||||
|
})
|
||||||
|
const languages = dirs.map((dir) => dir.name)
|
||||||
|
const langWithoutEn = languages.filter((l) => l !== '.DS_Store')
|
||||||
|
|
||||||
|
await fs.promises.mkdir(localeOutput)
|
||||||
|
|
||||||
|
// build lang.json for telling `header>language-select` how many languages are there
|
||||||
|
await fs.promises.writeFile(
|
||||||
|
path.resolve(localeOutput, 'lang.json'),
|
||||||
|
JSON.stringify(languages),
|
||||||
|
'utf-8'
|
||||||
|
)
|
||||||
|
|
||||||
|
// loop through en-US
|
||||||
|
|
||||||
|
const enUS = path.resolve(componentLocaleRoot, 'en-US')
|
||||||
|
|
||||||
|
// we do not include en-US since we are currently using it as template
|
||||||
|
const languagePaths = langWithoutEn.map((l) => ({
|
||||||
|
name: l,
|
||||||
|
pathname: path.resolve(componentLocaleRoot, l)
|
||||||
|
}))
|
||||||
|
|
||||||
|
consola.debug(languagePaths)
|
||||||
|
await traverseDir(enUS, languagePaths, localeOutput)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function traverseDir(
|
||||||
|
dir: string,
|
||||||
|
paths: { name: string; pathname: string }[],
|
||||||
|
targetPath: string
|
||||||
|
) {
|
||||||
|
const contents = await fs.promises.readdir(dir, { withFileTypes: true })
|
||||||
|
|
||||||
|
await Promise.all(
|
||||||
|
contents.map(async (c) => {
|
||||||
|
if (c.isDirectory()) {
|
||||||
|
await fs.promises.mkdir(path.resolve(targetPath, c.name), {
|
||||||
|
recursive: true
|
||||||
|
})
|
||||||
|
|
||||||
|
return traverseDir(
|
||||||
|
path.resolve(dir, c.name),
|
||||||
|
paths.map((p) => ({
|
||||||
|
...p,
|
||||||
|
pathname: path.resolve(p.pathname, c.name)
|
||||||
|
})),
|
||||||
|
path.resolve(targetPath, c.name)
|
||||||
|
)
|
||||||
|
} if (c.isFile()) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const content = require(path.resolve(dir, c.name))
|
||||||
|
|
||||||
|
const contentToWrite = {
|
||||||
|
'en-US': content
|
||||||
|
}
|
||||||
|
|
||||||
|
await Promise.all(
|
||||||
|
paths.map(async (p) => {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const content = require(path.resolve(p.pathname, c.name))
|
||||||
|
|
||||||
|
contentToWrite[p.name] = content
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
return fs.promises.writeFile(
|
||||||
|
path.resolve(targetPath, c.name),
|
||||||
|
JSON.stringify(contentToWrite, null, 2),
|
||||||
|
{
|
||||||
|
encoding: 'utf-8'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
main()
|
||||||
|
.then(() => {
|
||||||
|
consola.success(chalk.green('Locale for website development generated'))
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (err.message === exists) {
|
||||||
|
// do nothing
|
||||||
|
} else {
|
||||||
|
errorAndExit(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
57
packages/docs/.vitepress/config.ts
Normal file
57
packages/docs/.vitepress/config.ts
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import { build, defineConfigWithTheme, useData } from 'vitepress'
|
||||||
|
import { VuetomThemeConfig } from 'vitepress-theme-vuetom'
|
||||||
|
import pkg from '../package.json'
|
||||||
|
import { getNav, getSidebar, head, locales } from './menus'
|
||||||
|
|
||||||
|
const nav = getNav('en-US')
|
||||||
|
const sidebar = getSidebar('en-US')
|
||||||
|
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
base: `/vt/`,
|
||||||
|
ignoreDeadLinks: true,
|
||||||
|
lastUpdated: true,
|
||||||
|
head,
|
||||||
|
locales: locales.vitepressConfig,
|
||||||
|
themeConfig: {
|
||||||
|
nav,
|
||||||
|
sidebar,
|
||||||
|
localeLinks: {
|
||||||
|
text: '',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'English',
|
||||||
|
link: '/lang/enus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
socialLinks: [
|
||||||
|
{ icon: 'github', link: pkg.repository }
|
||||||
|
],
|
||||||
|
footer: {
|
||||||
|
message: 'Using the Vuetom Vitepress Theme.',
|
||||||
|
copyright: 'Copyright © 2021-present Lauset'
|
||||||
|
},
|
||||||
|
|
||||||
|
logoImg: '/imgs/Avatar.jpg',
|
||||||
|
bgImg: '/imgs/homg-bg01-200k.jpg',
|
||||||
|
bgColor: '0,0,0',
|
||||||
|
bgOpacity: 0.6,
|
||||||
|
flashEnable: true,
|
||||||
|
flashColor: ['238,17,17', '0,98,255'],
|
||||||
|
parallaxEnable: true,
|
||||||
|
pageBgEnable: true,
|
||||||
|
pageBgOpacity: 0.8,
|
||||||
|
featuresColor: ['#06cdff30', 'rgba(223,7,107,.3)']
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
markdown: {
|
||||||
|
lineNumbers: true
|
||||||
|
},
|
||||||
|
appearance: true,
|
||||||
|
vite: {
|
||||||
|
ssr: {
|
||||||
|
noExternal: ["vitepress-theme-vuetom"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
14
packages/docs/.vitepress/crowdin-docs/en-US/guide/info.md
Normal file
14
packages/docs/.vitepress/crowdin-docs/en-US/guide/info.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
title: What's the Vitepress？
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: vuetom info
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: vuetom theme
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
developing...
|
||||||
149
packages/docs/.vitepress/crowdin-docs/en-US/index.md
Normal file
149
packages/docs/.vitepress/crowdin-docs/en-US/index.md
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
title: Vuetom
|
||||||
|
titleTemplate: Vite & Vue Powered Static Site Generator
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: Vuetom
|
||||||
|
text:
|
||||||
|
tagline: vitepress flat theme
|
||||||
|
actions:
|
||||||
|
- theme: brand big
|
||||||
|
text: Quick Start
|
||||||
|
link: /en-US/guide/info
|
||||||
|
- theme: alt big
|
||||||
|
text: Config
|
||||||
|
link: /en-US/guide/config
|
||||||
|
|
||||||
|
features:
|
||||||
|
- title: 📦 优化的构建
|
||||||
|
details: 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
|
||||||
|
- title: 🔩 通用的插件
|
||||||
|
details: 在开发和构建之间共享 Rollup-superset 插件接口。
|
||||||
|
- title: 🔑 完全类型化的API
|
||||||
|
details: 灵活的 API 和完整 TypeScript 类型。
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="frontpage sponsors">
|
||||||
|
<h2>Thanks</h2>
|
||||||
|
<div class="platinum-sponsors">
|
||||||
|
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
|
||||||
|
<img :src="src" :alt="name" :id="`sponsor-${id}`">
|
||||||
|
<p>{{ name }}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="gold-sponsors">
|
||||||
|
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
|
||||||
|
<img :src="src" :alt="name" :id="`sponsor-${id}`">
|
||||||
|
<p>{{ name }}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
|
||||||
|
const sponsors = [
|
||||||
|
{
|
||||||
|
"id": "vue",
|
||||||
|
"name": "Vue",
|
||||||
|
"href": "https://v3.cn.vuejs.org/",
|
||||||
|
"src": "https://v3.cn.vuejs.org/logo.png",
|
||||||
|
"tier": "platinum"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "vite",
|
||||||
|
"name": "Vite",
|
||||||
|
"href": "https://vitejs.cn/",
|
||||||
|
"src": "https://vitejs.cn/logo.svg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "vitepress",
|
||||||
|
"name": "Vitepress",
|
||||||
|
"href": "https://fttp.jjf-tech.cn/vitepress/",
|
||||||
|
"src": "https://v3.cn.vuejs.org/logo.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "elementplus",
|
||||||
|
"name": "Element Plus",
|
||||||
|
"href": "https://element-plus.gitee.io/zh-CN/",
|
||||||
|
"src": "https://element-plus.gitee.io/images/element-plus-logo.svg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
function fetchReleaseTag() {
|
||||||
|
onMounted(() => {
|
||||||
|
fetch('https://api.github.com/repos/vitejs/docs-cn/releases/latest')
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((json) => {
|
||||||
|
const dom = document.getElementsByClassName('name')
|
||||||
|
const mainTitle = dom[0]
|
||||||
|
mainTitle.style.position = 'relative'
|
||||||
|
const docsReleaseTag = document.createElement('span')
|
||||||
|
docsReleaseTag.classList.add('release-tag')
|
||||||
|
const releaseTagName = json.tag_name
|
||||||
|
docsReleaseTag.innerText = releaseTagName
|
||||||
|
if (releaseTagName !== undefined) {
|
||||||
|
mainTitle.appendChild(docsReleaseTag)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchReleaseTag()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.sponsors {
|
||||||
|
padding: 0 1.5rem 2rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors a {
|
||||||
|
color: #999;
|
||||||
|
margin: 1em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors img {
|
||||||
|
max-width: 160px;
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage img {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage h2 {
|
||||||
|
color: #999;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.sidebar a img {
|
||||||
|
max-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platinum-sponsors {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platinum-sponsors a img {
|
||||||
|
max-width: 240px;
|
||||||
|
max-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gold-sponsors {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
title: 留言反馈
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
> 该页面是在 Markdown 中引入 Vue 组件简单的展示
|
||||||
|
|
||||||
|
页面文件: `.vitepress/views/vt/vt-feedback.vue`
|
||||||
|
|
||||||
|
<ClientOnly>
|
||||||
|
<VtFeedback />
|
||||||
|
</ClientOnly>
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
正在开发中，你以后可以把想说的话写在这里
|
||||||
|
:::
|
||||||
182
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/config.md
Normal file
182
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/config.md
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
---
|
||||||
|
title: 主题配置
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: vuetom 主题配置项
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: vuetom theme config
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
主题的配置在 `.vitepress/config.ts` 文件中的 themeConfig 属性中配置
|
||||||
|
|
||||||
|
下面是一些简要的配置项一览：
|
||||||
|
|
||||||
|
其中 head、sidebar、nav 对应的分别是 head脚本、侧边栏菜单、头部导航栏都可以默认为 []
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
以下是版本号满足 `vitepress >= 1.x.x` `vuetom-theme >= 2.x.x` 的配置
|
||||||
|
|
||||||
|
```js macos
|
||||||
|
// .vitepress/config.ts
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
lang: 'en-US',
|
||||||
|
base: '/vt',
|
||||||
|
title: 'Vuetom Theme',
|
||||||
|
description: 'Theme For Vitepress',
|
||||||
|
// head,
|
||||||
|
themeConfig: {
|
||||||
|
nav: nav(),
|
||||||
|
sidebar: {
|
||||||
|
'zh-CN/guide/': sidebarGuide(),
|
||||||
|
'zh-CN/mdshow/': sidebarMdShow()
|
||||||
|
},
|
||||||
|
socialLinks: [
|
||||||
|
{ icon: 'github', link: pkg.repository }
|
||||||
|
],
|
||||||
|
footer: {
|
||||||
|
message: 'Released under the MIT License.',
|
||||||
|
copyright: 'Copyright © 2021-present Lauset'
|
||||||
|
},
|
||||||
|
logoImg: '/logo/vuetom-logo-m.png',
|
||||||
|
bgImg: '/imgs/homg-bg01.jpg',
|
||||||
|
bgColor: '0,0,0',
|
||||||
|
bgOpacity: 0.6,
|
||||||
|
flashEnable: true,
|
||||||
|
flashColor: ['238,17,17', '0,98,255'],
|
||||||
|
parallaxEnable: true,
|
||||||
|
pageBgEnable: true,
|
||||||
|
pageBgOpacity: 0.8,
|
||||||
|
featuresColor: ['#06cdff30', 'rgba(223,7,107,.3)']
|
||||||
|
|
||||||
|
},
|
||||||
|
markdown: {
|
||||||
|
lineNumbers: false,
|
||||||
|
config: (md) => mdPlugin(md)
|
||||||
|
},
|
||||||
|
lastUpdated: false
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
以下是版本号满足 `vitepress = 0.x.x` `vuetom-theme = 1.x.x` 的配置
|
||||||
|
|
||||||
|
```js macos
|
||||||
|
import { defineConfigWithTheme } from 'vitepress'
|
||||||
|
import type { VuetomThemeConfig } from 'vitepress-theme-vuetom'
|
||||||
|
|
||||||
|
// .vitepress/config.ts
|
||||||
|
// 部分配置项
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
title: 'Vuetom',
|
||||||
|
base: '/',
|
||||||
|
head,
|
||||||
|
themeConfig: {
|
||||||
|
repo: 'GIT地址',
|
||||||
|
docsDir: 'docs',
|
||||||
|
sidebar,
|
||||||
|
nav,
|
||||||
|
bgImg: '/imgs/homg-bg01.jpg',
|
||||||
|
bgColor: '0,0,0',
|
||||||
|
bgOpacity: 0.6,
|
||||||
|
flashEnable: true,
|
||||||
|
flashColor: ['238,17,17', '0,98,255'],
|
||||||
|
pageBgEnable: true,
|
||||||
|
pageBgOpacity: 0.8,
|
||||||
|
featuresColor: ['#06cdff30', 'rgba(223,7,107,.3)']
|
||||||
|
},
|
||||||
|
|
||||||
|
// ...
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
以下是对配置项的简要说明
|
||||||
|
|
||||||
|
## 首页LOGO
|
||||||
|
|
||||||
|
**logoImg**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`''`
|
||||||
|
|
||||||
|
首页上方LOGO，路径中的首个 `/` 表示 `public` 目录
|
||||||
|
|
||||||
|
例如：`'/logo/homg-logo.jpg'`
|
||||||
|
|
||||||
|
## 首页背景图
|
||||||
|
|
||||||
|
**bgImg**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`undefined`
|
||||||
|
|
||||||
|
首页全屏背景图，路径中的首个 `/` 表示 `public` 目录
|
||||||
|
|
||||||
|
例如：`'/imgs/homg-bg01.jpg'` 等同于 `/public/imgs/home-bg01.jpg`
|
||||||
|
|
||||||
|
**bgColor**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`'0,0,0'`
|
||||||
|
|
||||||
|
背景图边缘的覆盖颜色，值是 `rgb` 的颜色值 `rgb(0,0,0)` 则写为 `'0,0,0'`，默认为黑色
|
||||||
|
|
||||||
|
**bgOpacity**
|
||||||
|
|
||||||
|
- 类型：`0 - 1`
|
||||||
|
- 默认值：`0.6`
|
||||||
|
|
||||||
|
覆盖颜色的透明度，搭配上面的覆盖颜色使用，图片中间透明度要比图片边缘透明度要小
|
||||||
|
|
||||||
|
图片中间透明度为 `当前bgOpacity - 0.3`，也就是说默认为 `0.3`
|
||||||
|
|
||||||
|
## 文章页背景图
|
||||||
|
|
||||||
|
注意：文章页背景图片与首页一致
|
||||||
|
|
||||||
|
**pageBgEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`true`
|
||||||
|
|
||||||
|
文章页面背景图是否开启，默认开启
|
||||||
|
|
||||||
|
**pageBgOpacity**
|
||||||
|
|
||||||
|
- 类型：`0 - 1`
|
||||||
|
- 默认值：`0.8`
|
||||||
|
|
||||||
|
文章页背景图透明度，1将看不到背景图，0能清晰看到背景图
|
||||||
|
|
||||||
|
**featuresColor**
|
||||||
|
|
||||||
|
- 类型：`string | Array`
|
||||||
|
- 默认值：`rgba(255,255,255,0.8)`
|
||||||
|
|
||||||
|
首页功能面板背景色，可以是单个颜色字符串，也可以是两个字符串组成的数组
|
||||||
|
|
||||||
|
**flashEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`false`
|
||||||
|
|
||||||
|
是否开启首页背景图闪烁功能，效果类似于朋克风故障
|
||||||
|
|
||||||
|
**flashColor**
|
||||||
|
|
||||||
|
- 类型：`string | Array`
|
||||||
|
- 默认值：`['0,0,0','0,0,0']`
|
||||||
|
|
||||||
|
首页背景闪烁时附加的色彩，0: Top位置的颜色，1: Right位置的颜色，默认都是黑色
|
||||||
|
|
||||||
|
**parallaxEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`false`
|
||||||
|
|
||||||
|
是否开启首页部分元素视觉差效果
|
||||||
49
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/dark.md
Normal file
49
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/dark.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
---
|
||||||
|
title: 夜间模式
|
||||||
|
lang: en-US
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
默认的话夜间模式切换按钮是一直有的，右上角那个太阳图标
|
||||||
|
|
||||||
|
## 原理
|
||||||
|
|
||||||
|
开关操作修改的是 HTML 根标签的样式，会加上 dark 样式
|
||||||
|
|
||||||
|
```html
|
||||||
|
<html class="dark" lang="zh-CN"></html>
|
||||||
|
```
|
||||||
|
|
||||||
|
我们可以事先定义一些 css变量来完成不同语言下或者不同模式下的样式变换
|
||||||
|
|
||||||
|
## 主题色覆盖
|
||||||
|
|
||||||
|
修改 theme/custom.scss 文件即可
|
||||||
|
|
||||||
|
简单展示部分
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
// 重写主题色
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
--vp-c-brand: var(--vp-c-blue);
|
||||||
|
--vp-c-brand-light: var(--vp-c-blue-light);
|
||||||
|
--vp-c-brand-lighter: var(--vp-c-blue-lighter);
|
||||||
|
--vp-c-brand-dark: var(--vp-c-blue-dark);
|
||||||
|
--vp-c-brand-darker: var(--vp-c-blue-darker);
|
||||||
|
|
||||||
|
// 副色
|
||||||
|
--vp-c-second: var(--vp-c-pink);
|
||||||
|
--vp-c-second-light: var(--vp-c-pink-light);
|
||||||
|
--vp-c-second-lighter: var(--vp-c-pink-lighter);
|
||||||
|
--vp-c-second-dark: var(--vp-c-pink-dark);
|
||||||
|
--vp-c-second-darker: var(--vp-c-pink-darker);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
17
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/index.md
Normal file
17
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/index.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# 指引
|
||||||
|
|
||||||
|
`info` : 介绍
|
||||||
|
|
||||||
|
`start` : 快速开始
|
||||||
|
|
||||||
|
`question` : 问题一览
|
||||||
|
|
||||||
|
`prodir` : 主题项目结构
|
||||||
|
|
||||||
|
`config` : 主题配置
|
||||||
|
|
||||||
|
`lang` : 国际化配置
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
这里展示的是指引菜单下所有的子菜单
|
||||||
|
:::
|
||||||
50
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/info.md
Normal file
50
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/info.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
title: 什么是Vitepress？
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: vuetom 介绍
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: vuetom theme
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
VitePress 是 VuePress 的升级，以 Vite 为基础构建的。是一款快速搭建文档静态网站的框架。
|
||||||
|
|
||||||
|
Vite（法语意为 "快速的"，发音 `/vit/` ，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。它主要由两部分组成：
|
||||||
|
|
||||||
|
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
|
||||||
|
|
||||||
|
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
|
||||||
|
|
||||||
|
## vuetom 呢？
|
||||||
|
|
||||||
|
是的，是一款主题，因 vitepress 而诞生。建立在 Vue3 与 Vite 之上的一款文档框架的主题。含有 `文档` 与 `博客` 两种风格模板。其推出目的是为了让大家体验并使用到更多美丽而又有趣的 vitepress 主题，进而大家可以发挥想象展示出更多优美的文档。
|
||||||
|
|
||||||
|
## 有什么特点
|
||||||
|
|
||||||
|
使用现代扁平化的设计风格，部分 UI 尽量接近于 macos 界面风格
|
||||||
|
|
||||||
|
该主题包含了以下相关技术
|
||||||
|
|
||||||
|
- [nodejs](http://nodejs.cn/)
|
||||||
|
- [vite](https://vitejs.cn/)
|
||||||
|
- [vue3](https://v3.vuejs.org/)
|
||||||
|
- [vitepress](https://vitejs.cn/vitepress/)
|
||||||
|
- [tailwindcss](https://www.tailwindcss.cn/docs)
|
||||||
|
|
||||||
|
该主题包含了一下功能模块
|
||||||
|
|
||||||
|
**内置UI组件:** 扁平化数据组织，方便编写。含有按钮，弹框，卡片等基础组件
|
||||||
|
|
||||||
|
**主题与样式:** 主要包含布局，间距，排版，颜色，边框
|
||||||
|
|
||||||
|
**API与指令:** 可搭配组件使用，实现不同组件不同指令效果
|
||||||
|
|
||||||
|
## 推荐开发工具？
|
||||||
|
|
||||||
|
这就无所谓了吧哈哈。
|
||||||
|
|
||||||
|
[vscode编辑器](https://code.visualstudio.com/) => [下载地址](https://blog.csdn.net/bielaiwuyang1999/article/details/117814237)
|
||||||
109
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/lang.md
Normal file
109
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/lang.md
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
---
|
||||||
|
title: 多国语言配置
|
||||||
|
lang: en-US
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
:::warning
|
||||||
|
适配于 vitepress 1.x.x 版本的功能正在制作，下面是 0.x.x 版本的国际化方案
|
||||||
|
:::
|
||||||
|
|
||||||
|
你也可以配置多国语言，以首页为例，先在配置文件里配置下 locales，然后创建对应的语言文件夹与文件
|
||||||
|
|
||||||
|
|
||||||
|
## 改配置文件
|
||||||
|
|
||||||
|
需要在 config.ts 中配置 locales，注意 themeConfig 属性里也要配，两个 locales 内容是不一样的
|
||||||
|
|
||||||
|
themeConfig 中的 locales 配置是为了展示下拉菜单的展示内容
|
||||||
|
|
||||||
|
根Config 中的 locales 配置是为了展示头部标题内容，description属性可有可无
|
||||||
|
|
||||||
|
```js
|
||||||
|
// .vitepress/config.ts
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
// ...
|
||||||
|
themeConfig: {
|
||||||
|
// ...
|
||||||
|
locales: {
|
||||||
|
'/zh-CN/': {
|
||||||
|
label: '简体中文',
|
||||||
|
selectText: '多国语言'
|
||||||
|
},
|
||||||
|
'/en-US/': {
|
||||||
|
label: 'English',
|
||||||
|
selectText: 'Languages'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
locales: {
|
||||||
|
'/zh-CN/': {
|
||||||
|
lang: 'zh-CN',
|
||||||
|
title: 'Vuetom 主题',
|
||||||
|
description: '为 Vitepress 提供的一款主题'
|
||||||
|
},
|
||||||
|
'/en-US/': {
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'Vuetom Theme',
|
||||||
|
description: 'Theme For Vitepress'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
**locales** 中的属性介绍
|
||||||
|
|
||||||
|
<b>lang</b>: 会直接设置给 `<html>` 标签
|
||||||
|
|
||||||
|
<b>title</b>: 不同语言时网站的标题，会替换之前定义的 title
|
||||||
|
|
||||||
|
<b>description</b>: 不同语言时网站的描述
|
||||||
|
|
||||||
|
<b>label</b>: 语言选择时展示出来的文本内容（例如：中文或English）
|
||||||
|
|
||||||
|
<b>selectText</b>: 语言选择时下拉菜单的文本（例如：多国语言或者Languages）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 改首页
|
||||||
|
|
||||||
|
在 .vitepress 同级目录新建 `zh-CN` 和 `en-US` 文件夹，然后在这个文件夹中分别创建一个 `index.md` 文件
|
||||||
|
|
||||||
|
**zh-CN/index.md** 中写入 **中文首页** 要展示的内容
|
||||||
|
|
||||||
|
**en-US/index.md** 中写入 **英文首页** 要展示的内容
|
||||||
|
|
||||||
|
原来与 .vitepress 同级的 `index.md` 文件中可以改为转发至 `zh-CN/index` 或者 `en-US/index`
|
||||||
|
|
||||||
|
例如下方的代码，会直接将 `/` 转发到 `/zh-CN/` 这样就会直接前往中文首页了
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: 'Vuetom Theme'
|
||||||
|
lang: en-US
|
||||||
|
page: true
|
||||||
|
---
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const preferredLang = 'zh-CN'
|
||||||
|
window.location.pathname = `/${preferredLang}/`
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
其实原理就是路径前加了一个语言标识，那么就在页面文件外加个语言文件夹就好了<br>
|
||||||
|
需要处理的就是书写导航栏和菜单栏时记得要在 link 属性前加上语言标识
|
||||||
|
:::
|
||||||
|
|
||||||
|
下面试试访问一下：
|
||||||
|
|
||||||
|
访问 localhost:3000/zh-CN/ 会前往中文首页
|
||||||
|
|
||||||
|
访问 localhost:3000/en-US/ 会前往英文首页
|
||||||
|
|
||||||
|
访问 localhost:3000 会前往 localhost:3000/zh-CN/
|
||||||
57
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/prodir.md
Normal file
57
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/prodir.md
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
title: 框架目录
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: Vuetom 主题目录结构
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: project dir.
|
||||||
|
---
|
||||||
|
|
||||||
|
# 主题目录
|
||||||
|
|
||||||
|
在使用一个框架，其实也要简单了解下该框架的项目文件结构，请向下看吧。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
vuetom
|
||||||
|
├─ blog 博客主题Vue组件 文件夹
|
||||||
|
├─ doc 新版文档，适配vp1.x 文件夹
|
||||||
|
├─ docs 旧版文档主题组件 文件夹
|
||||||
|
│ ├─ components 主题Vue组件 文件夹
|
||||||
|
│ ├─ composables 组件脚本 文件夹
|
||||||
|
│ ├─ layouts 布局组件 文件夹
|
||||||
|
│ └─ index.ts 主题入口 文件
|
||||||
|
├─ icons 共用图标Vue组件 文件夹
|
||||||
|
├─ styles 全局SCSS样式 文件夹
|
||||||
|
├─ support 供支持脚本 文件夹
|
||||||
|
├─ types 规范描述 文件夹
|
||||||
|
├─ constant.ts 常量定义 文件
|
||||||
|
└─ index.ts 主题入口文件 文件
|
||||||
|
```
|
||||||
|
|
||||||
|
接下来介绍本文档**docs**文件夹
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docs
|
||||||
|
├─ .vitepress
|
||||||
|
│ └─ config.ts 主题主要配置文件
|
||||||
|
│
|
||||||
|
├─ public 静态资源文件
|
||||||
|
│
|
||||||
|
├─ zh-CN 中文页面
|
||||||
|
│ ├─ feedback 留言反馈
|
||||||
|
│ ├─ guide 指引
|
||||||
|
│ ├─ mdshow Markdown示例
|
||||||
|
│ ├─ menu UI组件
|
||||||
|
│ ├─ styl 主题与样式
|
||||||
|
│ └─ index.md 中文首页
|
||||||
|
│
|
||||||
|
├─ crowdin.yml 多国语言配置
|
||||||
|
├─ index.md 项目首页
|
||||||
|
├─ CHANGELOG.md 更新日志
|
||||||
|
├─ package.json 包配置
|
||||||
|
├─ README.md 项目说明
|
||||||
|
├─ tsconfig.json ts配置
|
||||||
|
└─ vite.config.ts vite配置
|
||||||
|
```
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
---
|
||||||
|
title: 常见问题
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 常见问题汇总
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: question
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
是否经常卡在一些莫名其妙的问题上？让我们来汇总一下问题并给出相应的解决方案吧！
|
||||||
|
|
||||||
|
## 问题列表
|
||||||
|
|
||||||
|
- [版本多久更新一次？](#q01)
|
||||||
|
- [我的样式没有起作用。](#q02)
|
||||||
|
- [我不想要背景图咋办啊？](#q03)
|
||||||
|
|
||||||
|
## 问题解答
|
||||||
|
|
||||||
|
以下是针对于近期问题所作的答复
|
||||||
|
|
||||||
|
- <h3 id="q01">版本多久更新一次？</h3>
|
||||||
|
|
||||||
|
目前进度较慢，但是每周都会更新主要内容的
|
||||||
|
|
||||||
|
- <h3 id="q02">我的样式没有起作用。</h3>
|
||||||
|
|
||||||
|
查看 `.vitepress/config.js` 文件进中 `theme` 项是否配置正确
|
||||||
|
|
||||||
|
- <h3 id="q03">我不想要背景图咋办啊？</h3>
|
||||||
|
|
||||||
|
你可以用一张纯白色的图片作为背景图啊嘿嘿嘿
|
||||||
|
|
||||||
|
## 开发进度
|
||||||
|
|
||||||
|
| 功能组件 | 开发进度 | 预估 |
|
||||||
|
| - | - | - |
|
||||||
|
| 文档风格主题 vitepress 0.x.x | 开发中（80%） | 2022.5 |
|
||||||
|
| 文档风格主题 vitepress 1.x.x | 开发中（80%） | 2022.8 |
|
||||||
|
| 博客风格主题 vitepress 1.x.x | 开发中（50%） | 2022.11 |
|
||||||
|
|
||||||
|
## 需要帮助？
|
||||||
|
|
||||||
|
可点击 [留言反馈](/zh-CN/feedback/) 前往问题反馈界面对问题进行简单的描述
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
目前 vitepress 版本已进入 1.0.0 , vuetom-theme 版本已进入 2.0.0
|
||||||
|
|
||||||
|
:::
|
||||||
158
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/start.md
Normal file
158
packages/docs/.vitepress/crowdin-docs/zh-CN/guide/start.md
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
---
|
||||||
|
title: 快速使用
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 教你如何掌握框架的工作流程，快速上手。
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: 开始使用
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
请确保你已经用过 Vitepress 框架，因为主题是建立在框架的基础上使用的。
|
||||||
|
|
||||||
|
请确保你使用的 vue 版本是 3+ 且 vitepress 是 1.x 哦。
|
||||||
|
|
||||||
|
## 最方便的方式
|
||||||
|
|
||||||
|
直接拉取本项目至本地，packages/docs 和 packages/blog 目录下分别是文档和博客示例，修改内容打包编译即可
|
||||||
|
|
||||||
|
## 其他方式
|
||||||
|
|
||||||
|
### **1.** 脚手架初始化
|
||||||
|
|
||||||
|
可以使用脚手架 vuetom-cli 脚手架来进行主题的初始化，会在你本地初始化一个项目
|
||||||
|
|
||||||
|
网速慢可以再次尝试或者直接前往模版仓库拉取 [模版仓库](https://github.com/lauset/vuetom-cli)
|
||||||
|
|
||||||
|
1. 首先安装脚手架，NPM安装前请确保开启管理员身份运行保证有权限
|
||||||
|
|
||||||
|
```js light
|
||||||
|
npm i -g vuetom-cli
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 查看是否安装成功，黑窗口运行一下命令，返回版本号 x.x.x 则表示安装成功
|
||||||
|
|
||||||
|
```js light
|
||||||
|
vuetom-cli -v
|
||||||
|
```
|
||||||
|
|
||||||
|
1. 初始化模版，可以选择是否新建目录、仓息、作者、模版仓库等
|
||||||
|
|
||||||
|
```js light
|
||||||
|
vuetom-cli init
|
||||||
|
```
|
||||||
|
|
||||||
|
1. 然后便会下载模版，下载完成后，执行以下命令安装依赖并运行文档网站
|
||||||
|
|
||||||
|
```js light
|
||||||
|
pnpm i
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
模版是从 github 上拉取的，可能有时候会有网速的困惑，也可手动前往拉取下载本地启用
|
||||||
|
|
||||||
|
文档模版：<https://github.com/lauset/vuetom-cli/tree/temp-docs>
|
||||||
|
|
||||||
|
博客模版：<https://github.com/lauset/vuetom-cli/tree/temp-blog>
|
||||||
|
:::
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### **2.** 通过NPM下载安装主题（已弃用）
|
||||||
|
|
||||||
|
:::danger ⚠️ 已弃用
|
||||||
|
|
||||||
|
上传至远程仓库，作为三方依赖使用打包时会出现样式引入问题，暂时放弃使用
|
||||||
|
|
||||||
|
从 vitepress-theme-vuetom v2.2.x 开始不再上传远程仓库而是作为目录加至模版项目中
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
使用这个方式首先你要搭建一个 vitepress 项目，主题只是会覆盖默认样式而已，所以项目还是得搭起来的，可以前往下面 vitepress 官网链接查看并开始搭建
|
||||||
|
|
||||||
|
[vitepress搭建文档](https://vitepress.vuejs.org/guide/getting-started.html)
|
||||||
|
|
||||||
|
搭建完后最简单的样子就是项目目录里有个 index.md 文件，那么开始下一步
|
||||||
|
|
||||||
|
1. 安装主题依赖
|
||||||
|
|
||||||
|
使用 NPM 安装最新版本的 vitepress-theme-vuetom 主题依赖包，在你的 vitepress 项目下安装主题包，打开 `终端（DOS）` 输入
|
||||||
|
|
||||||
|
```js light
|
||||||
|
npm i -D vitepress-theme-vuetom
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 开始引入主题
|
||||||
|
|
||||||
|
先在 .vitepress （这个文件夹和首页 index.md 是同级目录，没有的自己创建或者去 vitepress 官网看文档）中新建一个名为 theme 的文件夹，在该文件下新建一个 index.ts 文件，当然用 js 还是 ts 文件就看你自己项目的决定了。
|
||||||
|
|
||||||
|
大致内容如下:
|
||||||
|
|
||||||
|
`VuetomTheme` 是主要的主题布局
|
||||||
|
|
||||||
|
`VuetomUI` 是内置的UI组件
|
||||||
|
|
||||||
|
```javascript light
|
||||||
|
// .vitepress/theme/index.ts
|
||||||
|
// 默认导出文档类型的主题
|
||||||
|
import VuetomTheme from 'vitepress-theme-vuetom'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
...VuetomTheme,
|
||||||
|
enhanceApp({ app, router, siteData }) {
|
||||||
|
// app.use(VuetomUI)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
引入了主题，然后你的 index.md 里写上一些内容应该就可以看出效果了
|
||||||
|
|
||||||
|
```html light
|
||||||
|
---
|
||||||
|
home: true
|
||||||
|
heroImage: /logo/vuetom-logo-m.png
|
||||||
|
heroAlt: LOGO
|
||||||
|
heroText: Vuetom
|
||||||
|
tagline: vitepress flat theme
|
||||||
|
|
||||||
|
actionText: 快 速 开 始
|
||||||
|
actionLink: /zh-CN/guide/info
|
||||||
|
|
||||||
|
altActionText: 配 置
|
||||||
|
altActionLink: /zh-CN/guide/config
|
||||||
|
|
||||||
|
features:
|
||||||
|
- title: 📦 优化的构建
|
||||||
|
details: 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
|
||||||
|
- title: 🔩 通用的插件
|
||||||
|
details: 在开发和构建之间共享 Rollup-superset 插件接口。
|
||||||
|
- title: 🔑 完全类型化的API
|
||||||
|
details: 灵活的 API 和完整 TypeScript 类型。
|
||||||
|
|
||||||
|
footer: MIT Licensed
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="frontpage sponsors">
|
||||||
|
<h2>{{ data.text }}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive } from 'vue'
|
||||||
|
const data = reactive({
|
||||||
|
text: '自定义内容'
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
运行项目后，在 [localhost:3000] 中进入首页
|
||||||
|
|
||||||
|
至少到这里主题已经安装完成了，下一步就是主题的配置了，主题什么样还是要看你配的什么样子哦。
|
||||||
160
packages/docs/.vitepress/crowdin-docs/zh-CN/index.md
Normal file
160
packages/docs/.vitepress/crowdin-docs/zh-CN/index.md
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
title: Vuetom
|
||||||
|
titleTemplate: Vite & Vue Powered Static Site Generator
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: Vuetom
|
||||||
|
text:
|
||||||
|
tagline: vitepress flat theme
|
||||||
|
actions:
|
||||||
|
- theme: brand big
|
||||||
|
text: 快 速 开 始
|
||||||
|
link: /zh-CN/guide/info
|
||||||
|
- theme: alt big
|
||||||
|
text: 配 置
|
||||||
|
link: /zh-CN/guide/config
|
||||||
|
|
||||||
|
features:
|
||||||
|
- title: 📦 优化的构建
|
||||||
|
details: 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
|
||||||
|
- title: 🔩 通用的插件
|
||||||
|
details: 在开发和构建之间共享 Rollup-superset 插件接口。
|
||||||
|
- title: 🔑 完全类型化的API
|
||||||
|
details: 灵活的 API 和完整 TypeScript 类型。
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="frontpage sponsors">
|
||||||
|
<h2>感 谢</h2>
|
||||||
|
<div class="platinum-sponsors">
|
||||||
|
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
|
||||||
|
<img :src="src" :alt="name" :id="`sponsor-${id}`">
|
||||||
|
<p>{{ name }}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="gold-sponsors">
|
||||||
|
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
|
||||||
|
<img :src="src" :alt="name" :id="`sponsor-${id}`">
|
||||||
|
<p>{{ name }}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import pk from 'vitepress-theme-vuetom/package.json'
|
||||||
|
|
||||||
|
const sponsors = [
|
||||||
|
{
|
||||||
|
"id": "vue",
|
||||||
|
"name": "Vue",
|
||||||
|
"href": "https://v3.cn.vuejs.org/",
|
||||||
|
"src": "https://v3.cn.vuejs.org/logo.png",
|
||||||
|
"tier": "platinum"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "vite",
|
||||||
|
"name": "Vite",
|
||||||
|
"href": "https://vitejs.cn/",
|
||||||
|
"src": "https://vitejs.cn/logo.svg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "vitepress",
|
||||||
|
"name": "Vitepress",
|
||||||
|
"href": "https://fttp.jjf-tech.cn/vitepress/",
|
||||||
|
"src": "https://v3.cn.vuejs.org/logo.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "elementplus",
|
||||||
|
"name": "Element Plus",
|
||||||
|
"href": "https://element-plus.gitee.io/zh-CN/",
|
||||||
|
"src": "https://element-plus.gitee.io/images/element-plus-logo.svg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
function fetchReleaseTag() {
|
||||||
|
onMounted(() => {
|
||||||
|
const dom = document.getElementsByClassName('name')
|
||||||
|
const mainTitle = dom[0]
|
||||||
|
const docsReleaseTag = document.createElement('span')
|
||||||
|
docsReleaseTag.classList.add('release-tag')
|
||||||
|
const releaseTagName = `v${pk.version}`
|
||||||
|
docsReleaseTag.innerText = releaseTagName
|
||||||
|
if (releaseTagName !== undefined) {
|
||||||
|
mainTitle.appendChild(docsReleaseTag)
|
||||||
|
}
|
||||||
|
// fetch('https://api.github.com/repos/vitejs/docs-cn/releases/latest')
|
||||||
|
// .then((res) => res.json())
|
||||||
|
// .then((json) => {
|
||||||
|
// const mainTitle = document.getElementById('main-title')
|
||||||
|
// mainTitle.style.position = 'relative'
|
||||||
|
|
||||||
|
// const docsReleaseTag = document.createElement('span')
|
||||||
|
// docsReleaseTag.classList.add('release-tag')
|
||||||
|
// const releaseTagName = json.tag_name
|
||||||
|
// docsReleaseTag.innerText = releaseTagName
|
||||||
|
|
||||||
|
// if (releaseTagName !== undefined) {
|
||||||
|
// mainTitle.appendChild(docsReleaseTag)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchReleaseTag()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.sponsors {
|
||||||
|
padding: 0 1.5rem 2rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors a {
|
||||||
|
color: #999;
|
||||||
|
margin: 1em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors img {
|
||||||
|
max-width: 160px;
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage img {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage h2 {
|
||||||
|
color: #999;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.sidebar a img {
|
||||||
|
max-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platinum-sponsors {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platinum-sponsors a img {
|
||||||
|
max-width: 240px;
|
||||||
|
max-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gold-sponsors {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
102
packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/codeblock.md
Normal file
102
packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/codeblock.md
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
---
|
||||||
|
title: 代码块展示
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 代码块展示
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: code
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
## MD语法展示
|
||||||
|
|
||||||
|
使用三个 ` 符号将代码包裹其中便是展示代码块
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**亮/暗主题切换**
|
||||||
|
|
||||||
|
根据文档主题模式切换
|
||||||
|
|
||||||
|
**代码块主题 macos**
|
||||||
|
|
||||||
|
可以在 language_key(语言标识) 后加入 `macos`
|
||||||
|
|
||||||
|
输入内容：
|
||||||
|
|
||||||
|
<div>
|
||||||
|
```java macos
|
||||||
|
</div>
|
||||||
|
String language = "Java";
|
||||||
|
<div>
|
||||||
|
```
|
||||||
|
</div>
|
||||||
|
|
||||||
|
展示效果：
|
||||||
|
|
||||||
|
```java macos
|
||||||
|
String language = "Java";
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**默认主题**
|
||||||
|
|
||||||
|
默认主题是以暗色系为主的
|
||||||
|
|
||||||
|
输入内容：
|
||||||
|
|
||||||
|
<div>
|
||||||
|
```js
|
||||||
|
</div>
|
||||||
|
String language = "JS";
|
||||||
|
<div>
|
||||||
|
```
|
||||||
|
</div>
|
||||||
|
|
||||||
|
输出内容：
|
||||||
|
|
||||||
|
```java
|
||||||
|
String language = "JS";
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**示例展示**
|
||||||
|
|
||||||
|
- javascript ( js macos )
|
||||||
|
|
||||||
|
```js macos
|
||||||
|
function fun(){
|
||||||
|
echo "Hello, World!";
|
||||||
|
}
|
||||||
|
fun();
|
||||||
|
```
|
||||||
|
|
||||||
|
- Java ( java )
|
||||||
|
|
||||||
|
```java
|
||||||
|
System.out.print(1);
|
||||||
|
```
|
||||||
|
|
||||||
|
- Python ( py macos )
|
||||||
|
|
||||||
|
```py macos
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
print("Hello, World!");
|
||||||
|
```
|
||||||
|
|
||||||
|
- SQL ( sql )
|
||||||
|
|
||||||
|
```sql
|
||||||
|
select user_name from user_info
|
||||||
|
```
|
||||||
|
|
||||||
|
- Shell ( bash, shell )
|
||||||
|
|
||||||
|
```bash
|
||||||
|
echo '1'
|
||||||
|
```
|
||||||
58
packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/custom.md
Normal file
58
packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/custom.md
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
---
|
||||||
|
title: 自定义语法
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 自定义 Markdown 语法
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: markdown custom
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
## 信息框
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: tip 使用TIPS代替
|
||||||
|
提示信息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: info
|
||||||
|
信息消息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
警告消息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
危险消息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: details Details
|
||||||
|
详细信息
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
::: tip 使用TIPS代替
|
||||||
|
提示内容
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: info
|
||||||
|
INFO消息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
WARNING消息 <a>a链接</a>
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
DANGER消息 [md链接](./example.md)
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: details Details
|
||||||
|
详细信息
|
||||||
|
:::
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
title: 效果示例
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 来看看 MD 会变成什么样子
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: markdown example
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
# Markdown 效果示例
|
||||||
|
|
||||||
|
-------------------- 手动分割线 --------------------
|
||||||
|
|
||||||
|
|
||||||
|
# This is an h1 tag
|
||||||
|
## This is an h2 tag
|
||||||
|
### This is an h3 tag
|
||||||
|
#### This is an h4 tag
|
||||||
|
##### This is an h5 tag
|
||||||
|
###### This is an h6 tag
|
||||||
|
|
||||||
|
|
||||||
|
*这是斜体*
|
||||||
|
_这是斜体_
|
||||||
|
**这是黑体**
|
||||||
|
__这是黑体__
|
||||||
|
*斜体里加**黑体***
|
||||||
|
**黑体里加*斜体***
|
||||||
|
|
||||||
|
|
||||||
|
* Item 1
|
||||||
|
* Item 2
|
||||||
|
* Item 2a
|
||||||
|
* Item 2b
|
||||||
|
|
||||||
|
|
||||||
|
1. Item 1
|
||||||
|
1. Item 2
|
||||||
|
1. Item 3
|
||||||
|
1. Item 3a
|
||||||
|
1. Item 3b
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
http://github.com - automatic!
|
||||||
|
[GitHub](http://github.com)
|
||||||
|
|
||||||
|
|
||||||
|
As Kanye West said:
|
||||||
|
> We're living the future so
|
||||||
|
> the present is our past.
|
||||||
|
|
||||||
|
|
||||||
|
I think you should use an
|
||||||
|
`<addr>` element here instead.
|
||||||
|
|
||||||
|
|
||||||
|
First Header | Second Header
|
||||||
|
------------ | -------------
|
||||||
|
Content from cell 1 | Content from cell 2
|
||||||
|
Content in the first column | Content in the second column
|
||||||
|
|
||||||
|
|
||||||
|
~~this~~
|
||||||
|
|
||||||
|
|
||||||
|
😝🌟🐫✨🚶
|
||||||
31
packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/index.md
Normal file
31
packages/docs/.vitepress/crowdin-docs/zh-CN/mdshow/index.md
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
title: UI组件
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 各种各样的扁平化UI组件
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: components
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
### `Vuetom UI`
|
||||||
|
|
||||||
|
[ui 文档](http://ui.tomhub.cn)
|
||||||
|
|
||||||
|
[ui github](https://github.com/lauset/vuetom-ui)
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
UI 文档正在不断完善中，请客观耐心等待一下吧T-T
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
### Markdown 语法示例
|
||||||
|
|
||||||
|
这里将会展示在该文档中markdown所呈现的效果
|
||||||
|
|
||||||
|
`Example` : Markdown 语法示例
|
||||||
|
|
||||||
|
`Custom md` : 自定义语法
|
||||||
7
packages/docs/.vitepress/crowdin/en-US/demo-block.json
Normal file
7
packages/docs/.vitepress/crowdin/en-US/demo-block.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"view-source": "Code",
|
||||||
|
"edit-on-github": "Edit on Github",
|
||||||
|
"copy-code": "Copy Code",
|
||||||
|
"copy-success": "Copy Success",
|
||||||
|
"copy-error": "Copy Error"
|
||||||
|
}
|
||||||
30
packages/docs/.vitepress/crowdin/en-US/nav.json
Normal file
30
packages/docs/.vitepress/crowdin/en-US/nav.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"text": "Guide",
|
||||||
|
"link": "/guide/info",
|
||||||
|
"activeMatch": "/guide/info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Components",
|
||||||
|
"link": "/mdshow/",
|
||||||
|
"activeMatch": "/mdshow/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Links",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "FeedBack",
|
||||||
|
"link": "/feedback/",
|
||||||
|
"activeMatch": "/feedback/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Gitee",
|
||||||
|
"link": "https://gitee.com/lauset/vitepress-theme-vuetom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Vitepress",
|
||||||
|
"link": "https://vitepress.vuejs.org/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
34
packages/docs/.vitepress/crowdin/en-US/sidebars/guide.json
Normal file
34
packages/docs/.vitepress/crowdin/en-US/sidebars/guide.json
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"text": "Basic",
|
||||||
|
"items": [
|
||||||
|
{ "text": "What's the Vitepress?", "link": "/guide/info" },
|
||||||
|
{ "text": "Quick Start", "link": "/guide/start" },
|
||||||
|
{
|
||||||
|
"text": "Questions",
|
||||||
|
"link": "/guide/question"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Project Dir",
|
||||||
|
"link": "/guide/prodir"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Advanced",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "Theme Config",
|
||||||
|
"link": "/guide/config"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Languages",
|
||||||
|
"link": "/guide/lang"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Dark Mode",
|
||||||
|
"link": "/guide/dark"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
19
packages/docs/.vitepress/crowdin/en-US/sidebars/mdshow.json
Normal file
19
packages/docs/.vitepress/crowdin/en-US/sidebars/mdshow.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"langshow": {
|
||||||
|
"text": "MD Show",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"link": "/mdshow/example",
|
||||||
|
"text": "Example"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/mdshow/custom",
|
||||||
|
"text": "Custom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/comp/codeblock",
|
||||||
|
"text": "Code Block"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
20
packages/docs/.vitepress/crowdin/en-US/theme-config.json
Normal file
20
packages/docs/.vitepress/crowdin/en-US/theme-config.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"label": "English",
|
||||||
|
"selectText": "Languages",
|
||||||
|
"editLinkText": "Suggest changes to this page",
|
||||||
|
"lastUpdatedText": "Last Updated",
|
||||||
|
"localeLinks": {
|
||||||
|
"text": "",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "Chinese",
|
||||||
|
"link": "/zh-CN/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "English",
|
||||||
|
"link": "/en-US/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"socialLinks": [{ "icon": "github", "link": "" }]
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"title": "Vuetom Theme",
|
||||||
|
"lang": "en-US",
|
||||||
|
"description": "Theme for Vitepress"
|
||||||
|
}
|
||||||
7
packages/docs/.vitepress/crowdin/zh-CN/demo-block.json
Normal file
7
packages/docs/.vitepress/crowdin/zh-CN/demo-block.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"view-source": "代码",
|
||||||
|
"edit-on-github": "前往 Github 编辑",
|
||||||
|
"copy-code": "复制",
|
||||||
|
"copy-success": "复制成功",
|
||||||
|
"copy-error": "复制出现了一些问题"
|
||||||
|
}
|
||||||
30
packages/docs/.vitepress/crowdin/zh-CN/nav.json
Normal file
30
packages/docs/.vitepress/crowdin/zh-CN/nav.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"text": "指引",
|
||||||
|
"link": "/guide/info",
|
||||||
|
"activeMatch": "/guide/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "组件",
|
||||||
|
"link": "/mdshow/",
|
||||||
|
"activeMatch": "/mdshow/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "链接",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "反馈",
|
||||||
|
"link": "/feedback/",
|
||||||
|
"activeMatch": "/feedback/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "码云",
|
||||||
|
"link": "https://gitee.com/lauset/vitepress-theme-vuetom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Vitepress官网",
|
||||||
|
"link": "https://vitepress.vuejs.org/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
34
packages/docs/.vitepress/crowdin/zh-CN/sidebars/guide.json
Normal file
34
packages/docs/.vitepress/crowdin/zh-CN/sidebars/guide.json
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"text": "基础",
|
||||||
|
"items": [
|
||||||
|
{ "text": "什么是Vitepress?", "link": "/guide/info" },
|
||||||
|
{ "text": "快速开始", "link": "/guide/start" },
|
||||||
|
{
|
||||||
|
"text": "问题一览",
|
||||||
|
"link": "/guide/question"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "主题目录",
|
||||||
|
"link": "/guide/prodir"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "进阶",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "主题配置",
|
||||||
|
"link": "/guide/config"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "国际化",
|
||||||
|
"link": "/guide/lang"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "夜间模式",
|
||||||
|
"link": "/guide/dark"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
19
packages/docs/.vitepress/crowdin/zh-CN/sidebars/mdshow.json
Normal file
19
packages/docs/.vitepress/crowdin/zh-CN/sidebars/mdshow.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"text": "语法",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"link": "/mdshow/example",
|
||||||
|
"text": "MD语法示例"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/mdshow/custom",
|
||||||
|
"text": "自定义语法"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/mdshow/codeblock",
|
||||||
|
"text": "代码块展示"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
20
packages/docs/.vitepress/crowdin/zh-CN/theme-config.json
Normal file
20
packages/docs/.vitepress/crowdin/zh-CN/theme-config.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"label": "简体中文",
|
||||||
|
"selectText": "选择语言",
|
||||||
|
"editLinkText": "对本页提出修改建议",
|
||||||
|
"lastUpdatedText": "最后更新",
|
||||||
|
"localeLinks": {
|
||||||
|
"text": "",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "简体中文",
|
||||||
|
"link": "/zh-CN/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "English",
|
||||||
|
"link": "/en-US/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"socialLinks": [{ "icon": "github", "link": "" }]
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"title": "Vuetom 主题",
|
||||||
|
"lang": "zh-CN",
|
||||||
|
"description": "一款为 Vitepress 而生的主题"
|
||||||
|
}
|
||||||
16
packages/docs/.vitepress/i18n/demo-block.json
Normal file
16
packages/docs/.vitepress/i18n/demo-block.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"en-US": {
|
||||||
|
"view-source": "Code",
|
||||||
|
"edit-on-github": "Edit on Github",
|
||||||
|
"copy-code": "Copy Code",
|
||||||
|
"copy-success": "Copy Success",
|
||||||
|
"copy-error": "Copy Error"
|
||||||
|
},
|
||||||
|
"zh-CN": {
|
||||||
|
"view-source": "代码",
|
||||||
|
"edit-on-github": "前往 Github 编辑",
|
||||||
|
"copy-code": "复制",
|
||||||
|
"copy-success": "复制成功",
|
||||||
|
"copy-error": "复制出现了一些问题"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
packages/docs/.vitepress/i18n/lang.json
Normal file
1
packages/docs/.vitepress/i18n/lang.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
["en-US","zh-CN"]
|
||||||
33
packages/docs/.vitepress/i18n/nav.json
Normal file
33
packages/docs/.vitepress/i18n/nav.json
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"en-US": [
|
||||||
|
{
|
||||||
|
"text": "Resume",
|
||||||
|
"link": "https://docs.google.com/document/d/1MTTfAx80EzWvtgmxFADdMrCS9R72ZwZPTLuBAaqtGNo/edit?usp=sharing",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Gitea",
|
||||||
|
"link": "https://git.vertinext.com/roryejinn",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Github",
|
||||||
|
"link": "https://github.com/ccubed"
|
||||||
|
}
|
||||||
|
{
|
||||||
|
"text": "Links",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "Linkedin",
|
||||||
|
"link": "/feedback/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Twitch.tv",
|
||||||
|
"link": "https://gitee.com/lauset/vitepress-theme-vuetom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Anilist Profile",
|
||||||
|
"link": "https://anilist.co/user/TakeshiKO/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
82
packages/docs/.vitepress/i18n/sidebars/guide.json
Normal file
82
packages/docs/.vitepress/i18n/sidebars/guide.json
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
{
|
||||||
|
"en-US": [
|
||||||
|
{
|
||||||
|
"text": "Basic",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "What's the Vitepress?",
|
||||||
|
"link": "/guide/info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Quick Start",
|
||||||
|
"link": "/guide/start"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Questions",
|
||||||
|
"link": "/guide/question"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Project Dir",
|
||||||
|
"link": "/guide/prodir"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Advanced",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "Theme Config",
|
||||||
|
"link": "/guide/config"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Languages",
|
||||||
|
"link": "/guide/lang"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Dark Mode",
|
||||||
|
"link": "/guide/dark"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"zh-CN": [
|
||||||
|
{
|
||||||
|
"text": "基础",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "什么是Vitepress?",
|
||||||
|
"link": "/guide/info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "快速开始",
|
||||||
|
"link": "/guide/start"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "问题一览",
|
||||||
|
"link": "/guide/question"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "主题目录",
|
||||||
|
"link": "/guide/prodir"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "进阶",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "主题配置",
|
||||||
|
"link": "/guide/config"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "国际化",
|
||||||
|
"link": "/guide/lang"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "夜间模式",
|
||||||
|
"link": "/guide/dark"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
40
packages/docs/.vitepress/i18n/sidebars/mdshow.json
Normal file
40
packages/docs/.vitepress/i18n/sidebars/mdshow.json
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"en-US": {
|
||||||
|
"langshow": {
|
||||||
|
"text": "MD Show",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"link": "/mdshow/example",
|
||||||
|
"text": "Example"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/mdshow/custom",
|
||||||
|
"text": "Custom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/comp/codeblock",
|
||||||
|
"text": "Code Block"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"zh-CN": [
|
||||||
|
{
|
||||||
|
"text": "语法",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"link": "/mdshow/example",
|
||||||
|
"text": "MD语法示例"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/mdshow/custom",
|
||||||
|
"text": "自定义语法"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/mdshow/codeblock",
|
||||||
|
"text": "代码块展示"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
52
packages/docs/.vitepress/i18n/theme-config.json
Normal file
52
packages/docs/.vitepress/i18n/theme-config.json
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"en-US": {
|
||||||
|
"label": "English",
|
||||||
|
"selectText": "Languages",
|
||||||
|
"editLinkText": "Suggest changes to this page",
|
||||||
|
"lastUpdatedText": "Last Updated",
|
||||||
|
"localeLinks": {
|
||||||
|
"text": "",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "Chinese",
|
||||||
|
"link": "/zh-CN/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "English",
|
||||||
|
"link": "/en-US/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"socialLinks": [
|
||||||
|
{
|
||||||
|
"icon": "github",
|
||||||
|
"link": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"zh-CN": {
|
||||||
|
"label": "简体中文",
|
||||||
|
"selectText": "选择语言",
|
||||||
|
"editLinkText": "对本页提出修改建议",
|
||||||
|
"lastUpdatedText": "最后更新",
|
||||||
|
"localeLinks": {
|
||||||
|
"text": "",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"text": "简体中文",
|
||||||
|
"link": "/zh-CN/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "English",
|
||||||
|
"link": "/en-US/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"socialLinks": [
|
||||||
|
{
|
||||||
|
"icon": "github",
|
||||||
|
"link": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
12
packages/docs/.vitepress/i18n/vitepress-config.json
Normal file
12
packages/docs/.vitepress/i18n/vitepress-config.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"en-US": {
|
||||||
|
"title": "Vuetom Theme",
|
||||||
|
"lang": "en-US",
|
||||||
|
"description": "Theme for Vitepress"
|
||||||
|
},
|
||||||
|
"zh-CN": {
|
||||||
|
"title": "Vuetom 主题",
|
||||||
|
"lang": "zh-CN",
|
||||||
|
"description": "一款为 Vitepress 而生的主题"
|
||||||
|
}
|
||||||
|
}
|
||||||
150
packages/docs/.vitepress/menus.ts
Normal file
150
packages/docs/.vitepress/menus.ts
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
import type { HeadConfig } from 'vitepress'
|
||||||
|
import { languages } from './utils/lang'
|
||||||
|
import navJson from './i18n/nav.json'
|
||||||
|
import guideSidebarJson from './i18n/sidebars/guide.json'
|
||||||
|
import mdshowSidebarJson from './i18n/sidebars/mdshow.json'
|
||||||
|
import vitepressConfigJson from './i18n/vitepress-config.json'
|
||||||
|
import themeConfigJson from './i18n/theme-config.json'
|
||||||
|
|
||||||
|
type langType = 'zh-CN' | 'en-US'
|
||||||
|
|
||||||
|
const getVitepressConfigLocales = (lang: langType = 'zh-CN') => (vitepressConfigJson[lang])
|
||||||
|
|
||||||
|
const getThemeConfigLocales = (lang: langType = 'zh-CN') => {
|
||||||
|
const sidebar = {}
|
||||||
|
sidebar[`/${lang}/guide/`] = guideSidebarJson[lang]
|
||||||
|
sidebar[`/${lang}/mdshow/`] = mdshowSidebarJson[lang]
|
||||||
|
return {
|
||||||
|
nav: navJson[lang],
|
||||||
|
sidebar,
|
||||||
|
...themeConfigJson[lang]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLocales = (langs: langType[] = []) => {
|
||||||
|
const config = {
|
||||||
|
vitepressConfig: {},
|
||||||
|
themeConfig: {}
|
||||||
|
}
|
||||||
|
langs.forEach(lang => {
|
||||||
|
config.vitepressConfig[`/${lang}/`] = getVitepressConfigLocales(lang)
|
||||||
|
config.themeConfig[`/${lang}/`] = getThemeConfigLocales(lang)
|
||||||
|
})
|
||||||
|
return config
|
||||||
|
}
|
||||||
|
|
||||||
|
const getNav = (lang: 'zh-CN' | 'en-US' = 'zh-CN') => (navJson[lang])
|
||||||
|
|
||||||
|
const getSidebar = (lang: 'zh-CN' | 'en-US' = 'zh-CN') => ({
|
||||||
|
'/guide/': guideSidebarJson[lang],
|
||||||
|
'/mdshow/': mdshowSidebarJson[lang]
|
||||||
|
})
|
||||||
|
|
||||||
|
const head: HeadConfig[] = [
|
||||||
|
[
|
||||||
|
'meta',
|
||||||
|
{
|
||||||
|
name: 'viewport',
|
||||||
|
content: 'width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
['link', { rel: 'icon', href: '/logo/vuetom-logo-m.png' }],
|
||||||
|
[
|
||||||
|
'script', {}, ';(() => { })()'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'script',
|
||||||
|
{},
|
||||||
|
`;(() => {
|
||||||
|
const supportedLangs = ${JSON.stringify(languages)}
|
||||||
|
const cacheKey = 'vuetom_langs'
|
||||||
|
localStorage.setItem(cacheKey, supportedLangs)
|
||||||
|
})()`
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
// const nav = (lang: '/zh-CN' | '/en-US' | '' = '') => [
|
||||||
|
// { text: '指引', link: `${lang}/guide/info`, activeMatch: '/guide/' },
|
||||||
|
// { text: '组件', link: `${lang}/mdshow/`, activeMatch: '/mdshow/' },
|
||||||
|
// {
|
||||||
|
// text: '链接',
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// text: '反馈',
|
||||||
|
// link: `${lang}/feedback/`,
|
||||||
|
// activeMatch: '/feedback/',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// text: '码云',
|
||||||
|
// link: 'https://gitee.com/lauset/vitepress-theme-vuetom',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// text: 'Vitepress官网',
|
||||||
|
// link: 'https://vitepress.vuejs.org/',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ]
|
||||||
|
|
||||||
|
// const sidebarGuide = (lang: '/zh-CN' | '/en-US' | '' = '') => [
|
||||||
|
// {
|
||||||
|
// text: '基础',
|
||||||
|
// collapsible: true,
|
||||||
|
// items: [
|
||||||
|
// { text: '什么是Vitepress?', link: `${lang}/guide/info` },
|
||||||
|
// { text: '快速开始', link: `${lang}/guide/start` },
|
||||||
|
// {
|
||||||
|
// text: '问题一览',
|
||||||
|
// link: `${lang}/guide/question`,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// text: '主题目录',
|
||||||
|
// link: `${lang}/guide/prodir`,
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// text: '进阶',
|
||||||
|
// collapsible: true,
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// text: '主题配置',
|
||||||
|
// link: `${lang}/guide/config`,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// text: '国际化',
|
||||||
|
// link: `${lang}/guide/lang`,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// text: '夜间模式',
|
||||||
|
// link: `${lang}/guide/dark`,
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ]
|
||||||
|
|
||||||
|
// const sidebarMdShow = (lang: '/zh-CN' | '/en-US' | '' = '') => [
|
||||||
|
// {
|
||||||
|
// text: '语法',
|
||||||
|
// collapsible: true,
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// link: `${lang}/mdshow/example`,
|
||||||
|
// text: 'MD语法示例',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// link: `${lang}/mdshow/custom`,
|
||||||
|
// text: '自定义语法',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// link: `${lang}/mdshow/codeblock`,
|
||||||
|
// text: '代码块展示',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ]
|
||||||
|
const nav = getNav()
|
||||||
|
const sidebar = getSidebar()
|
||||||
|
const locales = getLocales(['zh-CN', 'en-US'])
|
||||||
|
|
||||||
|
export { nav, sidebar, head, locales, getNav, getSidebar }
|
||||||
17
packages/docs/.vitepress/theme/custom.scss
Normal file
17
packages/docs/.vitepress/theme/custom.scss
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
:root{
|
||||||
|
// 重写主题色
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
--vp-c-brand: var(--vp-c-blue);
|
||||||
|
--vp-c-brand-light: var(--vp-c-blue-light);
|
||||||
|
--vp-c-brand-lighter: var(--vp-c-blue-lighter);
|
||||||
|
--vp-c-brand-dark: var(--vp-c-blue-dark);
|
||||||
|
--vp-c-brand-darker: var(--vp-c-blue-darker);
|
||||||
|
|
||||||
|
// 副色
|
||||||
|
--vp-c-second: var(--vp-c-pink);
|
||||||
|
--vp-c-second-light: var(--vp-c-pink-light);
|
||||||
|
--vp-c-second-lighter: var(--vp-c-pink-lighter);
|
||||||
|
--vp-c-second-dark: var(--vp-c-pink-dark);
|
||||||
|
--vp-c-second-darker: var(--vp-c-pink-darker);
|
||||||
|
}
|
||||||
24
packages/docs/.vitepress/theme/index.ts
Normal file
24
packages/docs/.vitepress/theme/index.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
// .vitepress/theme/index.ts
|
||||||
|
|
||||||
|
// theme
|
||||||
|
import VuetomTheme from 'vitepress-theme-vuetom/docs'
|
||||||
|
|
||||||
|
// components
|
||||||
|
import { globals } from '../views'
|
||||||
|
|
||||||
|
// rewrite css
|
||||||
|
import './custom.scss'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
...VuetomTheme,
|
||||||
|
|
||||||
|
// NotFound,
|
||||||
|
// Layout,
|
||||||
|
enhanceApp({ app, router, siteData }) {
|
||||||
|
// app.use(VuetomUI)
|
||||||
|
|
||||||
|
globals.forEach(([name, Comp]) => {
|
||||||
|
app.component(name, Comp)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
8
packages/docs/.vitepress/utils/lang.ts
Normal file
8
packages/docs/.vitepress/utils/lang.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import fs from 'fs'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export const languages = fs.readdirSync(
|
||||||
|
path.resolve(__dirname, '../crowdin')
|
||||||
|
)
|
||||||
|
|
||||||
|
export const changeLang = (lang: string) => `/${lang}`
|
||||||
23
packages/docs/.vitepress/utils/log.ts
Normal file
23
packages/docs/.vitepress/utils/log.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import process from 'process'
|
||||||
|
import chalk from 'chalk'
|
||||||
|
|
||||||
|
export function cyan(str: string) {
|
||||||
|
console.log(chalk.cyan(str))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function yellow(str: string) {
|
||||||
|
console.log(chalk.yellow(str))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function green(str: string) {
|
||||||
|
console.log(chalk.green(str))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function red(str: string) {
|
||||||
|
console.error(chalk.red(str))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function errorAndExit(e: Error): never {
|
||||||
|
red(e.stack ?? e.message)
|
||||||
|
process.exit(1)
|
||||||
|
}
|
||||||
6
packages/docs/.vitepress/utils/paths.ts
Normal file
6
packages/docs/.vitepress/utils/paths.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export const vpRoot = path.resolve(__dirname, '..')
|
||||||
|
export const docRoot = path.resolve(vpRoot, '..')
|
||||||
|
export const pkgsRoot = path.resolve(docRoot, '..')
|
||||||
|
export const projRoot = path.resolve(pkgsRoot, '..')
|
||||||
18
packages/docs/.vitepress/views/common/lang.ts
Normal file
18
packages/docs/.vitepress/views/common/lang.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { computed } from 'vue'
|
||||||
|
import { useRoute } from 'vitepress'
|
||||||
|
|
||||||
|
export const useLang = () => {
|
||||||
|
const route = useRoute()
|
||||||
|
return computed(() => {
|
||||||
|
// the first part of the first slash
|
||||||
|
const path = route.data?.relativePath
|
||||||
|
let lang: string
|
||||||
|
|
||||||
|
if (path?.includes('/')) {
|
||||||
|
lang = path.split('/').shift()
|
||||||
|
} else {
|
||||||
|
lang = 'zh-CN'
|
||||||
|
}
|
||||||
|
return lang
|
||||||
|
})
|
||||||
|
}
|
||||||
18
packages/docs/.vitepress/views/common/toggle.ts
Normal file
18
packages/docs/.vitepress/views/common/toggle.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { isRef, ref } from 'vue'
|
||||||
|
import { isBoolean } from '@vueuse/core'
|
||||||
|
import type { MaybeRef } from '@vueuse/core'
|
||||||
|
|
||||||
|
export const useToggle = (getToggled?: MaybeRef<boolean>) => {
|
||||||
|
const val = isRef(getToggled)
|
||||||
|
? getToggled
|
||||||
|
: ref(isBoolean(getToggled) ? getToggled : false)
|
||||||
|
|
||||||
|
return [
|
||||||
|
val,
|
||||||
|
(toggle?: boolean) => {
|
||||||
|
val.value = isBoolean(toggle) ? toggle : !val.value
|
||||||
|
}
|
||||||
|
] as const
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {}
|
||||||
8
packages/docs/.vitepress/views/index.ts
Normal file
8
packages/docs/.vitepress/views/index.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import VtFeedback from './vt/vt-feedback.vue'
|
||||||
|
|
||||||
|
// export default VtApp
|
||||||
|
export const globals = [
|
||||||
|
['VtFeedback', VtFeedback],
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {}
|
||||||
426
packages/docs/.vitepress/views/vt/vt-feedback.vue
Normal file
426
packages/docs/.vitepress/views/vt/vt-feedback.vue
Normal file
@ -0,0 +1,426 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box" :style="{}" :class="getExtBoxClasses()">
|
||||||
|
<div class="box-center">
|
||||||
|
<div class="box-center-left"></div>
|
||||||
|
<div class="box-center-center loader">
|
||||||
|
<div class="app-bar" :style="{ backgroundColor: '#fff' }">
|
||||||
|
<div class="controll">
|
||||||
|
<div class="close"></div>
|
||||||
|
<div class="min"></div>
|
||||||
|
<div class="full"></div>
|
||||||
|
</div>
|
||||||
|
<div class="title" :style="{ color: '#000' }">标题</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-body">
|
||||||
|
<div class="feedback-container">
|
||||||
|
<div class="row">
|
||||||
|
<input
|
||||||
|
class="txt"
|
||||||
|
type="text"
|
||||||
|
v-model="email"
|
||||||
|
placeholder="邮箱"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
class="txt"
|
||||||
|
v-model="txt"
|
||||||
|
cols="30"
|
||||||
|
rows="3"
|
||||||
|
placeholder="留言内容"
|
||||||
|
></textarea>
|
||||||
|
<div class="btns row">
|
||||||
|
<button class="btn" @click="goFeeback">留言</button>
|
||||||
|
<button class="rest btn" @click="reset">重置</button>
|
||||||
|
</div>
|
||||||
|
<h3 class="row">留言列表</h3>
|
||||||
|
<ul>
|
||||||
|
<li v-for="item in list" :key="item.fd_id">
|
||||||
|
<div class="title">
|
||||||
|
来自-{{ item.f_address || '未知地区' }}
|
||||||
|
<span>{{ item.time }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="content" v-text="item.f_context"></div>
|
||||||
|
<div
|
||||||
|
class="replay"
|
||||||
|
v-text="item.f_back"
|
||||||
|
v-if="item.f_back"
|
||||||
|
></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="nolist" v-if="list.length === 0">暂无留言~</div>
|
||||||
|
<br/>
|
||||||
|
<button class="more btn" @click="getList" :disabled="isDown">
|
||||||
|
加载更多
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box-center-right"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
// import { ElMessage } from "element-plus";
|
||||||
|
// import "element-plus/lib/theme-chalk/el-message.css";
|
||||||
|
// import "element-plus/lib/theme-chalk/el-icon.css";
|
||||||
|
|
||||||
|
const postUrl = ''
|
||||||
|
const getListUrl = ''
|
||||||
|
const isBoxResizing = ref(false)
|
||||||
|
const isMaxShowing = ref(false)
|
||||||
|
const isFullScreen = ref(false)
|
||||||
|
const txt = ref('')
|
||||||
|
const email = ref('')
|
||||||
|
const page = ref(1)
|
||||||
|
const pagesize = ref(10)
|
||||||
|
const isDown = ref(false)
|
||||||
|
const list = ref([])
|
||||||
|
const reset = () => {
|
||||||
|
txt.value = ''
|
||||||
|
email.value = ''
|
||||||
|
}
|
||||||
|
const goFeeback = () => {
|
||||||
|
alert('开发中!')
|
||||||
|
return
|
||||||
|
if (!txt.value || !email.value) {
|
||||||
|
alert("你还未填写内容");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
axios
|
||||||
|
.post(postUrl, { text: txt.value.trim(), email: email.value })
|
||||||
|
.then((res) => {
|
||||||
|
const { status, msg } = res.data
|
||||||
|
if (status === 0) {
|
||||||
|
reset()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getExtBoxClasses = () => {
|
||||||
|
let str = ''
|
||||||
|
if (isMaxShowing) {
|
||||||
|
str += 'isMaxShowing '
|
||||||
|
}
|
||||||
|
if (isFullScreen) {
|
||||||
|
str += 'isFullScreen '
|
||||||
|
}
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
|
||||||
|
const getList = (tip = false) => {
|
||||||
|
if (isDown.value) {
|
||||||
|
alert("没有更多数据了");
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
axios
|
||||||
|
.post(getListUrl, { page: page.value, pagesize: pagesize.value })
|
||||||
|
.then((res) => {
|
||||||
|
const {
|
||||||
|
data: { status, msg, data },
|
||||||
|
} = res
|
||||||
|
if (status === 0) {
|
||||||
|
list.value.push(...data)
|
||||||
|
page.value += 1
|
||||||
|
if (data.length < pagesize.value) {
|
||||||
|
isDown.value = true
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
isDown.value = true
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(getList)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.row {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.txt {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: 32px;
|
||||||
|
line-height: 1.5715;
|
||||||
|
vertical-align: bottom;
|
||||||
|
transition: all 0.3s, height 0s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-variant: tabular-nums;
|
||||||
|
list-style: none;
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 4px 11px;
|
||||||
|
color: #000000d9;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5715;
|
||||||
|
background-color: #fff;
|
||||||
|
background-image: none;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.txt:focus {
|
||||||
|
border-color: #40a9ff;
|
||||||
|
border-right-width: 1px !important;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0 2px #1890ff33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
line-height: 1.5715;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 400;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center;
|
||||||
|
background-image: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-shadow: 0 2px #00000004;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
touch-action: manipulation;
|
||||||
|
height: 32px;
|
||||||
|
padding: 4px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #000000d9;
|
||||||
|
background: #fff;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
color: #fff;
|
||||||
|
background: #1890ff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
|
||||||
|
box-shadow: 0 2px #0000000b;
|
||||||
|
}
|
||||||
|
.btn:active {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
color: #fff;
|
||||||
|
background: #096dd9;
|
||||||
|
border-color: #096dd9;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.btn:focus,
|
||||||
|
.btn:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: #40a9ff;
|
||||||
|
border-color: #40a9ff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.rest {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.title span {
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #d9d9d9;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.replay,.content {
|
||||||
|
padding: 10px;
|
||||||
|
white-space: pre-line;
|
||||||
|
color: #00000073;
|
||||||
|
}
|
||||||
|
.btn.more {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.btn[disabled] {
|
||||||
|
color: #00000040;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
text-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.replay{
|
||||||
|
padding:0 15px 10px;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
--resize: 5px;
|
||||||
|
--resize-bg: transparent;
|
||||||
|
--resize-main: transparent;
|
||||||
|
--resize-bg-main: transparent;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
pointer-events: auto;
|
||||||
|
|
||||||
|
.box-top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
.box-top-left {
|
||||||
|
width: var(--resize);
|
||||||
|
height: var(--resize);
|
||||||
|
background: var(--resize-bg);
|
||||||
|
cursor: nw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-top-center {
|
||||||
|
height: var(--resize);
|
||||||
|
background: var(--resize-bg-main);
|
||||||
|
cursor: n-resize;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-top-right {
|
||||||
|
width: var(--resize);
|
||||||
|
height: var(--resize);
|
||||||
|
background: var(--resize-bg);
|
||||||
|
cursor: ne-resize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.box-center-left {
|
||||||
|
width: var(--resize);
|
||||||
|
height: 100%;
|
||||||
|
background: var(--resize-bg-main);
|
||||||
|
cursor: w-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-center-center {
|
||||||
|
height: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 3px rgb(201, 196, 196);
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
overflow: hidden;
|
||||||
|
// filter: grayscale(1) brightness(0.9);
|
||||||
|
.app-bar {
|
||||||
|
height: 40px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
.title {
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 84px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-shadow: none;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: move;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.controll {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 15px;
|
||||||
|
div {
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
margin-right: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
background: #fc605c;
|
||||||
|
}
|
||||||
|
.close:hover {
|
||||||
|
background: #cc2c26;
|
||||||
|
}
|
||||||
|
.min {
|
||||||
|
background: #fcbb40;
|
||||||
|
}
|
||||||
|
.min:hover {
|
||||||
|
background: #c28719;
|
||||||
|
}
|
||||||
|
.full {
|
||||||
|
background: #34c648;
|
||||||
|
}
|
||||||
|
.full:hover {
|
||||||
|
background: #1f942e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-disabled {
|
||||||
|
background: #ccc !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-body {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 50px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-center-right {
|
||||||
|
width: var(--resize);
|
||||||
|
height: 100%;
|
||||||
|
background: var(--resize-bg-main);
|
||||||
|
cursor: e-resize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
.box-bottom-left {
|
||||||
|
width: var(--resize);
|
||||||
|
height: var(--resize);
|
||||||
|
background: var(--resize-bg);
|
||||||
|
cursor: sw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-bottom-center {
|
||||||
|
height: var(--resize);
|
||||||
|
background: var(--resize-bg-main);
|
||||||
|
cursor: s-resize;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-bottom-right {
|
||||||
|
width: var(--resize);
|
||||||
|
height: var(--resize);
|
||||||
|
background: var(--resize-bg);
|
||||||
|
cursor: se-resize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
2
packages/docs/README.md
Normal file
2
packages/docs/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
<h1 align="center">Vuetom Theme Documents</h1>
|
||||||
15
packages/docs/api/proxy.js
Normal file
15
packages/docs/api/proxy.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const { createProxyMiddleware } = require('http-proxy-middleware')
|
||||||
|
|
||||||
|
module.exports = (req, res) => {
|
||||||
|
let target = ''
|
||||||
|
if (req.url.startsWith('/vt')) {
|
||||||
|
target = 'https://vitepress-theme-vuetom.vercel.app'
|
||||||
|
}
|
||||||
|
createProxyMiddleware({
|
||||||
|
target,
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite: {
|
||||||
|
'^/vt/': '/'
|
||||||
|
}
|
||||||
|
})(req, res)
|
||||||
|
}
|
||||||
130
packages/docs/crowdin.yml
Normal file
130
packages/docs/crowdin.yml
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
#
|
||||||
|
# Your Crowdin credentials
|
||||||
|
#
|
||||||
|
'project_id': '493499'
|
||||||
|
'api_token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJ3UUVxdmhVM3ZMT2EyWGljbVV5VCIsImp0aSI6IjAxOTUwYzkxMzYwZjA2ZGRmZmIzMWI2NWEyYTcyMTFlM2U3MmEzN2M0OThmMGEzYzE2NjJmNmM0ZTVkODY1OTY0ZGZjZjJmMWYzYmU3NjAyIiwiaWF0IjoxNjQxNzUwMzc2LCJuYmYiOjE2NDE3NTAzNzYsImV4cCI6MTY0NDM0MjM3Niwic3ViIjoiMTQ5ODY1NTUiLCJkb21haW4iOm51bGwsInNjb3BlcyI6WyJwcm9qZWN0Il0sImFzc29jaWF0aW9ucyI6WyIqIl0sInNlc3Npb24iOjB9.PT_rMlnABrRc9DPwQjZ14RqPrwRxtn-dER1AjEomPVLPobm8PeVfopTe7KQeFMFKbUjzuuPPJbWh3doEkFDHifcvKHHdqjwrT6A0VYdQDFOXglrWNTE33J3k7hJn2FwXXMIFF709y9jJnUVWSeRyO5gXV5Z41ozadHi4bNNikyXoREnWZHdSfZXN7BoubXeo1JsxVSHTXbhEXV-u-gUwUPQ6k4lXkpqCf3B8xYP0p7SlYWWN3zEoajKvAVAsCnEC9kBj0X1LRhuk7jfXAkS3xR6pVY7tyawsdzsUGF-gVLvUKn8M3-1R92DRAo566IVBUmfG4YhnXXGWO30rht-XFWxVcqSFVSpiDFCQdBRKwclzeSveh__ljuVEcFDTAO-bMz4s2uzJFGfJgrVfNkKk4NnNV3iyQfpaZiDU-QxLh0aCIhj4zJZgF3NkLp-rBONM3t1fyIfK8JCYrbrG-nDy-SqyHYsWnG0SvjcsDCEBk4eoyioTX3VBIeB7AL5dHiryiB-74DV9XQxk65VOmt6HDhbfddmeqSa668QPKa3LzvIauW8BLyrz9XnYcK6RqxAZm14zls2_1DG0JmPymrx2KmX2snnX2MuLGaicRPkd2o9OwUxd_1aMQssjLRCHawtrTu6PCyfwi_0wFJtW9qB-f4dPUdVK23yarLWjjjLmzzQ'
|
||||||
|
'base_path': '.'
|
||||||
|
'base_url': 'https://api.crowdin.com'
|
||||||
|
|
||||||
|
#
|
||||||
|
# Choose file structure in Crowdin
|
||||||
|
# e.g. true or false
|
||||||
|
#
|
||||||
|
'preserve_hierarchy': true
|
||||||
|
|
||||||
|
#
|
||||||
|
# Files configuration
|
||||||
|
#
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
'source': '.vitepress/crowdin/zh-CN/**/*.json',
|
||||||
|
'translation': '.vitepress/crowdin/%locale%/**/%original_file_name%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
#
|
||||||
|
# Source files filter
|
||||||
|
# e.g. "/resources/en/*.json"
|
||||||
|
#
|
||||||
|
'source': 'zh-CN/**/*.md',
|
||||||
|
|
||||||
|
#
|
||||||
|
# Where translations will be placed
|
||||||
|
# e.g. "/resources/%two_letters_code%/%original_file_name%"
|
||||||
|
#
|
||||||
|
'translation': '%locale%/**/%original_file_name%',
|
||||||
|
#
|
||||||
|
# Files or directories for ignore
|
||||||
|
# e.g. ["/**/?.txt", "/**/[0-9].txt", "/**/*\?*.txt"]
|
||||||
|
#
|
||||||
|
#"ignore" : [],
|
||||||
|
|
||||||
|
#
|
||||||
|
# The dest allows you to specify a file name in Crowdin
|
||||||
|
# e.g. "/messages.json"
|
||||||
|
#
|
||||||
|
#"dest" : "",
|
||||||
|
|
||||||
|
#
|
||||||
|
# File type
|
||||||
|
# e.g. "json"
|
||||||
|
#
|
||||||
|
#"type" : "",
|
||||||
|
|
||||||
|
#
|
||||||
|
# The parameter "update_option" is optional. If it is not set, after the files update the translations for changed strings will be removed. Use to fix typos and for minor changes in the source strings
|
||||||
|
# e.g. "update_as_unapproved" or "update_without_changes"
|
||||||
|
#
|
||||||
|
#"update_option" : "",
|
||||||
|
|
||||||
|
#
|
||||||
|
# Start block (for XML only)
|
||||||
|
#
|
||||||
|
|
||||||
|
#
|
||||||
|
# Defines whether to translate tags attributes.
|
||||||
|
# e.g. 0 or 1 (Default is 1)
|
||||||
|
#
|
||||||
|
# "translate_attributes" : 1,
|
||||||
|
|
||||||
|
#
|
||||||
|
# Defines whether to translate texts placed inside the tags.
|
||||||
|
# e.g. 0 or 1 (Default is 1)
|
||||||
|
#
|
||||||
|
# "translate_content" : 1,
|
||||||
|
|
||||||
|
#
|
||||||
|
# This is an array of strings, where each item is the XPaths to DOM element that should be imported
|
||||||
|
# e.g. ["/content/text", "/content/text[@value]"]
|
||||||
|
#
|
||||||
|
# "translatable_elements" : [],
|
||||||
|
|
||||||
|
#
|
||||||
|
# Defines whether to split long texts into smaller text segments
|
||||||
|
# e.g. 0 or 1 (Default is 1)
|
||||||
|
#
|
||||||
|
# "content_segmentation" : 1,
|
||||||
|
|
||||||
|
#
|
||||||
|
# End block (for XML only)
|
||||||
|
#
|
||||||
|
|
||||||
|
#
|
||||||
|
# Start .properties block
|
||||||
|
#
|
||||||
|
|
||||||
|
#
|
||||||
|
# Defines whether single quote should be escaped by another single quote or backslash in exported translations
|
||||||
|
# e.g. 0 or 1 or 2 or 3 (Default is 3)
|
||||||
|
# 0 - do not escape single quote;
|
||||||
|
# 1 - escape single quote by another single quote;
|
||||||
|
# 2 - escape single quote by backslash;
|
||||||
|
# 3 - escape single quote by another single quote only in strings containing variables ( {0} ).
|
||||||
|
#
|
||||||
|
# "escape_quotes" : 3,
|
||||||
|
|
||||||
|
#
|
||||||
|
# Defines whether any special characters (=, :, ! and #) should be escaped by backslash in exported translations.
|
||||||
|
# e.g. 0 or 1 (Default is 0)
|
||||||
|
# 0 - do not escape special characters
|
||||||
|
# 1 - escape special characters by a backslash
|
||||||
|
#
|
||||||
|
# "escape_special_characters": 0
|
||||||
|
#
|
||||||
|
|
||||||
|
#
|
||||||
|
# End .properties block
|
||||||
|
#
|
||||||
|
|
||||||
|
#
|
||||||
|
# Does the first line contain header?
|
||||||
|
# e.g. true or false
|
||||||
|
#
|
||||||
|
#"first_line_contains_header" : true,
|
||||||
|
|
||||||
|
#
|
||||||
|
# for spreadsheets
|
||||||
|
# e.g. "identifier,source_phrase,context,uk,ru,fr"
|
||||||
|
#
|
||||||
|
# "scheme" : "",
|
||||||
|
},
|
||||||
|
]
|
||||||
17
packages/docs/feedback/index.md
Normal file
17
packages/docs/feedback/index.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
title: 留言反馈
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
> 该页面是在 Markdown 中引入 Vue 组件简单的展示
|
||||||
|
|
||||||
|
页面文件: `.vitepress/views/vt/vt-feedback.vue`
|
||||||
|
|
||||||
|
<ClientOnly>
|
||||||
|
<VtFeedback />
|
||||||
|
</ClientOnly>
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
正在开发中，你以后可以把想说的话写在这里
|
||||||
|
:::
|
||||||
201
packages/docs/guide/config.md
Normal file
201
packages/docs/guide/config.md
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
---
|
||||||
|
title: 主题配置
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: vuetom 主题配置项
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: vuetom theme config
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
主题的配置要写在 `.vitepress/config.ts` 文件中的 themeConfig 属性中
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
下面是一些简要的配置项一览：
|
||||||
|
|
||||||
|
其中 head、sidebar、nav 对应的分别是 页面head脚本、侧边栏菜单、头部导航栏(都可以默认为[])
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
以下是版本号满足 `vitepress >= 1.0.0` `vuetom-theme >= 2.3.0` 的配置
|
||||||
|
|
||||||
|
```js macos
|
||||||
|
// .vitepress/config.ts
|
||||||
|
// import ...
|
||||||
|
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
base: `/vt/`,
|
||||||
|
ignoreDeadLinks: true,
|
||||||
|
lastUpdated: true,
|
||||||
|
head,
|
||||||
|
locales: locales.vitepressConfig,
|
||||||
|
themeConfig: {
|
||||||
|
nav,
|
||||||
|
sidebar,
|
||||||
|
localeLinks: {
|
||||||
|
text: '',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: '中文',
|
||||||
|
link: '/lang/zhcn'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'English',
|
||||||
|
link: '/lang/enus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
socialLinks: [
|
||||||
|
{ icon: 'github', link: pkg.repository }
|
||||||
|
],
|
||||||
|
footer: {
|
||||||
|
message: 'Released under the MIT License.',
|
||||||
|
copyright: 'Copyright © 2021-present Lauset'
|
||||||
|
},
|
||||||
|
algolia: {
|
||||||
|
appId: '8Q3CNX0EF2',
|
||||||
|
apiKey: 'd44e3c8ec76aff9c758ef34f2cefe24d',
|
||||||
|
indexName: 'dev_vuetom'
|
||||||
|
},
|
||||||
|
|
||||||
|
logoImg: '/logo/vuetom-logo-m.png',
|
||||||
|
bgImg: '/imgs/homg-bg01.jpg',
|
||||||
|
bgColor: '0,0,0',
|
||||||
|
bgOpacity: 0.6,
|
||||||
|
flashEnable: true,
|
||||||
|
flashColor: ['238,17,17', '0,98,255'],
|
||||||
|
parallaxEnable: true,
|
||||||
|
pageBgEnable: true,
|
||||||
|
pageBgOpacity: 0.8,
|
||||||
|
featuresColor: ['#06cdff30', 'rgba(223,7,107,.3)']
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
markdown: {
|
||||||
|
lineNumbers: true
|
||||||
|
},
|
||||||
|
appearance: true,
|
||||||
|
vite: {
|
||||||
|
ssr: {
|
||||||
|
noExternal: ["vitepress-theme-vuetom"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
:::warning 注意
|
||||||
|
需要将主题配置成防止被 SSR 外部化的依赖项
|
||||||
|
|
||||||
|
```js
|
||||||
|
vite: {
|
||||||
|
ssr: {
|
||||||
|
noExternal: ["vitepress-theme-vuetom"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
:::danger 过期提示
|
||||||
|
vitepress-theme-vuetom 1.x 版本已弃用
|
||||||
|
|
||||||
|
请升级版本 `vitepress>=1.0` `vitepress-theme-vuetom>=2.3.0`
|
||||||
|
:::
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
以下是对配置项的简要说明
|
||||||
|
|
||||||
|
## 首页LOGO
|
||||||
|
|
||||||
|
**logoImg**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`''`
|
||||||
|
|
||||||
|
首页上方LOGO，路径中的首个 `/` 表示 `public` 目录
|
||||||
|
|
||||||
|
例如：`'/logo/homg-logo.jpg'`
|
||||||
|
|
||||||
|
## 首页背景图
|
||||||
|
|
||||||
|
**bgImg**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`undefined`
|
||||||
|
|
||||||
|
首页全屏背景图，路径中的首个 `/` 表示 `public` 目录
|
||||||
|
|
||||||
|
例如：`'/imgs/homg-bg01.jpg'` 等同于 `/public/imgs/home-bg01.jpg`
|
||||||
|
|
||||||
|
**bgColor**
|
||||||
|
|
||||||
|
- 类型：`string`
|
||||||
|
- 默认值：`'0,0,0'`
|
||||||
|
|
||||||
|
背景图边缘的覆盖颜色，值是 `rgb` 的颜色值 `rgb(0,0,0)` 则写为 `'0,0,0'`，默认为黑色
|
||||||
|
|
||||||
|
**bgOpacity**
|
||||||
|
|
||||||
|
- 类型：`0 - 1`
|
||||||
|
- 默认值：`0.6`
|
||||||
|
|
||||||
|
覆盖颜色的透明度，搭配上面的覆盖颜色使用，图片中间透明度要比图片边缘透明度要小
|
||||||
|
|
||||||
|
图片中间透明度为 `当前bgOpacity - 0.3`，也就是说默认为 `0.3`
|
||||||
|
|
||||||
|
## 文章页背景图
|
||||||
|
|
||||||
|
注意：文章页背景图片与首页一致
|
||||||
|
|
||||||
|
**pageBgEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`true`
|
||||||
|
|
||||||
|
文章页面背景图是否开启，默认开启
|
||||||
|
|
||||||
|
**pageBgOpacity**
|
||||||
|
|
||||||
|
- 类型：`0 - 1`
|
||||||
|
- 默认值：`0.8`
|
||||||
|
|
||||||
|
文章页背景图透明度，1将看不到背景图，0能清晰看到背景图
|
||||||
|
|
||||||
|
**featuresColor**
|
||||||
|
|
||||||
|
- 类型：`string | Array`
|
||||||
|
- 默认值：`rgba(255,255,255,0.8)`
|
||||||
|
|
||||||
|
首页功能面板背景色，可以是单个颜色字符串，也可以是两个字符串组成的数组
|
||||||
|
|
||||||
|
**flashEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`false`
|
||||||
|
|
||||||
|
是否开启首页背景图闪烁功能，效果类似于朋克风故障
|
||||||
|
|
||||||
|
**flashColor**
|
||||||
|
|
||||||
|
- 类型：`string | Array`
|
||||||
|
- 默认值：`['0,0,0','0,0,0']`
|
||||||
|
|
||||||
|
首页背景闪烁时附加的色彩，0: Top位置的颜色，1: Right位置的颜色，默认都是黑色
|
||||||
|
|
||||||
|
**parallaxEnable**
|
||||||
|
|
||||||
|
- 类型：`boolean`
|
||||||
|
- 默认值：`false`
|
||||||
|
|
||||||
|
是否开启首页部分元素视觉差效果
|
||||||
|
|
||||||
|
## 博客配置项
|
||||||
|
|
||||||
|
博客开发中...
|
||||||
49
packages/docs/guide/dark.md
Normal file
49
packages/docs/guide/dark.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
---
|
||||||
|
title: 夜间模式
|
||||||
|
lang: en-US
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
默认的话夜间模式切换按钮是一直有的，右上角那个太阳图标
|
||||||
|
|
||||||
|
## 原理
|
||||||
|
|
||||||
|
开关操作修改的是 HTML 根标签的样式，会加上 dark 样式
|
||||||
|
|
||||||
|
```html
|
||||||
|
<html class="dark" lang="zh-CN"></html>
|
||||||
|
```
|
||||||
|
|
||||||
|
我们可以事先定义一些 css变量来完成不同语言下或者不同模式下的样式变换
|
||||||
|
|
||||||
|
## 主题色覆盖
|
||||||
|
|
||||||
|
修改 theme/custom.scss 文件即可
|
||||||
|
|
||||||
|
简单展示部分
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
// 重写主题色
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
--vp-c-brand: var(--vp-c-blue);
|
||||||
|
--vp-c-brand-light: var(--vp-c-blue-light);
|
||||||
|
--vp-c-brand-lighter: var(--vp-c-blue-lighter);
|
||||||
|
--vp-c-brand-dark: var(--vp-c-blue-dark);
|
||||||
|
--vp-c-brand-darker: var(--vp-c-blue-darker);
|
||||||
|
|
||||||
|
// 副色
|
||||||
|
--vp-c-second: var(--vp-c-pink);
|
||||||
|
--vp-c-second-light: var(--vp-c-pink-light);
|
||||||
|
--vp-c-second-lighter: var(--vp-c-pink-lighter);
|
||||||
|
--vp-c-second-dark: var(--vp-c-pink-dark);
|
||||||
|
--vp-c-second-darker: var(--vp-c-pink-darker);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
17
packages/docs/guide/index.md
Normal file
17
packages/docs/guide/index.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# 指引
|
||||||
|
|
||||||
|
`info` : 介绍
|
||||||
|
|
||||||
|
`start` : 快速开始
|
||||||
|
|
||||||
|
`question` : 问题一览
|
||||||
|
|
||||||
|
`prodir` : 主题项目结构
|
||||||
|
|
||||||
|
`config` : 主题配置
|
||||||
|
|
||||||
|
`lang` : 国际化配置
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
这里展示的是指引菜单下所有的子菜单
|
||||||
|
:::
|
||||||
50
packages/docs/guide/info.md
Normal file
50
packages/docs/guide/info.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
title: 什么是Vitepress？
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: vuetom 介绍
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: vuetom theme
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
VitePress 是 VuePress 的升级，以 Vite 为基础构建的。是一款快速搭建文档静态网站的框架。
|
||||||
|
|
||||||
|
Vite（法语意为 "快速的"，发音 `/vit/` ，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。它主要由两部分组成：
|
||||||
|
|
||||||
|
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
|
||||||
|
|
||||||
|
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
|
||||||
|
|
||||||
|
## vuetom 呢？
|
||||||
|
|
||||||
|
是的，是一款主题，因 vitepress 而诞生。建立在 Vue3 与 Vite 之上的一款文档框架的主题。含有 `文档` 与 `博客` 两种风格模板。其推出目的是为了让大家体验并使用到更多美丽而又有趣的 vitepress 主题，进而大家可以发挥想象展示出更多优美的文档。
|
||||||
|
|
||||||
|
## 有什么特点
|
||||||
|
|
||||||
|
使用现代扁平化的设计风格，部分 UI 尽量接近于 macos 界面风格
|
||||||
|
|
||||||
|
该主题包含了以下相关技术
|
||||||
|
|
||||||
|
- [nodejs](http://nodejs.cn/)
|
||||||
|
- [vite](https://vitejs.cn/)
|
||||||
|
- [vue3](https://v3.vuejs.org/)
|
||||||
|
- [vitepress](https://vitejs.cn/vitepress/)
|
||||||
|
- [tailwindcss](https://www.tailwindcss.cn/docs)
|
||||||
|
|
||||||
|
该主题包含了一下功能模块
|
||||||
|
|
||||||
|
**内置UI组件:** 扁平化数据组织，方便编写。含有按钮，弹框，卡片等基础组件
|
||||||
|
|
||||||
|
**主题与样式:** 主要包含布局，间距，排版，颜色，边框
|
||||||
|
|
||||||
|
**API与指令:** 可搭配组件使用，实现不同组件不同指令效果
|
||||||
|
|
||||||
|
## 推荐开发工具？
|
||||||
|
|
||||||
|
这就无所谓了吧哈哈。
|
||||||
|
|
||||||
|
[vscode编辑器](https://code.visualstudio.com/) => [下载地址](https://blog.csdn.net/bielaiwuyang1999/article/details/117814237)
|
||||||
111
packages/docs/guide/lang.md
Normal file
111
packages/docs/guide/lang.md
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
---
|
||||||
|
title: 多国语言配置
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
vitepress 1.x 版本采用 0.x 版本的多国语言配置打包 NavBar 会出现错乱问题，暂时放弃研究
|
||||||
|
|
||||||
|
目前可将 `.vitepress/crowdin-docs/` 目录下 `zh-CN` 或 `en-US` 中的md直接文件复制取出并覆盖docs目录下的md文件
|
||||||
|
|
||||||
|
:::danger
|
||||||
|
适配于 vitepress 1.x.x 版本的功能正在制作，下面是 0.x.x 版本的国际化方案
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Vitepress 0.22.x 多国语言配置
|
||||||
|
|
||||||
|
你也可以配置多国语言，以首页为例，先在配置文件里配置下 locales，然后创建对应的语言文件夹与文件
|
||||||
|
|
||||||
|
## 改配置文件
|
||||||
|
|
||||||
|
需要在 config.ts 中配置 locales，注意 themeConfig 属性里也要配，两个 locales 内容是不一样的
|
||||||
|
|
||||||
|
themeConfig 中的 locales 配置是为了展示下拉菜单的展示内容
|
||||||
|
|
||||||
|
根Config 中的 locales 配置是为了展示头部标题内容，description属性可有可无
|
||||||
|
|
||||||
|
```js
|
||||||
|
// .vitepress/config.ts
|
||||||
|
export default defineConfigWithTheme<VuetomThemeConfig>({
|
||||||
|
// ...
|
||||||
|
themeConfig: {
|
||||||
|
// ...
|
||||||
|
locales: {
|
||||||
|
'/zh-CN/': {
|
||||||
|
label: '简体中文',
|
||||||
|
selectText: '多国语言'
|
||||||
|
},
|
||||||
|
'/en-US/': {
|
||||||
|
label: 'English',
|
||||||
|
selectText: 'Languages'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
locales: {
|
||||||
|
'/zh-CN/': {
|
||||||
|
lang: 'zh-CN',
|
||||||
|
title: 'Vuetom 主题',
|
||||||
|
description: '为 Vitepress 提供的一款主题'
|
||||||
|
},
|
||||||
|
'/en-US/': {
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'Vuetom Theme',
|
||||||
|
description: 'Theme For Vitepress'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
**locales** 中的属性介绍
|
||||||
|
|
||||||
|
<b>lang</b>: 会直接设置给 `<html>` 标签
|
||||||
|
|
||||||
|
<b>title</b>: 不同语言时网站的标题，会替换之前定义的 title
|
||||||
|
|
||||||
|
<b>description</b>: 不同语言时网站的描述
|
||||||
|
|
||||||
|
<b>label</b>: 语言选择时展示出来的文本内容（例如：中文或English）
|
||||||
|
|
||||||
|
<b>selectText</b>: 语言选择时下拉菜单的文本（例如：多国语言或者Languages）
|
||||||
|
|
||||||
|
## 改首页
|
||||||
|
|
||||||
|
在 .vitepress 同级目录新建 `zh-CN` 和 `en-US` 文件夹，然后在这个文件夹中分别创建一个 `index.md` 文件
|
||||||
|
|
||||||
|
**zh-CN/index.md** 中写入 **中文首页** 要展示的内容
|
||||||
|
|
||||||
|
**en-US/index.md** 中写入 **英文首页** 要展示的内容
|
||||||
|
|
||||||
|
原来与 .vitepress 同级的 `index.md` 文件中可以改为转发至 `zh-CN/index` 或者 `en-US/index`
|
||||||
|
|
||||||
|
例如下方的代码，会直接将 `/` 转发到 `/zh-CN/` 这样就会直接前往中文首页了
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: 'Vuetom Theme'
|
||||||
|
lang: en-US
|
||||||
|
page: true
|
||||||
|
---
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const preferredLang = 'zh-CN'
|
||||||
|
window.location.pathname = `/${preferredLang}/`
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
其实原理就是路径前加了一个语言标识，那么就在页面文件外加个语言文件夹就好了<br>
|
||||||
|
需要处理的就是书写导航栏和菜单栏时记得要在 link 属性前加上语言标识
|
||||||
|
:::
|
||||||
|
|
||||||
|
下面试试访问一下：
|
||||||
|
|
||||||
|
访问 localhost:3000/zh-CN/ 会前往中文首页
|
||||||
|
|
||||||
|
访问 localhost:3000/en-US/ 会前往英文首页
|
||||||
|
|
||||||
|
访问 localhost:3000 会前往 localhost:3000/zh-CN/
|
||||||
57
packages/docs/guide/prodir.md
Normal file
57
packages/docs/guide/prodir.md
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
title: 框架目录
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: Vuetom 主题目录结构
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: project dir.
|
||||||
|
---
|
||||||
|
|
||||||
|
# 主题目录
|
||||||
|
|
||||||
|
在使用一个框架，其实也要简单了解下该框架的项目文件结构，请向下看吧。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
vuetom
|
||||||
|
├─ blog 博客主题Vue组件 文件夹
|
||||||
|
├─ doc 新版文档，适配vp1.x 文件夹
|
||||||
|
├─ docs 旧版文档主题组件 文件夹
|
||||||
|
│ ├─ components 主题Vue组件 文件夹
|
||||||
|
│ ├─ composables 组件脚本 文件夹
|
||||||
|
│ ├─ layouts 布局组件 文件夹
|
||||||
|
│ └─ index.ts 主题入口 文件
|
||||||
|
├─ icons 共用图标Vue组件 文件夹
|
||||||
|
├─ styles 全局SCSS样式 文件夹
|
||||||
|
├─ support 供支持脚本 文件夹
|
||||||
|
├─ types 规范描述 文件夹
|
||||||
|
├─ constant.ts 常量定义 文件
|
||||||
|
└─ index.ts 主题入口文件 文件
|
||||||
|
```
|
||||||
|
|
||||||
|
接下来介绍本文档**docs**文件夹
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docs
|
||||||
|
├─ .vitepress
|
||||||
|
│ └─ config.ts 主题主要配置文件
|
||||||
|
│
|
||||||
|
├─ public 静态资源文件
|
||||||
|
│
|
||||||
|
├─ zh-CN 中文页面
|
||||||
|
│ ├─ feedback 留言反馈
|
||||||
|
│ ├─ guide 指引
|
||||||
|
│ ├─ mdshow Markdown示例
|
||||||
|
│ ├─ menu UI组件
|
||||||
|
│ ├─ styl 主题与样式
|
||||||
|
│ └─ index.md 中文首页
|
||||||
|
│
|
||||||
|
├─ crowdin.yml 多国语言配置
|
||||||
|
├─ index.md 项目首页
|
||||||
|
├─ CHANGELOG.md 更新日志
|
||||||
|
├─ package.json 包配置
|
||||||
|
├─ README.md 项目说明
|
||||||
|
├─ tsconfig.json ts配置
|
||||||
|
└─ vite.config.ts vite配置
|
||||||
|
```
|
||||||
53
packages/docs/guide/question.md
Normal file
53
packages/docs/guide/question.md
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
---
|
||||||
|
title: 常见问题
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 常见问题汇总
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: question
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
是否经常卡在一些莫名其妙的问题上？让我们来汇总一下问题并给出相应的解决方案吧！
|
||||||
|
|
||||||
|
## 问题列表
|
||||||
|
|
||||||
|
- [版本多久更新一次？](#q01)
|
||||||
|
- [我的样式没有起作用。](#q02)
|
||||||
|
- [我不想要背景图咋办啊？](#q03)
|
||||||
|
|
||||||
|
## 问题解答
|
||||||
|
|
||||||
|
以下是针对于近期问题所作的答复
|
||||||
|
|
||||||
|
- <h3 id="q01">版本多久更新一次？</h3>
|
||||||
|
|
||||||
|
目前进度较慢，但是每周都会更新主要内容的
|
||||||
|
|
||||||
|
- <h3 id="q02">我的样式没有起作用。</h3>
|
||||||
|
|
||||||
|
查看 `.vitepress/config.js` 文件进中 `theme` 项是否配置正确
|
||||||
|
|
||||||
|
- <h3 id="q03">我不想要背景图咋办啊？</h3>
|
||||||
|
|
||||||
|
你可以用一张纯白色的图片作为背景图啊嘿嘿嘿
|
||||||
|
|
||||||
|
## 开发进度
|
||||||
|
|
||||||
|
| 功能组件 | 开发进度 | 预估 |
|
||||||
|
| - | - | - |
|
||||||
|
| 文档风格主题 vitepress 0.x.x | 开发中（80%） | 2022.5 |
|
||||||
|
| 文档风格主题 vitepress 1.x.x | 开发中（80%） | 2022.8 |
|
||||||
|
| 博客风格主题 vitepress 1.x.x | 开发中（50%） | 2022.11 |
|
||||||
|
|
||||||
|
## 需要帮助？
|
||||||
|
|
||||||
|
可点击 [留言反馈](/feedback/) 前往问题反馈界面对问题进行简单的描述
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
目前 vitepress 版本已进入 1.0.0 , vuetom-theme 版本已进入 2.0.0
|
||||||
|
|
||||||
|
:::
|
||||||
178
packages/docs/guide/start.md
Normal file
178
packages/docs/guide/start.md
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
---
|
||||||
|
title: 快速使用
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 教你如何掌握框架的工作流程，快速上手。
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: 开始使用
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
使用主题前请确保你已经搭建了一个 Vitepress 文档项目，因为主题是建立在该框架的基础上使用的。
|
||||||
|
|
||||||
|
请确保你使用的 vue >= 3.2 且 vitepress >= 1.x 哦。
|
||||||
|
|
||||||
|
## 最快捷的方式
|
||||||
|
|
||||||
|
直接拉取本项目至本地，packages/docs 和 packages/blog 目录下分别是文档和博客示例，根据 `README.md` 进行依赖安装、构件、打包、预览即可
|
||||||
|
|
||||||
|
## 其他方式
|
||||||
|
|
||||||
|
### **1.** 使用脚手架初始化
|
||||||
|
|
||||||
|
可用脚手架 `vuetom-cli` 来进行主题的初始化，这会在你本地初始化一个模版
|
||||||
|
|
||||||
|
网速慢可以再次尝试或者直接前往模版仓库拉取 [模版仓库](https://github.com/lauset/vuetom-cli)
|
||||||
|
|
||||||
|
- 分支1: **temp-docs** (文档模版)
|
||||||
|
|
||||||
|
- 分支2: **temp-blog** (博客模版)
|
||||||
|
|
||||||
|
1. 首先安装脚手架，NPM安装前请确保开启管理员身份运行保证有权限
|
||||||
|
|
||||||
|
```sh light
|
||||||
|
npm i -g vuetom-cli
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 查看是否安装成功，黑窗口运行一下命令，返回版本号 x.x.x 则表示安装成功
|
||||||
|
|
||||||
|
```bash light
|
||||||
|
vuetom-cli -v
|
||||||
|
```
|
||||||
|
|
||||||
|
1. 初始化模版，可以选择是否新建目录、仓息、作者、模版仓库等。
|
||||||
|
|
||||||
|
初始化选择从 github 源拉取模版可以保证模版是最新的代码
|
||||||
|
|
||||||
|
```bash light
|
||||||
|
vuetom-cli init
|
||||||
|
```
|
||||||
|
|
||||||
|
1. 然后便会下载模版，下载完成后，执行以下命令安装依赖并运行文档网站
|
||||||
|
|
||||||
|
```bash macos
|
||||||
|
# 安装依赖
|
||||||
|
pnpm i
|
||||||
|
|
||||||
|
# 本地运行
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
模版是从 github 上拉取的，可能有时候会有网速的困惑，也可手动前往拉取下载本地启用
|
||||||
|
|
||||||
|
文档模版：<https://github.com/lauset/vuetom-cli/tree/temp-docs>
|
||||||
|
|
||||||
|
博客模版：<https://github.com/lauset/vuetom-cli/tree/temp-blog>
|
||||||
|
:::
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### **2.** 通过NPM下载安装主题（最新版本为 2.3.0）
|
||||||
|
|
||||||
|
:::danger ⚠️ 写在前面
|
||||||
|
|
||||||
|
正常引入主题后，还需在 .vitepress/config.ts 文件中配置以下内容
|
||||||
|
|
||||||
|
```js macos
|
||||||
|
vite: {
|
||||||
|
ssr: {
|
||||||
|
noExternal: ["vitepress-theme-vuetom"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
使用这个方式首先你要搭建一个 vitepress 项目，主题是会覆盖文档默认样式而已，所以项目还是得搭起来的，可以前往下面 vitepress 官网链接从头开始搭建
|
||||||
|
|
||||||
|
[vitepress搭建文档](https://vitepress.vuejs.org/guide/getting-started.html)
|
||||||
|
|
||||||
|
搭建完后最简单的样子就是项目目录里有个 index.md 文件，那么开始下一步
|
||||||
|
|
||||||
|
1. 安装主题依赖
|
||||||
|
|
||||||
|
使用 NPM 安装最新版本的 vitepress-theme-vuetom 主题包，在你的 vitepress 项目下安装，打开 `终端（DOS）` 输入
|
||||||
|
|
||||||
|
```sh light
|
||||||
|
npm i -D vitepress-theme-vuetom
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 开始引入主题
|
||||||
|
|
||||||
|
先在 .vitepress （这个文件夹和首页 index.md 是同级目录，没有的自己创建）中新建一个名为 theme 的文件夹，在该文件下新建一个 index.ts 文件，当然用 js 还是 ts 文件就看你自己项目的决定了。
|
||||||
|
|
||||||
|
大致内容如下:
|
||||||
|
|
||||||
|
`VuetomTheme` 是主要的主题布局
|
||||||
|
|
||||||
|
`VuetomUI` 是内置的UI组件
|
||||||
|
|
||||||
|
```javascript light
|
||||||
|
// .vitepress/theme/index.ts
|
||||||
|
|
||||||
|
// 文档风格引入 2.3.0 版本之后改为 /docs 中引入了
|
||||||
|
import VuetomTheme from 'vitepress-theme-vuetom/docs'
|
||||||
|
|
||||||
|
// 博客风格引入
|
||||||
|
// import BlogTheme from 'vitepress-theme-vuetom/blog'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
...VuetomTheme,
|
||||||
|
enhanceApp({ app, router, siteData }) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
引入了主题，然后你的 index.md 里写上一些内容应该就可以看出效果了
|
||||||
|
|
||||||
|
```html light
|
||||||
|
---
|
||||||
|
home: true
|
||||||
|
heroImage: /logo/vuetom-logo-m.png
|
||||||
|
heroAlt: LOGO
|
||||||
|
heroText: Vuetom
|
||||||
|
tagline: vitepress flat theme
|
||||||
|
|
||||||
|
actionText: 快 速 开 始
|
||||||
|
actionLink: /guide/info
|
||||||
|
|
||||||
|
altActionText: 配 置
|
||||||
|
altActionLink: /guide/config
|
||||||
|
|
||||||
|
features:
|
||||||
|
- title: 📦 优化的构建
|
||||||
|
details: 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
|
||||||
|
- title: 🔩 通用的插件
|
||||||
|
details: 在开发和构建之间共享 Rollup-superset 插件接口。
|
||||||
|
- title: 🔑 完全类型化的API
|
||||||
|
details: 灵活的 API 和完整 TypeScript 类型。
|
||||||
|
|
||||||
|
footer: MIT Licensed
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="frontpage sponsors">
|
||||||
|
<h2>{{ data.text }}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive } from 'vue'
|
||||||
|
const data = reactive({
|
||||||
|
text: '自定义内容'
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
运行项目后，在 [localhost:3000] 中进入首页
|
||||||
|
|
||||||
|
:::tip
|
||||||
|
至少到这里主题已经安装完成了，下一步就是主题的配置了，主题什么样还是要看你配的什么样子哦。
|
||||||
|
:::
|
||||||
154
packages/docs/index.md
Normal file
154
packages/docs/index.md
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
title: Charles Click
|
||||||
|
titleTemplate: Portfolio
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: Charles
|
||||||
|
text:
|
||||||
|
tagline: Software Developer
|
||||||
|
actions:
|
||||||
|
- theme: brand big
|
||||||
|
text: Projects
|
||||||
|
link: /pages/projects
|
||||||
|
- theme: alt big
|
||||||
|
text: Watching
|
||||||
|
link: /pages/watching
|
||||||
|
|
||||||
|
features:
|
||||||
|
- title: 📦 Software Developer
|
||||||
|
details: I have developed several libraries and tools used across many projects.
|
||||||
|
- title: 🔩 Focused on Interconnectivity
|
||||||
|
details: I have a passion for applications that explore ways to spread information across the internet.
|
||||||
|
- title: 🔑 Keybase Verification
|
||||||
|
details: You can find my Keybase verification [here](https://keybase.io/cclick).
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="frontpage sponsors">
|
||||||
|
<h2>感 谢</h2>
|
||||||
|
<div class="platinum-sponsors">
|
||||||
|
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
|
||||||
|
<img :src="src" :alt="name" :id="`sponsor-${id}`">
|
||||||
|
<p>{{ name }}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="gold-sponsors">
|
||||||
|
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
|
||||||
|
<img :src="src" :alt="name" :id="`sponsor-${id}`">
|
||||||
|
<p>{{ name }}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import pk from 'vitepress-theme-vuetom/package.json'
|
||||||
|
|
||||||
|
const sponsors = [
|
||||||
|
{
|
||||||
|
"id": "vue",
|
||||||
|
"name": "Vue",
|
||||||
|
"href": "https://vuejs.org/",
|
||||||
|
"src": "https://vuejs.org/logo.svg",
|
||||||
|
"tier": "platinum"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "vite",
|
||||||
|
"name": "Vite",
|
||||||
|
"href": "https://v2.vitejs.dev/",
|
||||||
|
"src": "https://v2.vitejs.dev/logo.svg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "vitepress",
|
||||||
|
"name": "Vitepress",
|
||||||
|
"href": "https://vitepress.dev/",
|
||||||
|
"src": "https://vitepress.dev/vitepress-logo-mini.svg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
function fetchReleaseTag() {
|
||||||
|
onMounted(() => {
|
||||||
|
const dom = document.getElementsByClassName('name')
|
||||||
|
const mainTitle = dom[0]
|
||||||
|
const docsReleaseTag = document.createElement('span')
|
||||||
|
docsReleaseTag.classList.add('release-tag')
|
||||||
|
const releaseTagName = `v${pk.version}`
|
||||||
|
docsReleaseTag.innerText = releaseTagName
|
||||||
|
if (releaseTagName !== undefined) {
|
||||||
|
mainTitle.appendChild(docsReleaseTag)
|
||||||
|
}
|
||||||
|
// fetch('https://api.github.com/repos/vitejs/docs-cn/releases/latest')
|
||||||
|
// .then((res) => res.json())
|
||||||
|
// .then((json) => {
|
||||||
|
// const mainTitle = document.getElementById('main-title')
|
||||||
|
// mainTitle.style.position = 'relative'
|
||||||
|
|
||||||
|
// const docsReleaseTag = document.createElement('span')
|
||||||
|
// docsReleaseTag.classList.add('release-tag')
|
||||||
|
// const releaseTagName = json.tag_name
|
||||||
|
// docsReleaseTag.innerText = releaseTagName
|
||||||
|
|
||||||
|
// if (releaseTagName !== undefined) {
|
||||||
|
// mainTitle.appendChild(docsReleaseTag)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchReleaseTag()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.sponsors {
|
||||||
|
padding: 0 1.5rem 2rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors a {
|
||||||
|
color: #999;
|
||||||
|
margin: 1em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors img {
|
||||||
|
max-width: 160px;
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage img {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.frontpage h2 {
|
||||||
|
color: #999;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsors.sidebar a img {
|
||||||
|
max-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platinum-sponsors {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platinum-sponsors a img {
|
||||||
|
max-width: 240px;
|
||||||
|
max-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gold-sponsors {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
4
packages/docs/lang/enus.md
Normal file
4
packages/docs/lang/enus.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
:::tip
|
||||||
|
Documentation coming soon...
|
||||||
|
:::
|
||||||
4
packages/docs/lang/zhcn.md
Normal file
4
packages/docs/lang/zhcn.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
:::tip
|
||||||
|
当前文档已经是中文文档了 [首页](/)
|
||||||
|
:::
|
||||||
102
packages/docs/mdshow/codeblock.md
Normal file
102
packages/docs/mdshow/codeblock.md
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
---
|
||||||
|
title: 代码块展示
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 代码块展示
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: code
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
## MD语法展示
|
||||||
|
|
||||||
|
使用三个 ` 符号将代码包裹其中便是展示代码块
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**亮/暗主题切换**
|
||||||
|
|
||||||
|
根据文档主题模式切换
|
||||||
|
|
||||||
|
**代码块主题 macos**
|
||||||
|
|
||||||
|
可以在 language_key(语言标识) 后加入 `macos`
|
||||||
|
|
||||||
|
输入内容：
|
||||||
|
|
||||||
|
<div>
|
||||||
|
```java macos
|
||||||
|
</div>
|
||||||
|
String language = "Java";
|
||||||
|
<div>
|
||||||
|
```
|
||||||
|
</div>
|
||||||
|
|
||||||
|
展示效果：
|
||||||
|
|
||||||
|
```java macos
|
||||||
|
String language = "Java";
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**默认主题**
|
||||||
|
|
||||||
|
默认主题是以暗色系为主的
|
||||||
|
|
||||||
|
输入内容：
|
||||||
|
|
||||||
|
<div>
|
||||||
|
```js
|
||||||
|
</div>
|
||||||
|
String language = "JS";
|
||||||
|
<div>
|
||||||
|
```
|
||||||
|
</div>
|
||||||
|
|
||||||
|
输出内容：
|
||||||
|
|
||||||
|
```java
|
||||||
|
String language = "JS";
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**示例展示**
|
||||||
|
|
||||||
|
- javascript ( js macos )
|
||||||
|
|
||||||
|
```js macos
|
||||||
|
function fun(){
|
||||||
|
echo "Hello, World!";
|
||||||
|
}
|
||||||
|
fun();
|
||||||
|
```
|
||||||
|
|
||||||
|
- Java ( java )
|
||||||
|
|
||||||
|
```java
|
||||||
|
System.out.print(1);
|
||||||
|
```
|
||||||
|
|
||||||
|
- Python ( py macos )
|
||||||
|
|
||||||
|
```py macos
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
print("Hello, World!");
|
||||||
|
```
|
||||||
|
|
||||||
|
- SQL ( sql )
|
||||||
|
|
||||||
|
```sql
|
||||||
|
select user_name from user_info
|
||||||
|
```
|
||||||
|
|
||||||
|
- Shell ( bash, shell )
|
||||||
|
|
||||||
|
```bash
|
||||||
|
echo '1'
|
||||||
|
```
|
||||||
58
packages/docs/mdshow/custom.md
Normal file
58
packages/docs/mdshow/custom.md
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
---
|
||||||
|
title: 自定义语法
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 自定义 Markdown 语法
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: markdown custom
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
## 信息框
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: tip 使用TIPS代替
|
||||||
|
提示信息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: info
|
||||||
|
信息消息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
警告消息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
危险消息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: details Details
|
||||||
|
详细信息
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
::: tip 使用TIPS代替
|
||||||
|
提示内容
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: info
|
||||||
|
INFO消息
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
WARNING消息 <a>a链接</a>
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
DANGER消息 [md链接](./example.md)
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: details Details
|
||||||
|
详细信息
|
||||||
|
:::
|
||||||
72
packages/docs/mdshow/example.md
Normal file
72
packages/docs/mdshow/example.md
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
title: 效果示例
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 来看看 MD 会变成什么样子
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: markdown example
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
# Markdown 效果示例
|
||||||
|
|
||||||
|
-------------------- 手动分割线 --------------------
|
||||||
|
|
||||||
|
|
||||||
|
# This is an h1 tag
|
||||||
|
## This is an h2 tag
|
||||||
|
### This is an h3 tag
|
||||||
|
#### This is an h4 tag
|
||||||
|
##### This is an h5 tag
|
||||||
|
###### This is an h6 tag
|
||||||
|
|
||||||
|
|
||||||
|
*这是斜体*
|
||||||
|
_这是斜体_
|
||||||
|
**这是黑体**
|
||||||
|
__这是黑体__
|
||||||
|
*斜体里加**黑体***
|
||||||
|
**黑体里加*斜体***
|
||||||
|
|
||||||
|
|
||||||
|
* Item 1
|
||||||
|
* Item 2
|
||||||
|
* Item 2a
|
||||||
|
* Item 2b
|
||||||
|
|
||||||
|
|
||||||
|
1. Item 1
|
||||||
|
1. Item 2
|
||||||
|
1. Item 3
|
||||||
|
1. Item 3a
|
||||||
|
1. Item 3b
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
http://github.com - automatic!
|
||||||
|
[GitHub](http://github.com)
|
||||||
|
|
||||||
|
|
||||||
|
As Kanye West said:
|
||||||
|
> We're living the future so
|
||||||
|
> the present is our past.
|
||||||
|
|
||||||
|
|
||||||
|
I think you should use an
|
||||||
|
`<addr>` element here instead.
|
||||||
|
|
||||||
|
|
||||||
|
First Header | Second Header
|
||||||
|
------------ | -------------
|
||||||
|
Content from cell 1 | Content from cell 2
|
||||||
|
Content in the first column | Content in the second column
|
||||||
|
|
||||||
|
|
||||||
|
~~this~~
|
||||||
|
|
||||||
|
|
||||||
|
😝🌟🐫✨🚶
|
||||||
31
packages/docs/mdshow/index.md
Normal file
31
packages/docs/mdshow/index.md
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
title: UI组件
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: 各种各样的扁平化UI组件
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: components
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
|
||||||
|
### `Vuetom UI`
|
||||||
|
|
||||||
|
[ui 文档](http://ui.tomhub.cn)
|
||||||
|
|
||||||
|
[ui github](https://github.com/lauset/vuetom-ui)
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
UI 文档正在不断完善中，请客观耐心等待一下吧T-T
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
### Markdown 语法示例
|
||||||
|
|
||||||
|
这里将会展示在该文档中markdown所呈现的效果
|
||||||
|
|
||||||
|
`Example` : Markdown 语法示例
|
||||||
|
|
||||||
|
`Custom md` : 自定义语法
|
||||||
41
packages/docs/package.json
Normal file
41
packages/docs/package.json
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"name": "@lauset/vuetom-doc",
|
||||||
|
"version": "2.3.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "pnpm gen:lang && vitepress dev .",
|
||||||
|
"build": "pnpm gen:lang && vitepress build .",
|
||||||
|
"preview": "vitepress preview .",
|
||||||
|
"serve": "vitepress serve .",
|
||||||
|
"clean": "rimraf .vitepress/dist",
|
||||||
|
"gen:lang": "rimraf .vitepress/i18n && tsx .vitepress/build/crowdin-generate.ts",
|
||||||
|
"crowdin:list": "crowdin list project",
|
||||||
|
"crowdin:upload": "crowdin upload sources",
|
||||||
|
"crowdin:us": "crowdin download -l en-US",
|
||||||
|
"crowdin:tw": "crowdin download -l zh-TW",
|
||||||
|
"crowdin:dryrun": "crowdin download --dryrun"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vueuse/core": "^9.6.0",
|
||||||
|
"axios": "1.2.1",
|
||||||
|
"clipboard-copy": "4.0.1",
|
||||||
|
"element-plus": "^2.2.26",
|
||||||
|
"marked": "^4.2.4",
|
||||||
|
"normalize.css": "8.0.1",
|
||||||
|
"nprogress": "0.2.0",
|
||||||
|
"prismjs": "^1.29.0",
|
||||||
|
"vue": "^3.2.45"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@crowdin/cli": "^3.9.1",
|
||||||
|
"@types/markdown-it": "12.2.3",
|
||||||
|
"chalk": "4.1.2",
|
||||||
|
"escape-html": "1.0.3",
|
||||||
|
"lodash": "^4.17.20",
|
||||||
|
"markdown-it": "13.0.1",
|
||||||
|
"markdown-it-container": "3.0.0",
|
||||||
|
"rimraf": "^3.0.2",
|
||||||
|
"sass": "^1.56.2",
|
||||||
|
"vitepress": "^1.0.0-alpha.30",
|
||||||
|
"vitepress-theme-vuetom": "^2.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
packages/docs/pages/projects.md
Normal file
1
packages/docs/pages/projects.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
HI FROM PROJECTS
|
||||||
1
packages/docs/pages/watching.md
Normal file
1
packages/docs/pages/watching.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
HI FROM WATCHING
|
||||||
85
packages/docs/tsconfig.json
Normal file
85
packages/docs/tsconfig.json
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
// "incremental": true,
|
||||||
|
// "composite": true,
|
||||||
|
// "tsBuildInfoFile": "./",
|
||||||
|
// "disableSourceOfProjectReferenceRedirect": true,
|
||||||
|
// "disableSolutionSearching": true,
|
||||||
|
// "disableReferencedProjectLoad": true,
|
||||||
|
"target": "ESNext",
|
||||||
|
// "lib": [],
|
||||||
|
// "jsx": "preserve",
|
||||||
|
// "experimentalDecorators": true,
|
||||||
|
// "emitDecoratorMetadata": true,
|
||||||
|
// "jsxFactory": "",
|
||||||
|
// "jsxFragmentFactory": "",
|
||||||
|
// "jsxImportSource": "",
|
||||||
|
// "reactNamespace": "",
|
||||||
|
// "noLib": true,
|
||||||
|
// "useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
// "rootDir": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
// "baseUrl": "./",
|
||||||
|
// "paths": {},
|
||||||
|
// "rootDirs": [],
|
||||||
|
// "typeRoots": [],
|
||||||
|
// "types": [],
|
||||||
|
// "allowUmdGlobalAccess": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
// "noResolve": true,
|
||||||
|
// "allowJs": true,
|
||||||
|
// "checkJs": true,
|
||||||
|
// "maxNodeModuleJsDepth": 1,
|
||||||
|
// "declaration": true,
|
||||||
|
// "declarationMap": true,
|
||||||
|
// "emitDeclarationOnly": true,
|
||||||
|
// "sourceMap": true,
|
||||||
|
// "outFile": "./",
|
||||||
|
// "outDir": "./",
|
||||||
|
// "removeComments": true,
|
||||||
|
// "noEmit": true,
|
||||||
|
// "importHelpers": true,
|
||||||
|
// "importsNotUsedAsValues": "remove",
|
||||||
|
// "downlevelIteration": true,
|
||||||
|
// "sourceRoot": "",
|
||||||
|
// "mapRoot": "",
|
||||||
|
// "inlineSourceMap": true,
|
||||||
|
// "inlineSources": true,
|
||||||
|
// "emitBOM": true,
|
||||||
|
// "newLine": "crlf",
|
||||||
|
// "stripInternal": true,
|
||||||
|
// "noEmitHelpers": true,
|
||||||
|
// "noEmitOnError": true,
|
||||||
|
// "preserveConstEnums": true,
|
||||||
|
// "declarationDir": "./",
|
||||||
|
// "isolatedModules": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
// "preserveSymlinks": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"strict": true,
|
||||||
|
"noImplicitAny": false,
|
||||||
|
// "strictNullChecks": true,
|
||||||
|
// "strictFunctionTypes": true,
|
||||||
|
// "strictBindCallApply": true,
|
||||||
|
// "strictPropertyInitialization": true,
|
||||||
|
// "noImplicitThis": true,
|
||||||
|
// "useUnknownInCatchVariables": true,
|
||||||
|
// "alwaysStrict": true,
|
||||||
|
// "noUnusedLocals": true,
|
||||||
|
// "noUnusedParameters": true,
|
||||||
|
// "exactOptionalPropertyTypes": true,
|
||||||
|
// "noImplicitReturns": true,
|
||||||
|
// "noFallthroughCasesInSwitch": true,
|
||||||
|
// "noUncheckedIndexedAccess": true,
|
||||||
|
// "noImplicitOverride": true,
|
||||||
|
// "noPropertyAccessFromIndexSignature": true,
|
||||||
|
// "allowUnusedLabels": true,
|
||||||
|
// "allowUnreachableCode": true,
|
||||||
|
// "skipDefaultLibCheck": true,
|
||||||
|
"skipLibCheck": true
|
||||||
|
},
|
||||||
|
"include": ["**/*", ".vitepress/**/*"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
8
packages/docs/vercel.json
Normal file
8
packages/docs/vercel.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"rewrites": [
|
||||||
|
{
|
||||||
|
"source": "/vt/(.*)",
|
||||||
|
"destination": "/api/proxy"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
35
packages/docs/vite.config.ts
Normal file
35
packages/docs/vite.config.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import path from 'path'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import type { Alias } from 'vite'
|
||||||
|
import { projRoot } from './.vitepress/utils/paths'
|
||||||
|
|
||||||
|
const alias: Alias[] = []
|
||||||
|
|
||||||
|
if (process.env.DOC_ENV !== 'production') {
|
||||||
|
alias.push(
|
||||||
|
{
|
||||||
|
find: /^vitepress-theme-vuetom\/docs$/,
|
||||||
|
replacement: path.resolve(projRoot, 'packages/vuetom/doc'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
find: /^vitepress-theme-vuetom\/blog$/,
|
||||||
|
replacement: path.resolve(projRoot, 'packages/vuetom/blog'),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
host: true,
|
||||||
|
fs: {
|
||||||
|
strict: true,
|
||||||
|
allow: [projRoot]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias,
|
||||||
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
include: ['@vueuse/core']
|
||||||
|
}
|
||||||
|
})
|
||||||
158
packages/vuetom/README.md
Normal file
158
packages/vuetom/README.md
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
|
||||||
|
<p align="center"><a href="https://gitee.com/lauset/vitepress-theme-vuetom" target="_blank" rel="noopener noreferrer"><img width="180" src="https://cdn.jsdelivr.net/gh/lauset/vitepress-theme-vuetom/packages/docs/public/logo/vuetom-logo.png" alt="logo"></a></p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE"><img src="https://img.shields.io/github/license/xugaoyi/vuepress-theme-vdoing
|
||||||
|
" alt="License"></a>
|
||||||
|
<a href="https://www.npmjs.com/package/vitepress-theme-vuetom"><img alt="npm" src="https://img.shields.io/npm/v/vitepress-theme-vuetom"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 align="center">vitepress-theme-vuetom</h2>
|
||||||
|
|
||||||
|
## 简要说明
|
||||||
|
|
||||||
|
1. 为 vitepress 1.x 提供的主题
|
||||||
|
2. 提供文档与博客两种风格的主题
|
||||||
|
|
||||||
|
[**更新日志**](CHANGELOG.md)
|
||||||
|
|
||||||
|
## 主题预览
|
||||||
|
|
||||||
|
* [**文档**风格 (*github.io*)](https://lauset.github.io/vitepress-theme-vuetom/)
|
||||||
|
|
||||||
|
* [**文档**风格 (*vercel.app*)](https://vitepress-theme-vuetom.vercel.app/vt/)
|
||||||
|
|
||||||
|
* [**博客**风格 (*开发中*)](https://vitepress-theme-vuetom-blog.vercel.app/myblog/)
|
||||||
|
|
||||||
|
## 快速上手
|
||||||
|
|
||||||
|
* 拉取项目
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/lauset/vitepress-theme-vuetom.git
|
||||||
|
|
||||||
|
cd vitepress-theme-vuetom
|
||||||
|
```
|
||||||
|
|
||||||
|
* 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
* 启动文档示例
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 根目录运行
|
||||||
|
pnpm dev:docs
|
||||||
|
|
||||||
|
# 文档目录运行
|
||||||
|
cd packages/docs
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
* 启动博客示例
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 根目录运行
|
||||||
|
pnpm dev:blog
|
||||||
|
|
||||||
|
# 博客目录运行
|
||||||
|
cd packages/blog
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
* 根目录构建操作
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 清理已打包的文件
|
||||||
|
pnpm clean:all
|
||||||
|
|
||||||
|
# 构建主题
|
||||||
|
pnpm build:theme
|
||||||
|
|
||||||
|
# 构建文档
|
||||||
|
pnpm build:docs
|
||||||
|
|
||||||
|
# 构建博客
|
||||||
|
pnpm build:blog
|
||||||
|
```
|
||||||
|
|
||||||
|
* 根目录预览操作
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 预览文档
|
||||||
|
pnpm preview:docs
|
||||||
|
|
||||||
|
# 预览博客
|
||||||
|
pnpm preview:blog
|
||||||
|
```
|
||||||
|
|
||||||
|
* 发布主题包
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd packages/vuetom
|
||||||
|
pnpm pub
|
||||||
|
```
|
||||||
|
|
||||||
|
## 文档目录多语言
|
||||||
|
|
||||||
|
查看项目文件列表
|
||||||
|
|
||||||
|
```shell
|
||||||
|
crowdin:list
|
||||||
|
```
|
||||||
|
|
||||||
|
上传待翻译的源文件
|
||||||
|
|
||||||
|
```shell
|
||||||
|
crowdin:upload
|
||||||
|
```
|
||||||
|
|
||||||
|
查看预下载文件列表
|
||||||
|
|
||||||
|
```shell
|
||||||
|
crowdin:dryrun
|
||||||
|
```
|
||||||
|
|
||||||
|
下载en-US翻译文件
|
||||||
|
|
||||||
|
```shell
|
||||||
|
crowdin:us
|
||||||
|
```
|
||||||
|
|
||||||
|
下载zh-TW翻译文件
|
||||||
|
|
||||||
|
```shell
|
||||||
|
crowdin:tw
|
||||||
|
```
|
||||||
|
|
||||||
|
## 简单展示
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 仓库地址
|
||||||
|
|
||||||
|
[github](https://github.com/lauset/vitepress-theme-vuetom)
|
||||||
|
|
||||||
|
[gitee](https://gitee.com/lauset/vitepress-theme-vuetom)
|
||||||
|
|
||||||
|
## 感谢
|
||||||
|
|
||||||
|
[Vue](https://vuejs.org/)
|
||||||
|
|
||||||
|
[Vite](https://cn.vitejs.dev/)
|
||||||
|
|
||||||
|
[Vitepress](https://vitepress.vuejs.org/)
|
||||||
|
|
||||||
|
[Vercel](https://vercel.com/docs)
|
||||||
|
|
||||||
|
[ElementPlus](https://element-plus.gitee.io/zh-CN/)
|
||||||
|
|
||||||
|
[Crowdin](https://crowdin.com/)
|
||||||
4
packages/vuetom/blog.d.ts
vendored
Normal file
4
packages/vuetom/blog.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { Theme } from 'vitepress'
|
||||||
|
|
||||||
|
declare const BlogTheme: Theme
|
||||||
|
export default BlogTheme
|
||||||
10
packages/vuetom/blog/components/Page.vue
Normal file
10
packages/vuetom/blog/components/Page.vue
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
<main
|
||||||
|
class="page">
|
||||||
|
<div class="container">
|
||||||
|
<slot name="top" />
|
||||||
|
<Content class="content" />
|
||||||
|
<slot name="bottom" />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
126
packages/vuetom/blog/components/VPAlgoliaSearchBox.vue
Normal file
126
packages/vuetom/blog/components/VPAlgoliaSearchBox.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { DefaultTheme } from 'vitepress/theme'
|
||||||
|
import docsearch from '@docsearch/js'
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import { useRouter, useRoute, useData } from 'vitepress'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
const { theme } = useData()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initialize(theme.value.algolia)
|
||||||
|
setTimeout(poll, 16)
|
||||||
|
})
|
||||||
|
|
||||||
|
function poll() {
|
||||||
|
// programmatically open the search box after initialize
|
||||||
|
const e = new Event('keydown') as any
|
||||||
|
|
||||||
|
e.key = 'k'
|
||||||
|
e.metaKey = true
|
||||||
|
|
||||||
|
window.dispatchEvent(e)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!document.querySelector('.DocSearch-Modal')) {
|
||||||
|
poll()
|
||||||
|
}
|
||||||
|
}, 16)
|
||||||
|
}
|
||||||
|
|
||||||
|
function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
|
||||||
|
// note: multi-lang search support is removed since the theme
|
||||||
|
// doesn't support multiple locales as of now.
|
||||||
|
const options = Object.assign({}, userOptions, {
|
||||||
|
container: '#docsearch',
|
||||||
|
|
||||||
|
navigator: {
|
||||||
|
navigate({ itemUrl }: { itemUrl: string }) {
|
||||||
|
const { pathname: hitPathname } = new URL(
|
||||||
|
window.location.origin + itemUrl
|
||||||
|
)
|
||||||
|
|
||||||
|
// router doesn't handle same-page navigation so we use the native
|
||||||
|
// browser location API for anchor navigation
|
||||||
|
if (route.path === hitPathname) {
|
||||||
|
window.location.assign(window.location.origin + itemUrl)
|
||||||
|
} else {
|
||||||
|
router.go(itemUrl)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
transformItems(items: any[]) {
|
||||||
|
return items.map((item) => {
|
||||||
|
return Object.assign({}, item, {
|
||||||
|
url: getRelativePath(item.url)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
hitComponent({ hit, children }: { hit: any; children: any }) {
|
||||||
|
const relativeHit = hit.url.startsWith('http')
|
||||||
|
? getRelativePath(hit.url as string)
|
||||||
|
: hit.url
|
||||||
|
|
||||||
|
return {
|
||||||
|
__v: null,
|
||||||
|
type: 'a',
|
||||||
|
ref: undefined,
|
||||||
|
constructor: undefined,
|
||||||
|
key: undefined,
|
||||||
|
|
||||||
|
props: {
|
||||||
|
href: hit.url,
|
||||||
|
|
||||||
|
onClick(event: MouseEvent) {
|
||||||
|
if (isSpecialClick(event)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// we rely on the native link scrolling when user is already on
|
||||||
|
// the right anchor because Router doesn't support duplicated
|
||||||
|
// history entries.
|
||||||
|
if (route.path === relativeHit) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// if the hits goes to another page, we prevent the native link
|
||||||
|
// behavior to leverage the Router loading feature.
|
||||||
|
if (route.path !== relativeHit) {
|
||||||
|
event.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
router.go(relativeHit)
|
||||||
|
},
|
||||||
|
|
||||||
|
children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
docsearch(options)
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSpecialClick(event: MouseEvent) {
|
||||||
|
return (
|
||||||
|
event.button === 1 ||
|
||||||
|
event.altKey ||
|
||||||
|
event.ctrlKey ||
|
||||||
|
event.metaKey ||
|
||||||
|
event.shiftKey
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRelativePath(absoluteUrl: string) {
|
||||||
|
const { pathname, hash } = new URL(absoluteUrl)
|
||||||
|
|
||||||
|
return pathname + hash
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="docsearch" />
|
||||||
|
</template>
|
||||||
81
packages/vuetom/blog/components/VPContent.vue
Normal file
81
packages/vuetom/blog/components/VPContent.vue
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<!-- @format -->
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRoute, useData } from 'vitepress'
|
||||||
|
import { useSidebar } from '../composables/sidebar.js'
|
||||||
|
import NotFound from '../layouts/NotFound.vue'
|
||||||
|
import VTHome from './VTHome.vue'
|
||||||
|
import VTDoc from './article/VTDoc.vue'
|
||||||
|
import VTDocList from './article/VTDocList.vue'
|
||||||
|
import VTSidebar from './sidebar/VTSidebar.vue'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const { frontmatter } = useData()
|
||||||
|
const { hasSidebar } = useSidebar()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="VPContent"
|
||||||
|
id="VPContent"
|
||||||
|
:class="{
|
||||||
|
'has-sidebar': hasSidebar,
|
||||||
|
'is-home': frontmatter.layout === 'home',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<NotFound v-if="route.component === NotFound" />
|
||||||
|
<VTHome
|
||||||
|
v-else-if="frontmatter.layout === 'home' || frontmatter.layout === 'doc'"
|
||||||
|
>
|
||||||
|
<template #sidebar><VTSidebar /></template>
|
||||||
|
<template #doclist>
|
||||||
|
<!-- 文章列表 -->
|
||||||
|
<VTDocList v-if="frontmatter.layout === 'home'" />
|
||||||
|
</template>
|
||||||
|
<template #docone>
|
||||||
|
<!-- 单个文章 -->
|
||||||
|
<VTDoc v-if="frontmatter.layout === 'doc'">
|
||||||
|
<Content />
|
||||||
|
</VTDoc>
|
||||||
|
</template>
|
||||||
|
</VTHome>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
<Content></Content>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.VPContent {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPContent.is-home {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
.VPContent {
|
||||||
|
padding-top: var(--vp-nav-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPContent.has-sidebar {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: var(--vp-sidebar-width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) {
|
||||||
|
.VPContent.has-sidebar {
|
||||||
|
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
|
||||||
|
padding-left: calc(
|
||||||
|
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user