src/pages/versions/index.js

import React, { useState }  from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
import config from "../versions/config.json";
import Layout from '@theme/Layout';
import styles from './index.module.scss';

export default function() {
    const isBrowser = useIsBrowser();

    const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ? 'zh-CN' : 'en';
    const dataSource = config?.[language];

    return (
        <Layout>
            <div className={styles['divone']}><br/>
                <h1>{dataSource.title}</h1>
                <br/>
                {/* <h3>{dataSource.latestVersion}</h3> */}
                <p>{dataSource.latestVersionExplain}</p>
                <table>
                  <tbody>
                     {
                      dataSource.table.latestData.map((item, i) => (
                       <tr  key={i} index={i}>
                       <td>{item.versionLabel}</td>
                       <td>
                           <a href={item.docUrl}>{dataSource.table.doc}</a>
                       </td>
                       <td>
                           <a href={item.downloadUrl}>{dataSource.table.release}</a>
                       </td>
                       <td>
                           <a target="_blank" href={"https://github.com/apache/linkis/tree/"+item.sourceTag}>{dataSource.table.source}</a>
                       </td>
                       </tr>
                      ))
                     }
                  </tbody>
                </table>
                <br/>

                <h3>{dataSource.nextVersion}</h3>
                <p>{dataSource.nextVersionExplain}</p>
                <table>
                  <tbody>
                     {
                      dataSource.table.nextData.map((item, i) => (
                       <tr  key={i} index={i}>
                       <td>{item.versionLabel}</td>
                       <td>
                           <a href={item.docUrl}>{dataSource.table.doc}</a>
                       </td>
                       </tr>
                      ))
                      }
                  </tbody>
                </table>
                <br/>

                <h3>{dataSource.historyVersion}</h3>
                <p>{dataSource.historyVersionExplain}</p>
                <table>
                   <tbody>
                     {
                      dataSource.table.historyData.map((item, i) => (
                       <tr  key={i} index={i}>
                       <td>{item.versionLabel}</td>
                       <td>
                           <a href={item.docUrl}>{dataSource.table.doc}</a>
                       </td>
                       { item.downloadUrl &&
                        <td>
                        <a href={item.downloadUrl}>{dataSource.table.release}</a>
                        </td>
                       }
                       <td>
                          <a target="_blank" href={"https://github.com/apache/linkis/tree/"+item.sourceTag}>{dataSource.table.source}</a>
                       </td>
                       </tr>
                      ))
                      }
                   </tbody>
                </table>

            </div>
        </Layout>
    );
}