docs: update docs
This commit is contained in:
pengzhanbo
parent
9a5eda49a8
commit
25d8aa1fb3
@ -9,25 +9,25 @@ interface Feature {
|
||||
value: string
|
||||
}
|
||||
|
||||
const api = 'https://api.caniuse.bitsofco.de/features'
|
||||
const api = 'https://api.pengzhanbo.cn/caniuse/features'
|
||||
|
||||
const features = useLocalStorage('caniuse-features', [] as Feature[])
|
||||
onMounted(async () => {
|
||||
const res = await fetch(api)
|
||||
const data = await res.json()
|
||||
features.value = data?.map((item: any) => ({ label: item.title, value: item.id })) || []
|
||||
features.value = data || features.value || []
|
||||
})
|
||||
|
||||
const browserVersionList = ref([
|
||||
{ label: '未来版本 （当前版本 + 3）', value: 3, checked: false },
|
||||
{ label: '未来版本 （当前版本 + 2）', value: 2, checked: false },
|
||||
{ label: '未来版本 （当前版本 + 1）', value: 1, checked: false },
|
||||
{ label: '新版本（当前版本 + 3）', value: 3, checked: false },
|
||||
{ label: '新版本（当前版本 + 2）', value: 2, checked: false },
|
||||
{ label: '新版本（当前版本 + 1）', value: 1, checked: false },
|
||||
{ label: '当前版本', value: 0, disabled: true, checked: true },
|
||||
{ label: '过去版本 （当前版本 - 1）', value: -1, checked: false },
|
||||
{ label: '过去版本 （当前版本 - 2）', value: -2, checked: false },
|
||||
{ label: '过去版本 （当前版本 - 3）', value: -3, checked: false },
|
||||
{ label: '过去版本 （当前版本 - 4）', value: -4, checked: false },
|
||||
{ label: '过去版本 （当前版本 - 5）', value: -5, checked: false },
|
||||
{ label: '旧版本（当前版本 - 1）', value: -1, checked: false },
|
||||
{ label: '旧版本（当前版本 - 2）', value: -2, checked: false },
|
||||
{ label: '旧版本（当前版本 - 3）', value: -3, checked: false },
|
||||
{ label: '旧版本（当前版本 - 4）', value: -4, checked: false },
|
||||
{ label: '旧版本（当前版本 - 5）', value: -5, checked: false },
|
||||
])
|
||||
|
||||
const input = ref('')
|
||||
@ -77,7 +77,7 @@ const output = computed(() => {
|
||||
if (embedType.value)
|
||||
content += ` ${embedType.value}`
|
||||
|
||||
if (browserVersion.value)
|
||||
if (browserVersion.value && !embedType.value)
|
||||
content += `{${browserVersion.value}}`
|
||||
|
||||
content += ']('
|
||||
@ -131,7 +131,7 @@ function render() {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caniuse-form-item">
|
||||
<div v-if="!embedType" class="caniuse-form-item">
|
||||
<label for="browserVersion">浏览器版本：</label>
|
||||
<div class="caniuse-browser-version">
|
||||
<label v-for="item in browserVersionList" :key="item.value">
|
||||
@ -143,16 +143,16 @@ function render() {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caniuse-render">
|
||||
<button class="caniuse-render-button" type="button" :disabled="!selected" @click="render">
|
||||
生成预览
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="caniuse-output">
|
||||
<h4>输出：</h4>
|
||||
<CodeViewer lang="md" :content="output" />
|
||||
</div>
|
||||
<div class="caniuse-render">
|
||||
<button class="caniuse-render-button" type="button" :disabled="!selected" @click="render">
|
||||
生成预览
|
||||
</button>
|
||||
</div>
|
||||
<div v-html="rendered" />
|
||||
</div>
|
||||
</template>
|
||||
@ -160,8 +160,18 @@ function render() {
|
||||
<style scoped>
|
||||
.caniuse-config-wrapper form {
|
||||
padding: 20px;
|
||||
margin: 0 -16px;
|
||||
background-color: var(--vp-c-bg-safe);
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
border-radius: 5px;
|
||||
transition: var(--t-color);
|
||||
transition-property: background border;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.caniuse-config-wrapper form {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.caniuse-form-item {
|
||||
@ -171,6 +181,10 @@ function render() {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.caniuse-form-item:nth-child(3) {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.feature-input {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
@ -187,7 +201,11 @@ function render() {
|
||||
.feature-input__input {
|
||||
width: 100%;
|
||||
padding: 3px 40px 3px 16px;
|
||||
font-size: 1em;
|
||||
background-color: var(--vp-c-bg);
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
transition: var(--t-color);
|
||||
transition-property: border background;
|
||||
}
|
||||
|
||||
.feature-input__input:focus {
|
||||
@ -232,18 +250,31 @@ function render() {
|
||||
}
|
||||
|
||||
.caniuse-browser-version {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.caniuse-browser-version label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.caniuse-browser-version {
|
||||
display: flex;
|
||||
gap: 10px 0;
|
||||
}
|
||||
|
||||
.caniuse-browser-version label {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.caniuse-render {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.caniuse-render-button {
|
||||
@ -252,7 +283,7 @@ function render() {
|
||||
color: var(--vp-c-bg);
|
||||
background-color: var(--vp-c-brand-1);
|
||||
border-radius: 8px;
|
||||
transition: background-color var(--t-color);
|
||||
transition: background-color var(--t-color), color var(--t-color);
|
||||
}
|
||||
|
||||
.caniuse-render-button:hover {
|
||||
@ -261,7 +292,6 @@ function render() {
|
||||
|
||||
.caniuse-render-button[disabled] {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--vp-c-brand-1);
|
||||
opacity: 0.5;
|
||||
background-color: var(--vp-c-gray-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,20 @@ defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`language-${lang}`" :data-ext="lang">
|
||||
<div :class="`code-viewer language-${lang}`" :data-ext="lang">
|
||||
<button class="copy-code-button" :data-lang="lang" />
|
||||
<pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code>{{ content }}</code></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.code-viewer .copy-code-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.code-viewer .copy-code-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -108,6 +108,96 @@ github: :[tdesign:logo-github-filled]:
|
||||
修改大小：:[tdesign:logo-github-filled 36px]:
|
||||
修改大小颜色：:[tdesign:logo-github-filled 36px/#f00]:
|
||||
|
||||
## “隐秘”文本
|
||||
|
||||
有时候，你不想直接把文本内容毫无保留的展示出来，想要保留一些 隐秘性，
|
||||
可能是为了引起读者的好奇心，也可能纯粹是故意增加点阅读障碍，让文章变得更加有趣。
|
||||
|
||||
为了满足这种小小的心思，主题提供了一个 **“隐秘”文本** 的有趣小功能。它看起来像这样：
|
||||
|
||||
:::demo-wrapper
|
||||
你知道吗， =|鲁迅|= 曾说过：“ =|我没说过这句话！|= ” 令我醍醐灌顶，深受启发，浑身迸发出无可匹敌的
|
||||
力量！于是，=|我在床上翻了个身|= ！
|
||||
:::
|
||||
|
||||
读者不能直接阅读到完整的内容，部分的内容被 “遮住”，需要鼠标悬停到内容上，才能看到被遮住的内容。
|
||||
|
||||
### 配置
|
||||
|
||||
该功能默认不启用，你需要在 `theme` 配置中启用。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
plot: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
`markdownPower.plot` 支持传入 `boolean | PlotOptions` 类型
|
||||
|
||||
```ts
|
||||
interface PlotOptions {
|
||||
/**
|
||||
* 是否启用 `=| |=` markdown （该标记为非标准标记，脱离插件将不生效）
|
||||
* 如果设置为 false， 则表示不启用该标记，只能使用 <Plot /> 组件
|
||||
* @default true
|
||||
*/
|
||||
tag?: boolean
|
||||
|
||||
/**
|
||||
* 遮罩层颜色
|
||||
*/
|
||||
mask?: string | { light: string, dark: string }
|
||||
|
||||
/**
|
||||
* 文本颜色
|
||||
*/
|
||||
color?: string | { light: string, dark: string }
|
||||
|
||||
/**
|
||||
* 触发方式
|
||||
*
|
||||
* @default 'hover'
|
||||
*/
|
||||
trigger?: 'hover' | 'click'
|
||||
}
|
||||
```
|
||||
|
||||
### 语法
|
||||
|
||||
```md
|
||||
=|需要隐秘的内容|=
|
||||
```
|
||||
|
||||
如果不想使用 非标准的 `=||=` 标记语法，你可以将 `plot.tag` 设置为 `false` ，
|
||||
然后使用 [`<Plot />`](/guide/features/component/#plot) 组件替代。
|
||||
|
||||
### 示例
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
你知道吗， =|鲁迅|= 曾说过：“ =|我没说过这句话！|= ” 令我醍醐灌顶，深受启发，浑身迸发出无可匹敌的
|
||||
力量！于是，=|我在床上翻了个身|= ！
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
:::demo-wrapper
|
||||
你知道吗， =|鲁迅|= 曾说过：“ =|我没说过这句话！|= ” 令我醍醐灌顶，深受启发，浑身迸发出无可匹敌的
|
||||
力量！于是，=|我在床上翻了个身|= ！
|
||||
:::
|
||||
|
||||
## 选项组
|
||||
|
||||
让你的 Markdown 文件支持选项卡。
|
||||
|
||||
@ -17,7 +17,10 @@ VuePress 是一个 [静态站点生成器](https://en.wikipedia.org/wiki/Static_
|
||||
::: tip
|
||||
本主题 基于 [vuepress-next](https://github.com/vuepress/vuepress-next), 目前处于 RC 阶段。
|
||||
|
||||
功能和API 趋于稳定，但在未来的更新中仍有小概率出现破坏更改。
|
||||
当前主题 功能和 API 趋于稳定，但在未来的更新中仍有小概率出现破坏更改。
|
||||
|
||||
如果您在使用过程中遇到问题，或者有新的想法，请在 [Issues](https://github.com/pengzhanbo/vuepress-theme-plume/issues) 里提出，
|
||||
也欢迎 通过 [PR](https://github.com/pengzhanbo/vuepress-theme-plume/pulls) 帮助完善主题。
|
||||
:::
|
||||
|
||||
## 优势
|
||||
|
||||
@ -70,3 +70,55 @@ permalink: /guide/features/component/
|
||||
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
|
||||
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
|
||||
- twitter - <Iconify name="skill-icons:twitter" size="2em" />
|
||||
|
||||
## `<Plot />`
|
||||
|
||||
[“隐秘”文本](/guide/markdown/advance/#隐秘-文本) 组件。
|
||||
|
||||
该组件默认不启用，你需要在 theme 配置中启用。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
plot: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Props
|
||||
|
||||
- `trigger`
|
||||
- 类型：`'hover' | 'click'`
|
||||
- 默认值：`'hover'`
|
||||
- 描述：鼠标悬停触发，或者点击触发
|
||||
|
||||
- `mask`
|
||||
- 类型：`string | { light: string, dark: string }`
|
||||
- 默认值：`#000`
|
||||
- 描述：遮罩颜色
|
||||
|
||||
- `color`
|
||||
- 类型：`string | { light: string, dark: string }`
|
||||
- 默认值：`#fff`
|
||||
- 描述：文本颜色
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
- 鼠标悬停 - <Plot>悬停时可见</Plot>
|
||||
- 点击 - <Plot trigger="click">点击时可见</Plot>
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
- 鼠标悬停 - <Plot>悬停时可见</Plot>
|
||||
- 点击 - <Plot trigger="click">点击时可见</Plot>
|
||||
|
||||
@ -7,6 +7,7 @@ import Bilibili from './components/Bilibili.vue'
|
||||
import Youtube from './components/Youtube.vue'
|
||||
import Replit from './components/Replit.vue'
|
||||
import CodeSandbox from './components/CodeSandbox.vue'
|
||||
import Plot from './components/Plot.vue'
|
||||
|
||||
import '@internal/md-power/icons.css'
|
||||
|
||||
@ -29,6 +30,9 @@ export default defineClientConfig({
|
||||
if (pluginOptions.codeSandbox)
|
||||
app.component('CodeSandboxViewer', CodeSandbox)
|
||||
|
||||
if (pluginOptions.plot)
|
||||
app.component('Plot', Plot)
|
||||
|
||||
if (__VUEPRESS_SSR__)
|
||||
return
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@ import { codepenPlugin } from './features/codepen.js'
|
||||
import { replitPlugin } from './features/replit.js'
|
||||
import { codeSandboxPlugin } from './features/codeSandbox.js'
|
||||
import { jsfiddlePlugin } from './features/jsfiddle.js'
|
||||
import { plotPlugin } from './features/plot.js'
|
||||
|
||||
const __dirname = getDirname(import.meta.url)
|
||||
|
||||
@ -76,6 +77,14 @@ export function markdownPowerPlugin(options: MarkdownPowerPluginOptions = {}): P
|
||||
// @[jsfiddle](user/id)
|
||||
md.use(jsfiddlePlugin)
|
||||
}
|
||||
|
||||
if (
|
||||
options.plot === true
|
||||
|| (typeof options.plot === 'object' && options.plot.tag !== false)
|
||||
) {
|
||||
// =|plot|=
|
||||
md.use(plotPlugin)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ import VButton from '../VButton.vue'
|
||||
|
||||
const props = defineProps<PlumeThemeHomeBanner>()
|
||||
|
||||
const DEFAULT_BANNER = 'http://file.mo7.cc/api/public/bz'
|
||||
const DEFAULT_BANNER = 'https://api.pengzhanbo.cn/wallpaper/bing'
|
||||
|
||||
const matter = usePageFrontmatter<PlumeThemeHomeFrontmatter>()
|
||||
const isDark = useDarkMode()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user