mirror of https://github.com/YunYouJun/valaxy
feat(valaxy): i18n for block
This commit is contained in:
parent
1e0d8e323b
commit
6a1c3bc82e
|
@ -70,7 +70,6 @@ The large text sections of the article content section use a different CSS i18n
|
||||||
配置 Vite Vue-i18n 插件 [@intlify/vite-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n):
|
配置 Vite Vue-i18n 插件 [@intlify/vite-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n):
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
::: en
|
::: en
|
||||||
Config Vite Vue-i18n plugin [@intlify/vite-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n):
|
Config Vite Vue-i18n plugin [@intlify/vite-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n):
|
||||||
:::
|
:::
|
||||||
|
|
|
@ -180,13 +180,5 @@ export default defineConfig<ThemeConfig>({
|
||||||
icp: '苏ICP备17038157号',
|
icp: '苏ICP备17038157号',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
menu: {
|
|
||||||
custom: {
|
|
||||||
title: 'docs.view_docs',
|
|
||||||
icon: 'i-ri-file-list-2-line',
|
|
||||||
url: '/docs',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -51,6 +51,9 @@ export default defineConfig({
|
||||||
tip: {
|
tip: {
|
||||||
icon: 'i-carbon-thumbs-up',
|
icon: 'i-carbon-thumbs-up',
|
||||||
text: 'ヒント',
|
text: 'ヒント',
|
||||||
|
langs: {
|
||||||
|
'zh-CN': '提示',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
warning: {
|
warning: {
|
||||||
icon: 'i-carbon-warning-alt',
|
icon: 'i-carbon-warning-alt',
|
||||||
|
|
|
@ -19,8 +19,6 @@ custom block.
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
::: tip
|
::: tip
|
||||||
|
|
||||||
tip
|
tip
|
||||||
|
|
|
@ -23,7 +23,7 @@ Valaxy **提出**了一种基于 CSS 面向博客的 i18n 解决方案。
|
||||||
**The effect is as follows** (click the button to switch).
|
**The effect is as follows** (click the button to switch).
|
||||||
:::
|
:::
|
||||||
|
|
||||||
<YunToggleLocale class="shadow" />
|
<PressToggleLocale class="shadow" />
|
||||||
|
|
||||||
::: zh-CN
|
::: zh-CN
|
||||||
另一种 i18n 方案。
|
另一种 i18n 方案。
|
||||||
|
|
|
@ -16,18 +16,15 @@ export default defineConfig({
|
||||||
blocks: {
|
blocks: {
|
||||||
tip: {
|
tip: {
|
||||||
icon: 'i-carbon-thumbs-up',
|
icon: 'i-carbon-thumbs-up',
|
||||||
text: 'ヒント',
|
|
||||||
},
|
},
|
||||||
warning: {
|
warning: {
|
||||||
icon: 'i-carbon-warning-alt',
|
icon: 'i-carbon-warning-alt',
|
||||||
text: '注意',
|
|
||||||
},
|
},
|
||||||
danger: {
|
danger: {
|
||||||
icon: 'i-carbon-warning',
|
icon: 'i-carbon-warning',
|
||||||
text: '警告',
|
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
text: 'información',
|
text: 'i-carbon-information',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -8,7 +8,8 @@ html[lang] {
|
||||||
h4[lang],
|
h4[lang],
|
||||||
h5[lang],
|
h5[lang],
|
||||||
h6[lang],
|
h6[lang],
|
||||||
div[lang] {
|
div[lang],
|
||||||
|
span[lang] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -32,7 +33,8 @@ html[lang] {
|
||||||
h4[lang="#{$lang}"],
|
h4[lang="#{$lang}"],
|
||||||
h5[lang="#{$lang}"],
|
h5[lang="#{$lang}"],
|
||||||
h6[lang="#{$lang}"],
|
h6[lang="#{$lang}"],
|
||||||
div[lang="#{$lang}"] {
|
div[lang="#{$lang}"],
|
||||||
|
span[lang="#{$lang}"] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ type ContainerArgs = [
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
function createContainer(classes: string, defaultTitle: string, { icon, color }: Omit<BlockItem, 'text'> = {}): ContainerArgs {
|
function createContainer(classes: string, { icon, color, text: defaultTitle, langs }: BlockItem = {}): ContainerArgs {
|
||||||
return [
|
return [
|
||||||
container,
|
container,
|
||||||
classes,
|
classes,
|
||||||
|
@ -32,9 +32,14 @@ function createContainer(classes: string, defaultTitle: string, { icon, color }:
|
||||||
if (icon)
|
if (icon)
|
||||||
iconTag = `<i class="icon ${icon}" ${color ? `style="color: ${color}"` : ''}></i>`
|
iconTag = `<i class="icon ${icon}" ${color ? `style="color: ${color}"` : ''}></i>`
|
||||||
|
|
||||||
return `<div class="${classes} custom-block"><p class="custom-block-title">${iconTag}${
|
let title = `<span lang="en">${info || defaultTitle}</span>`
|
||||||
info || defaultTitle
|
if (langs) {
|
||||||
}</p>\n`
|
Object.keys(langs).forEach((lang) => {
|
||||||
|
title += `<span lang="${lang}">${langs[lang]}</span>`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<div class="${classes} custom-block"><p class="custom-block-title">${iconTag}${title}</p>\n`
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
return classes === 'details' ? '</details>\n' : '</div>\n'
|
return classes === 'details' ? '</details>\n' : '</div>\n'
|
||||||
|
@ -48,6 +53,10 @@ export interface BlockItem {
|
||||||
text?: string
|
text?: string
|
||||||
icon?: string
|
icon?: string
|
||||||
color?: string
|
color?: string
|
||||||
|
/**
|
||||||
|
* for i18n
|
||||||
|
*/
|
||||||
|
langs?: { [key: string]: string }
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Blocks {
|
export interface Blocks {
|
||||||
|
@ -61,18 +70,33 @@ export interface Blocks {
|
||||||
const defaultBlocksOptions: Blocks = {
|
const defaultBlocksOptions: Blocks = {
|
||||||
tip: {
|
tip: {
|
||||||
text: 'TIP',
|
text: 'TIP',
|
||||||
|
langs: {
|
||||||
|
'zh-CN': '提示',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
warning: {
|
warning: {
|
||||||
text: 'WARNING',
|
text: 'WARNING',
|
||||||
|
langs: {
|
||||||
|
'zh-CN': '注意',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
danger: {
|
danger: {
|
||||||
text: 'WARNING',
|
text: 'DANGER',
|
||||||
|
langs: {
|
||||||
|
'zh-CN': '警告',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
text: 'INFO',
|
text: 'INFO',
|
||||||
|
langs: {
|
||||||
|
'zh-CN': '信息',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
details: {
|
details: {
|
||||||
text: 'Details',
|
text: 'Details',
|
||||||
|
langs: {
|
||||||
|
'zh-CN': '详情',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,7 +107,7 @@ export const containerPlugin = (md: MarkdownIt, options: Blocks = {}) => {
|
||||||
...(options[optionKey as keyof Blocks] || {}),
|
...(options[optionKey as keyof Blocks] || {}),
|
||||||
}
|
}
|
||||||
|
|
||||||
md.use(...createContainer(optionKey, option.text!, option))
|
md.use(...createContainer(optionKey, option))
|
||||||
})
|
})
|
||||||
|
|
||||||
// explicitly escape Vue syntax
|
// explicitly escape Vue syntax
|
||||||
|
|
Loading…
Reference in New Issue