Feat add material (#1465)

* feat: add related material in Intranet

* feat: add related material in Intranet

content/basic/layout/index-en-US.md

@@ -519,3 +519,5 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 ```material
 2, 43
 ``` -->
+## Related Material
+<semi-material-list code="2"></semi-material-list>

content/basic/layout/index.md

@@ -533,3 +533,6 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 ```material
 2, 43
 ``` -->
+
+## 相关物料
+<semi-material-list code="2"></semi-material-list>

content/input/button/index-en-US.md

@@ -570,3 +570,5 @@ function SplitButtonDemo(){
 ```material
 5
 ``` -->
+## Related Material
+<semi-material-list code="5"></semi-material-list>

content/input/button/index.md

@@ -533,4 +533,6 @@ function SplitButtonDemo(){
 <!-- ## 相关物料
 ```material
 5
-``` -->
+``` -->
+## 相关物料
+<semi-material-list code="5"></semi-material-list>

content/input/checkbox/index-en-US.md

@@ -473,4 +473,6 @@ Some internal methods provided by Checkbox can be accessed through ref:
 <!-- ## Related Material
 ```material
 45, 64, 73, 89, 123
-``` -->
+``` -->
+## Related Material
+<semi-material-list code="123"></semi-material-list>

content/input/checkbox/index.md

@@ -460,4 +460,6 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 <!-- ## 相关物料
 ```material
 45, 64, 73, 89, 123
-``` -->
+``` -->
+## 相关物料
+<semi-material-list code="123"></semi-material-list>

content/input/input/index-en-US.md

@@ -499,3 +499,6 @@ Some internal methods provided by Input can be accessed through ref:
 ```material
 44, 46
 ``` -->
+
+## Related Material
+<semi-material-list code="46"></semi-material-list>

content/input/input/index.md

@@ -510,3 +510,6 @@ import { Input, Typography, Form, TextArea, Button } from '@douyinfe/semi-ui';
 44, 46
 ``` -->
 
+## 相关物料
+<semi-material-list code="46"></semi-material-list>
+

content/input/radio/index-en-US.md

@@ -446,6 +446,9 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
 123
 ``` -->
 
+## Related Material
+<semi-material-list code="123"></semi-material-list>
+
 ## Content Guidelines
 
 - Capitalize the first letter

content/input/radio/index.md

@@ -399,4 +399,7 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
 - 不使用标点符号
 
 ## 设计变量
-<DesignToken/>
+<DesignToken/>
+
+## 相关物料
+<semi-material-list code="123"></semi-material-list>

content/input/select/index-en-US.md

@@ -1464,6 +1464,9 @@ Some internal methods provided by Select can be accessed through ref:
 
 <DesignToken/>
 
+## Related Material
+<semi-material-list code="3, 4, 58, 62"></semi-material-list>
+
 ## FAQ
 
 -   **Searchable Select, using remote data to dynamically update the `optionList`, why sometimes there is no data before the asynchronous request is completed?？**  

content/input/select/index.md

@@ -1592,3 +1592,5 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 ```material
 3,4,44,54,58,62,72
 ``` -->
+## 相关物料
+<semi-material-list code="3, 4, 58, 62"></semi-material-list>

content/input/transfer/index.md

@@ -1060,4 +1060,4 @@ TreeItem 继承 Item 的所有属性
 
 ```material
 52
-``` -->
+``` -->

content/navigation/navigation/index-en-US.md

@@ -832,6 +832,8 @@ function NavApp (props = {}) {
 ```material
 2, 43, 312
 ``` -->
+## Related Material
+<semi-material-list code="2, 312"></semi-material-list>
 
 ## FAQ
 - **Lost animation in navigation bar?**

content/navigation/navigation/index.md

@@ -848,6 +848,8 @@ function NavApp (props = {}) {
 ```material
 2, 43, 312
 ``` -->
+## 相关物料
+<semi-material-list code="2, 312"></semi-material-list>
 
 ## FAQ
 

content/show/card/index-en-US.md

@@ -727,3 +727,5 @@ function Demo() {
 ```material
 41,55,64,74,219,73,84,99,179
 ``` -->
+## Related Material
+<semi-material-list code="41, 179"></semi-material-list>

content/show/card/index.md

@@ -727,3 +727,5 @@ function Demo() {
 ```material
 41,55,64,74,219,73,84,99,179
 ``` -->
+## 相关物料
+<semi-material-list code="41, 179"></semi-material-list>

content/show/dropdown/index-en-US.md

@@ -534,3 +534,5 @@ function DropdownEvents() {
 ```material
 5
 ``` -->
+## Related Material
+<semi-material-list code="5"></semi-material-list>

content/show/dropdown/index.md

@@ -529,3 +529,5 @@ function DropdownEvents() {
 ```material
 5
 ``` -->
+## 相关物料
+<semi-material-list code="5"></semi-material-list>

content/show/modal/index-en-US.md

@@ -709,3 +709,5 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
 ```material
 1, 55
 ``` -->
+## Related Material
+<semi-material-list code="1"></semi-material-list>

content/show/modal/index.md

@@ -719,3 +719,6 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
 ```material
 1, 55
 ``` -->
+
+## 相关物料
+<semi-material-list code="1"></semi-material-list>

content/show/table/index.md

@@ -4959,4 +4959,4 @@ function Demo() {
 <!-- ## 相关物料
 ```material
 196,110,104,113,226
-``` -->
+``` -->

content/show/tooltip/index-en-US.md

@@ -402,3 +402,5 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 ```material
 41
 ``` -->
+## Related Material
+<semi-material-list code="41"></semi-material-list>

content/show/tooltip/index.md

@@ -432,3 +432,5 @@ function Demo() {
 ```material
 41
 ``` -->
+## 相关物料
+<semi-material-list code="41"></semi-material-list>

gatsby-node.js

@@ -165,6 +165,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
         },
         plugins: [plugins.extractText(), plugins.define({
             "THEME_SWITCHER_URL": JSON.stringify(process.env['THEME_SWITCHER_URL']),
+            "MATERIAL_LIST_URL": JSON.stringify(process.env['MATERIAL_LIST_URL']),
             "SEMI_SEARCH_URL": JSON.stringify(process.env['SEMI_SEARCH_URL']),
             "DSM_URL": JSON.stringify(process.env['DSM_URL']),
             'process.env.SEMI_SITE_HEADER': JSON.stringify(process.env.SEMI_SITE_HEADER),

src/html.js

@@ -162,6 +162,9 @@ export default function HTML(props) {
                 {
                     SEMI_SEARCH_URL?<script src={SEMI_SEARCH_URL} defer={true}/>:<script src={"https://unpkg.byted-static.com/latest/ies/semi-search-opensource/dist/semi-search.js"} defer={true}/>
                 }
+                {
+                    MATERIAL_LIST_URL ? <script src={MATERIAL_LIST_URL} defer={true} /> : null
+                }
                 <link rel="icon" href="https://lf9-static.semi.design/obj/semi-tos/images/favicon.ico" />
                 <script dangerouslySetInnerHTML={{ __html: `(${darkmodeProcesser.toString()})()` }} />
                 {props.headComponents}

src/templates/postTemplate.js

@@ -229,42 +229,49 @@ const components = {
                 duration: 3,
             });
         }
+        const hideMaterialTitle = (children === '相关物料' || children === 'Related Material') && !MATERIAL_LIST_URL; // The external network does not display related materials
         return (
-            <h2 className="md markdown gatsby-h2" id={makeAnchorId(children)}>
-                {children}
-                {
-                    children === '设计变量' ?
-                        <Tooltip content={
-                            <span>
-                                如何使用可查阅：
-                                <a href='https://semi.design/dsm_manual/zh-CN/web/componentToken' target="_blank">Semi DSM 手册</a>
-                            </span>}
-                        >
-                            <IconHelpCircle size='large' type="help_circle" style={{ color: ' --semi-color-tertiary-light-default', marginLeft: 4 }} />
-                        </Tooltip>
-                        : null
-                }
+            <>
                 {
-                    children === 'Design Tokens' ? <Tooltip content={
-                        <span>
-                            How to use: Refer to
-                            <a href='https://bytedance.feishu.cn/docx/doxcnVROZf61ey1zFzlErtJfL2d' target="_blank">DSM Playbook</a>
-                        </span>}>
-                        <IconHelpCircle size='large' type="help_circle" style={{ color: ' --semi-color-tertiary-light-default', marginLeft: 4 }} />
-                    </Tooltip> : null
+                    hideMaterialTitle ? 
+                        null : 
+                        <h2 className="md markdown gatsby-h2" id={makeAnchorId(children)}>
+                            {children}
+                            {
+                                children === '设计变量' ?
+                                    <Tooltip content={
+                                        <span>
+                                            如何使用可查阅：
+                                            <a href='https://semi.design/dsm_manual/zh-CN/web/componentToken' target="_blank">Semi DSM 手册</a>
+                                        </span>}
+                                    >
+                                        <IconHelpCircle size='large' type="help_circle" style={{ color: ' --semi-color-tertiary-light-default', marginLeft: 4 }} />
+                                    </Tooltip>
+                                    : null
+                            }
+                            {
+                                children === 'Design Tokens' ? <Tooltip content={
+                                    <span>
+                                        How to use: Refer to
+                                        <a href='https://bytedance.feishu.cn/docx/doxcnVROZf61ey1zFzlErtJfL2d' target="_blank">DSM Playbook</a>
+                                    </span>}>
+                                    <IconHelpCircle size='large' type="help_circle" style={{ color: ' --semi-color-tertiary-light-default', marginLeft: 4 }} />
+                                </Tooltip> : null
+                            }
+                            <IconLink
+                                className={'anchor-link-button-icon'}
+                                tabIndex={0}
+                                role="button"
+                                onClick={onIconLinkClick}
+                                onKeyPress={(e) => {
+                                    if (['Enter', ' '].includes(e?.key)) {
+                                        onIconLinkClick(e);
+                                    }
+                                }}
+                            />
+                        </h2>
                 }
-                <IconLink
-                    className={'anchor-link-button-icon'}
-                    tabIndex={0}
-                    role="button"
-                    onClick={onIconLinkClick}
-                    onKeyPress={(e) => {
-                        if (['Enter', ' '].includes(e?.key)) {
-                            onIconLinkClick(e);
-                    }
-                    }}
-                />
-            </h2>
+            </>
         );
     },
     blockquote: ({ children }) => <blockquote className={'gatsby-blockquote'}>{children}</blockquote>,
@@ -678,7 +685,8 @@ export default function Template(args) {
             <SEO lang="zh-CN" title={`${current.frontmatter.title} - Semi Design`} />
             <div className={'pageAnchor'}>
                 {(tabValue === 'rd' || (["Accessibility "].includes(enTitle))) && (
-                    <PageAnchor slug={pageContext.slug} data={current.tableOfContents.items} />
+                    //  The external network does not display related materials
+                    <PageAnchor slug={pageContext.slug} data={MATERIAL_LIST_URL ? current.tableOfContents.items : current.tableOfContents.items.filter(item => !(item.title === '相关物料' || item.title === 'Related Material'))} />
                 )}
                 {
                     iframeAnchorData && tabValue === 'ued' && <DesignPageAnchor data={iframeAnchorData} />