feat(valaxy): i18n for block

This commit is contained in:
YunYouJun 2022-07-13 21:05:43 +08:00
parent 1e0d8e323b
commit 6a1c3bc82e
8 changed files with 39 additions and 24 deletions

View File

@ -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)
::: :::

View File

@ -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',
},
},
}, },
}) })

View File

@ -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',

View File

@ -19,8 +19,6 @@ custom block.
::: :::
::: tip ::: tip
tip tip

View File

@ -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 方案。

View File

@ -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',
}, },
}, },
}, },

View File

@ -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;
} }
} }

View File

@ -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