徵文投稿|Apache Linkis官網的版式優化經驗分享

寫在開頭：在2022年的開源之夏暑期活動中，我有幸和Apache Linkis 項目結緣，並參與到項目社區，我主要爲Linkis官網 https://linkis.apache.org/做版式的 優化、編寫github workflow完成倉庫自動化管理、優化主項目前端管理臺頁面，使用Vue完成主項目基礎數據一、二級菜單，yarn集羣管理，gateway網關token數據管理，引擎參數列表等基礎數據管理前端頁面開發。下述是具體的操作過程，期待未來能和社區的各位前輩多多學習。

自動回覆以及官網鏈接檢查 ：GitHub Action可以自動執行自定義的腳本完成預先設定的工作。用戶需要設置觸發條件（事件）及條件滿足時的命令，GitHub就可以自動完成預設的操作，例如當有更新合併到master/main分支時，自動執行測試腳本檢查錯誤。下圖展示了GitHub Action執行時的組件：

GitHub Action使用YAML定義觸發的事件、工作和步驟，工作流文件需要存放在代碼倉庫中的特定位置：.github/workflows。issues-helper和markdownlint是目前github使用量較多的倉庫管理工具，分別提供了issue自動評論功能以及markdown鏈接檢查功能，按照官方所給文檔進行如下圖的配置：

jobs:    creat-comment:        run-on: ubuntu-latest        steps:            - name: Create comment              uses: action-cool/issues-helper@v3              with:                  actions: 'create-comment'                  token: ${{ secrets.GIHUB_TOKEN }}                  issue-number: ${{github.event.issue.number}}                  body: |                      welcome to the Linkis community!!

jobs:    markdownlint:        name: Markdown        run-on: ubuntu-latest        steps:            - uses: actions/[email protected]            - uses: actions/[email protected]              with:                  node-version: 14            - run: npm install -g [email protected]            - run: markdownlint '**/*.md' --ignore node_modules

    

• Name：定義了工作流的名稱，此處爲持續集成（Continous Integration, CI)
• On：爲觸發工作流的事件，此處定義爲更新推送到main分支時需要執行命令。
• J obs： 裏定義了工作任務，deploy爲工作的名稱，在GitHub的Ubuntu Linux虛擬機上運行一系列步驟。
• Uses： 後接GitHub Action集市裏的action。 這裏也使用了action來check out倉庫並將代碼下載到運行代碼的服務器上。

自動關閉關聯issue ：對於自動關閉關聯issue功能，github action 找不到滿足需求的第三方action，可以自己動手編寫滿足自己需求的action。自定action需要在.github目錄下新建一個actions目錄，然後再新建一個自定的action名稱的目錄。每個action都需要有一個action.yml的配置文件，action.yml的runs段制定了操作的啓動方式。啓動方式可以分爲三種：運行 Node.js腳本，運行Docker鏡像，運行組合腳本。下面說明action.yml的常用參數：

• name: 自定action的名字
• description: 對action需要傳入的參數或者輸出進行聲明
• inputs: 自定需要輸入的參數
• outputs: 輸出的變量
• runs: 啓動方式

環境的配置上這裏採用docker技術來實現。image 指定鏡像啓動需要的Dockerfile，這裏指定爲項目根目錄下的Dockerfile文件，在 Dockerfile中，用ENTRYPOINT或者CMD指定啓動的腳本。 具體的action.yml如下圖所示：

# github action 的名稱name: "Auto_close_associate_issue"# 該action的描述description: "Auto close an issue which associate with a PR."
#定義需要輸入的參數inputs:  # 第一個參數名叫prbody  prbody:     #對該參數名的描述    description: "The body of the PR to search for related issues"    # 必須參數    required: true
outputs:  #輸出的參數名  issurNumber:    description: "The issue number"
runs:  # 使用docker鏡像  using: "docker"  image: "Dockerfile"

接下來是編寫腳本文件，在這我使用node.js來編寫腳本，此腳本的思路是：先從環境中獲取變量值，抽取出issue編號再輸出到環境中，對應的腳本（取名爲main.js）如下圖所示：

// 獲取環境變量，所有傳給github action的參數一律大寫，且需要加上INPUT_前綴，此處是github規定的let body = process.env['INPUT_PRBODY']; // 利用正則表達式抽取出issue編號數字let pattern = /#\d+/;let issueNumber = body.match(pattern)[0].replace('#', '');// 輸出到環境中console.log(`::set-output name=issueNumber::${issueNumber}`);

重定向問題：官網採用的是docusaurus框架開發，docusaurus會將所有的markdown文檔轉換爲原始的html頁面，將所有版本頁面打包後存儲在對應的版本文件夾。其/latest所指向的文檔是最新的版本，例如1.1.1版本存儲在latest文件夾中，所有用戶在瀏覽網頁時在url地址欄輸入/1.1.1無法進入最新的文檔頁面。解決辦法就在於將latest文件夾下的內容複製一份到1.1.1文件夾下即可。當然爲了更加方便日後的使用，官方也爲該需求提供了一個插件實現重定向功能，原理與我上述一致，只需要在docusaurus.config.js 中配置即可，配置如圖所示：

[    '@docusaurus/plugin-client-redirects',    {      createRedirects(existingPath) {          if(existingPath.includes('/latest')){              return [existingPath.replace('/latest', '/1.2.0')]          }          return undefined;      }    }]

寄語欄頁面開發：該頁面主要展示用戶對Linkis社區的寄語。使用json格式的文件存儲用戶寄語、職業信息以及github賬號信息，點擊頭像可轉到該用戶的 github 主頁。當寄語的數量較多時，使用分頁分解數據，一個頁面可容納 10~20 個寄語，用戶點擊頁碼可以跳轉至目標頁。該頁面需要有對應的英文版本。具體效果展示如圖所示：

主項目管理臺頁面：前端管理臺頁面的開發主要使用form-create組件實現，數據源環境表單提交的效果實現效果如圖所示：

數據源環境需要實現下拉選擇，只需要配置form-create組件的rule屬性即可，選擇select組件，根據綁定的on-change事件檢測當前環境是否支持keytab上傳，這裏配置了upload組件用於文件上傳。 利用on-success事件監聽上傳成功後服務器響應的數據，並自動填寫keytab參數。 前端二級菜單也進一步優化了展示效果，例如支持二級菜單收展以及表單自動清空功能。

全部徵文內容可以“複製鏈接到瀏覽器”或者點擊“閱讀原文 ”瞭解！https://github.com/apache/incubator-linkis/discussions/categories/solicit-articles-%E5%BE%81%E6%96%87

— END —

如何成爲社區貢獻者

1 ► 官方文檔貢獻。發現文檔的不足、優化文檔，持續更新文檔等方式參與社區貢獻。通過文檔貢獻，讓開發者熟悉如何提交PR和真正參與到社區的建設。參考攻略：保姆級教程：如何成爲Apache Linkis文檔貢獻者

2 ► 代碼貢獻。我們梳理了社區中簡單並且容易入門的的任務，非常適合新人做代碼貢獻。請查閱新手任務列表：https://github.com/apache/incubator-linkis/issues/1161

3 ► 內容貢獻：發佈WeDataSphere開源組件相關的內容，包括但不限於安裝部署教程、使用經驗、案例實踐等，形式不限，請投稿給小助手。例如：

• 技術乾貨 | Linkis實踐：新引擎實現流程解析

• 技術乾貨 | Prophecis保姆級部署教程

• 徵文投稿 | Apache Linkis (Incubating)  +DSS 的編譯到部署
  

4 ► 社區答疑：積極在社區中進行答疑、分享技術、幫助開發者解決問題等；

5 ► 其他：積極參與社區活動、成爲社區志願者、幫助社區宣傳、爲社區發展提供有效建議等；

本文分享自微信公衆號 - WeDataSphere（gh_273e85fce73b）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。