diff --git a/.vscode/settings.json b/.vscode/settings.json index 73f19997..4f9c2a67 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,6 +8,8 @@ "[markdown]": { "files.trimTrailingWhitespace": false }, + "css.validate": false, + "scss.validate": false, "typescript.tsdk": "node_modules/typescript/lib", "cSpell.words": [ "bumpp", diff --git a/docs/2.preview/主题效果预览.md b/docs/2.preview/主题效果预览.md index 1af82946..ff6d8a9a 100644 --- a/docs/2.preview/主题效果预览.md +++ b/docs/2.preview/主题效果预览.md @@ -44,6 +44,13 @@ _斜体文字_ 数学表达式： $-(2^{n-1})$ ~ $2^{n-1} -1$ +$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) += \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$ + +19^th^ + +H~2~O + ::: center 内容居中 ::: @@ -81,6 +88,8 @@ _斜体文字_ ![image](/images/1px-lines.png) +![image](/images/1px-lines.png) + **Badge** - @@ -91,7 +100,7 @@ _斜体文字_ **图标** -- home - +- home - - vscode - - twitter - @@ -167,18 +176,38 @@ function foo() { ::: tip 提示 提示内容 +```js +const a = 1 +const b = 2 +const c = a + b +``` ::: ::: warning 警告 警告内容 +```js +const a = 1 +const b = 2 +const c = a + b +``` ::: ::: caution 错误 错误内容 +```js +const a = 1 +const b = 2 +const c = a + b +``` ::: ::: important 重要 重要内容 +```js +const a = 1 +const b = 2 +const c = a + b +``` ::: ::: info diff --git a/docs/notes/vuepress-plugin/caniuse/README.md b/docs/notes/vuepress-plugin/caniuse/README.md index 8efb2716..a37c0ab4 100644 --- a/docs/notes/vuepress-plugin/caniuse/README.md +++ b/docs/notes/vuepress-plugin/caniuse/README.md @@ -86,6 +86,7 @@ __示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情 ``` 效果： + ::: caniuse css-matches-pseudo ::: diff --git a/plugins/plugin-caniuse/README.md b/plugins/plugin-caniuse/README.md index ab0905a6..062d4db1 100644 --- a/plugins/plugin-caniuse/README.md +++ b/plugins/plugin-caniuse/README.md @@ -1,34 +1,59 @@ -# `@vuepress-plume/plugin-caniuse` +# vuepress-plugin-caniuse + +VuePress 2 Plugin + +VuePress 2 插件 + +在Markdown中添加 [can-i-use](https://caniuse.com/) 支持，这对于你在写前端技术博客时，说明某个feature的兼容性时特别有用。 -为 markdown 添加 can-i-use 容器支持 ## Install -``` +``` sh yarn add @vuepress-plume/plugin-caniuse ``` + ## Usage + +### 在VuePress 配置文件中添加插件 ``` js // .vuepress/config.js -const { caniusePlugin } = require('@vuepress-plume/plugin-caniuse') -module.exports = { +export default { // ... plugins: [ - caniusePlugin({ mode: 'embed' }) + ['@vuepress-plume/plugin-caniuse', { mode: 'image' }] ] // ... } ``` - -### options - -- mode: 渲染模式，默认值 `embed` - - embed: 交互式嵌入，通过 iframe 嵌入可交互的 can-i-use - - image: 仅添加 图片 - +### 在markdown中编写 ``` md -::: caniuse css-matches-pseudo +::: caniuse {{browser_versions}} ::: ``` -## 效果 +### Options -![css-dir-pseudo](https://caniuse.bitsofco.de/image/css-dir-pseudo.webp) +- `options.mode`: can-i-use插入文档的模式， 支持 `embed` 和`image`, 默认值是 `image`。 + - `image`: 插入图片 + - `embed`: 使用iframe嵌入 can-i-use + +### \ + +正确取值请参考 [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/) + +### \{browser_versions\}` + +可选。当前特性在多个版本中的支持情况。 + +格式： `{number,number,...}` 取值范围为 `-5 ~ 3` + +- 小于`0` 表示低于当前浏览器版本的支持情况 +- `0` 表示当前浏览器版本的支持情况 +- 大于`0` 表示高于当前浏览器版本的支持情况 + +## Example +``` md +::: caniuse css-matches-pseudo {-2,-1,1} +::: +``` +效果： +![can-i-use css-matches-pseudo](https://caniuse.bitsofco.de/image/css-dir-pseudo.webp) diff --git a/plugins/plugin-caniuse/src/README.md b/plugins/plugin-caniuse/src/README.md deleted file mode 100644 index 9d6adcba..00000000 --- a/plugins/plugin-caniuse/src/README.md +++ /dev/null @@ -1,49 +0,0 @@ -# vuepress-plugin-caniuse - -VuePress 2 Plugin - -VuePress 2 插件 - -在Markdown中添加 [can-i-use](https://caniuse.com/) 支持，这对于你在写前端技术博客时，说明某个feature的兼容性时特别有用。 - -## Install -``` sh -yarn add @vuepress-plume/plugin-caniuse -``` - -## Usage - -### 在VuePress 配置文件中添加插件 -``` js -// .vuepress/config.js -export default { - // ... - plugins: [ - ['@vuepress-plume/plugin-caniuse', { mode: 'image' }] - ] - // ... -} -``` -### 在markdown中编写 -``` md -::: caniuse -::: -``` - -### Options - -- `options.mode`: can-i-use插入文档的模式， 支持 `embed` 和`image`, 默认值是 `image`。 - - `image`: 插入图片 - - `embed`: 使用iframe嵌入 can-i-use - -### \ - -正确取值请参考 [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/) - -## Example -``` md -::: caniuse css-matches-pseudo -::: -``` -效果： -![can-i-use css-matches-pseudo](https://caniuse.bitsofco.de/image/css-dir-pseudo.webp) diff --git a/plugins/plugin-caniuse/src/client/resolveCanIUse.ts b/plugins/plugin-caniuse/src/client/resolveCanIUse.ts index 1530b7aa..6c60b7ac 100644 --- a/plugins/plugin-caniuse/src/client/resolveCanIUse.ts +++ b/plugins/plugin-caniuse/src/client/resolveCanIUse.ts @@ -9,10 +9,11 @@ export function resolveCanIUse(): void { if (typeof data === 'string' && data.includes('ciu_embed')) { const [, feature, height] = data.split(':') - const el = document.querySelector(`.ciu_embed[data-feature="${feature}"]`) + const el = document.querySelector(`.ciu_embed[data-feature="${feature}"]:not([data-skip])`) if (el) { const h = Number.parseInt(height) + 30 ;(el.childNodes[0] as any).height = `${h}px` + el.setAttribute('data-skip', 'true') } } }) diff --git a/plugins/plugin-caniuse/src/node/plugin.ts b/plugins/plugin-caniuse/src/node/plugin.ts index 09d9b943..ce9d2f89 100644 --- a/plugins/plugin-caniuse/src/node/plugin.ts +++ b/plugins/plugin-caniuse/src/node/plugin.ts @@ -30,8 +30,10 @@ export function caniusePlugin({ const render = (tokens: Token[], index: number): string => { const token = tokens[index] if (token.nesting === 1) { - const feature = token.info.trim().slice(type.length).trim() || '' - return feature ? resolveCanIUse(feature, mode) : '' + const info = token.info.trim().slice(type.length).trim() || '' + const feature = info.split(/\s+/)[0] + const versions = info.match(/\{(.*)\}/)?.[1] || '' + return feature ? resolveCanIUse(feature, mode, versions) : '' } else { return '' diff --git a/plugins/plugin-caniuse/src/node/resolveCanIUse.ts b/plugins/plugin-caniuse/src/node/resolveCanIUse.ts index cf8ee547..9c4a9994 100644 --- a/plugins/plugin-caniuse/src/node/resolveCanIUse.ts +++ b/plugins/plugin-caniuse/src/node/resolveCanIUse.ts @@ -1,6 +1,6 @@ import type { CanIUseMode } from '../shared/index.js' -export function resolveCanIUse(feature: string, mode: CanIUseMode): string { +export function resolveCanIUse(feature: string, mode: CanIUseMode, versions: string): string { if (!feature) return '' @@ -12,7 +12,7 @@ export function resolveCanIUse(feature: string, mode: CanIUseMode): string { ` } - const periods = 'future_2,future_1,current,past_1,past_2' + const periods = resolveVersions(versions) const accessible = 'false' const image = 'none' const url = 'https://caniuse.bitsofco.de/embed/index.html' @@ -20,3 +20,27 @@ export function resolveCanIUse(feature: string, mode: CanIUseMode): string { return `
` } + +function resolveVersions(versions: string): string { + if (!versions) + return 'future_1,current,past_1,past_2' + + const list = versions + .split(',') + .map(v => Number(v.trim())) + .filter(v => !Number.isNaN(v) && v >= -5 && v <= 3) + + list.push(0) + + const uniq = [...new Set(list)].sort((a, b) => b - a) + const result: string[] = [] + uniq.forEach((v) => { + if (v < 0) + result.push(`past_${Math.abs(v)}`) + if (v === 0) + result.push('current') + if (v > 0) + result.push(`future_${v}`) + }) + return result.join(',') +} diff --git a/plugins/plugin-content-update/src/client/components/Content.ts b/plugins/plugin-content-update/src/client/components/Content.ts index 7430a828..d0659aa8 100644 --- a/plugins/plugin-content-update/src/client/components/Content.ts +++ b/plugins/plugin-content-update/src/client/components/Content.ts @@ -28,9 +28,9 @@ export const Content = defineComponent({ return () => pageComponent.value ? h(pageComponent.value, { - onVnodeMounted: runCallbacks, - onVnodeUpdated: runCallbacks, - onVnodeBeforeUnmount: runCallbacks, + onVnodeMounted: () => runCallbacks({ mounted: true }), + onVnodeUpdated: () => runCallbacks({ updated: true }), + onVnodeBeforeUnmount: () => runCallbacks({ beforeUnmount: true }), }) : h( 'div', diff --git a/plugins/plugin-content-update/src/client/composables/index.ts b/plugins/plugin-content-update/src/client/composables/index.ts index c61b6972..64bff3b1 100644 --- a/plugins/plugin-content-update/src/client/composables/index.ts +++ b/plugins/plugin-content-update/src/client/composables/index.ts @@ -1,7 +1,12 @@ import { onUnmounted } from 'vue' -// eslint-disable-next-line import/no-mutable-exports -export let contentUpdatedCallbacks: (() => any)[] = [] +export interface ContentUpdated { + mounted?: boolean + updated?: boolean + beforeUnmount?: boolean +} + +let contentUpdatedCallbacks: ((lifeCircleType: ContentUpdated) => any)[] = [] /** * Register callback that is called every time the markdown content is updated @@ -14,6 +19,6 @@ export function onContentUpdated(fn: () => any) { }) } -export function runCallbacks() { - contentUpdatedCallbacks.forEach(fn => fn()) +export function runCallbacks(lifeCircleType: ContentUpdated) { + contentUpdatedCallbacks.forEach(fn => fn(lifeCircleType)) } diff --git a/plugins/plugin-iconify/src/client/components/Iconify.vue b/plugins/plugin-iconify/src/client/components/Iconify.vue index 3a347240..c57c97c7 100644 --- a/plugins/plugin-iconify/src/client/components/Iconify.vue +++ b/plugins/plugin-iconify/src/client/components/Iconify.vue @@ -1,15 +1,23 @@ + + + + diff --git a/theme/src/client/components/BlogExtract.vue b/theme/src/client/components/BlogExtract.vue index a07870b7..115ea983 100644 --- a/theme/src/client/components/BlogExtract.vue +++ b/theme/src/client/components/BlogExtract.vue @@ -111,12 +111,18 @@ const showBlogExtract = computed(() => { } } +@media print { + .blog-extract { + display: none; + } +} + .blog-modal { position: fixed; top: 0; bottom: 0; left: 0; - z-index: var(--vp-z-index-sidebar); + z-index: var(--vp-z-index-overlay); width: 100%; opacity: 1; background-color: rgba(0, 0, 0, 0.3); @@ -140,11 +146,15 @@ const showBlogExtract = computed(() => { background-color: var(--vp-c-bg); border-top-left-radius: 12px; border-top-right-radius: 12px; - box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.1), 0 -1px 4px rgba(0, 0, 0, 0.1);; + box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.1), 0 -1px 4px rgba(0, 0, 0, 0.1); transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } +.dark .blog-modal-container { + box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.3), 0 -1px 4px rgba(0, 0, 0, 0.27); +} + .blog-modal-container.open { transform: translateY(0); } diff --git a/theme/src/client/components/LocalNav.vue b/theme/src/client/components/LocalNav.vue index d1782597..024eced5 100644 --- a/theme/src/client/components/LocalNav.vue +++ b/theme/src/client/components/LocalNav.vue @@ -99,6 +99,12 @@ const showLocalNav = computed(() => { } } +@media print { + .local-nav { + display: none; + } +} + .menu { display: flex; align-items: center; diff --git a/theme/src/client/components/Nav/NavBarSearch.vue b/theme/src/client/components/Nav/NavBarSearch.vue index e8860b46..6034c418 100644 --- a/theme/src/client/components/Nav/NavBarSearch.vue +++ b/theme/src/client/components/Nav/NavBarSearch.vue @@ -23,6 +23,7 @@ } } +/* plugin-docsearch */ .DocSearch { --docsearch-primary-color: var(--vp-c-brand-1); --docsearch-highlight-color: var(--docsearch-primary-color); @@ -211,4 +212,13 @@ .dark .DocSearch-Form { background-color: var(--vp-c-bg-soft); } + +/* plugin-docsearch */ + +/* plugin-search */ +.navbar-search .search-box input { + padding: 0 0.3rem 0 1.575rem; + background-position: 0.5rem 0.4rem; +} +/* plugin-search */ diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue index 462d15b6..b070c51d 100644 --- a/theme/src/client/components/Page.vue +++ b/theme/src/client/components/Page.vue @@ -1,6 +1,8 @@