Chapter 2. Addon Basics -- frontend

1.1 frontend 資料夾介紹

在HydroOJ套件中如果需要注射前端頁面就需要建立frontend資料夾

my-addon/
├── frontend/
    ├── \[a-zA-Z0-9_\]+.page.tsx

其檔名格式為\[a-zA-Z0-9_\]+.page.tsx (其中\[a-zA-Z0-9_\]為正規表達式代表英文字母大小寫、數字、底線的任意組合) 只要符合此格式的檔案都會被HydroOJ識別為前端頁面檔案並運行

1.2 page.tsx 檔案介紹

I. 頁面檔案結構

import { addPage, NamedPage, AutoloadPage } from '@hydrooj/ui-default';
addPage(new AutoloadPage('SomeNameIGuess', () => {
  console.log('This will appear on every page load!');
}));
addPage(new NamedPage(['homepage'], async () => {
  console.log('This will appear on `homepage` page load!');
}));

addPage：用來注射頁面的函式
AutoloadPage：用來注射到所有頁面的頁面類別
NamedPage：用來注射到指定頁面的頁面類別如何查詢頁面名稱在瀏覽器打開你想注射的頁面後開啟開發者工具DevTools(F12) 在元素Elements標籤中查看最外圍<html>標籤的data-page屬性即可看到頁面名稱

II. 注射 HTML/body

我們可以使用document物件來操作DOM 進行HTML/body的注射

import { addPage, NamedPage } from '@hydrooj/ui-default';
addPage(new NamedPage(['homepage'], async () => {
  const newDiv = document.createElement('div');
  newDiv.innerHTML = '<h1>Hello, HydroOJ!</h1>';
  document.body.prepend(newDiv); // 將新元素注射到body的最前面
}));

也可以使用其他DOM操作方法來進行注射如appendChild、insertBefore等這裡就是js的基本DOM操作方法了可以參考相關的js教學來學習更多之後程設班官網應該也會有相關的教學文章

其他資源

如果你會需要request其他資源 (如API資料等) 你可以使用fetch函式來進行HTTP請求

import { request } from '@hydrooj/ui-default/utils/base';

request.get('/hitokoto').then(response => {
    console.log(response.data);
});

這會向/hitokoto發送GET請求並在收到回應後將回應資料輸出到控制台 (位置是在HydroOJ伺服器的根目錄下) 可以參考HydroOJ的repo 這邊元件幾個其他會用到的套件

套件名稱	作用說明	位置
request	用來進行HTTP請求	`@hydrooj/ui-default/utils/base`
i18n('文字的key值')	用來進行多國語系翻譯	`@hydrooj/ui-default/utils/base`

如果有其他想補充的資源/元件可以在下方留言告訴我們謝謝！

參考資料

草貓

第十四屆進階教學 aka.架網站的那個

Addon Basics -- frontend

1.1 frontend 資料夾介紹​

1.2 page.tsx 檔案介紹​

I. 頁面檔案結構​

II. 注射 HTML/body​

參考資料​

草貓

1.1 frontend 資料夾介紹

1.2 page.tsx 檔案介紹

I. 頁面檔案結構

II. 注射 HTML/body

參考資料