chore: complete en docs (Tencent#2541)

KMethod · Aug 25, 2023 · 1515af0 · 1515af0
1 parent 2325a60
commit 1515af0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/site/plugin-tdoc/md-to-vue.js b/site/plugin-tdoc/md-to-vue.js
@@ -13,6 +13,12 @@ const DEFAULT_TABS = [
   { tab: 'design', name: '指南' },
 ];
 
+const DEFAULT_EN_TABS = [
+  { tab: 'demo', name: 'DEMO' },
+  { tab: 'api', name: 'API' },
+  { tab: 'design', name: 'Guideline' },
+];
+
 export default async function mdToVue(options) {
   const mdSegment = await customRender(options);
   const { demoDefsStr, demoCodesDefsStr, demoInstallStr, demoCodeInstallStr } = options;
@@ -132,6 +138,7 @@ async function customRender({ source, file, md }) {
   const { content, data } = matter(source);
   const lastUpdated = (await getGitTimestamp(file)) || Math.round(fs.statSync(file).mtimeMs);
   // console.log('data', data);
+  const isEn = file.endsWith('en-US.md');
 
   // md top data
   const pageData = {
@@ -141,7 +148,7 @@ async function customRender({ source, file, md }) {
     description: '',
     isComponent: false,
     tdDocHeader: true,
-    tdDocTabs: DEFAULT_TABS,
+    tdDocTabs: isEn ? DEFAULT_EN_TABS : DEFAULT_TABS,
     apiFlag: /#+\s*API/,
     docClass: '',
     usage: null,

diff --git a/site/site.config.mjs b/site/site.config.mjs
@@ -45,10 +45,11 @@ const docs = [
     children: [
       {
         title: '全局特性配置',
-        titleEn: 'Config',
+        titleEn: 'Global Configuration',
         name: 'config',
-        path: '/vue/config',
+        path: '/vue/global-configuration',
         component: () => import('tdesign-vue/config-provider/config-provider.md'),
+        componentEn: () => import('tdesign-vue/config-provider/config-provider.en-US.md'),
       },
       {
         title: '自定义主题',

diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md
@@ -1,5 +1,38 @@
 :: BASE_DOC ::
 
+### Global Component Classprefix
+
+the classprefix of TDesign component is `t`. In some situations, it is necessary to change the component prefix to meet the usage needs.
+
+You can use the `esm` version (which guarantees that you can modify less vars), modify the `classPrefix` through global configuration, and cooperate with less-loader to modify the `@prefix` less vars to ensure the normal styling of the components.
+
+```js
+import Vue from 'vue'
+import TDesign from 'tdesign-vue/esm'
+import 'tdesign-vue/esm/style/index.js'
+
+Vue.use(TDesign);
+...
+
+<t-config-provider :globalConfig="{ classPrefix: 'any'}">
+    <t-button>TDesign to any design</t-button>
+</t-config-provider>
+```
+
+```js
+{
+    loaderOptions: {
+        less: {
+            lessOptions: {
+                modifyVars: {
+                    '@prefix': 'any', // should be the same as classPrefix
+                },
+                javascriptEnabled: true,
+            },
+        },
+    }
+}
+```
 ## API
 ### GlobalConfigProvider