Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

自動產生遊戲總表 #24

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Conversation

danny0838
Copy link

@danny0838 danny0838 commented Jan 6, 2024

試做了一個自動產生遊戲總表的功能,來提案看看:

  1. 進入測試頁 或進入主頁後點擊「遊戲總表」連結進入。
  2. 進入頁面後,會自動用 AJAX 載入目錄中的遊戲列表頁面,產生遊戲總表。
  3. 點擊總表表頭的各欄位可以排序。截圖如下:
    圖片
    分類是根據載入的頁面和表格順序自動產生,由於文字比較長,因此用序號表示,滑鼠移過會顯示完整名稱。

補充說明:

  1. 使用這個自動產生的總表,以後加入新遊戲或修改舊遊戲資訊只需更新各分表,不必另外手工更新遊戲總表、簡表。
  2. 內建排序功能 (按 UTF-16),以後表格的排序可直接交給電腦,省下排序的工夫,照自己可以接受的內在邏輯大概排一下即可。畢竟人工排序容易出錯,況且中文沒有統一的順序,無論是用 Big5、UTF-8、甚至注音、筆劃、倉頡碼等方式排序,都無法保證滿足所有人的需求。而且大多數使用者應該會直接搜尋,排得再好意義也不大。此外手工排序只能有一種順序,但自動排序可以有多種排序方式,對於有依評價、年代、公司等方式排序需求的使用者較方便。
  3. 雖然需要用到樣式表和腳本,但全部都是內嵌在 list.htm 頁面,不影響其他頁面。未來若不想用直接刪除即可,非常綠色。刪除時找個瀏覽器把產生排序好的總表的HTML碼複製出來再稍作整理,即可得到排序好的手工總表。
  4. 部分頁面內容格式要稍作微調,以配合自動化總表:
    1. menu.htm 需要讓總表載入的表格連結要加上 class="toc"
    2. 各分表表格前的標題改為表格中的 caption,以便讓總表可自動載入表格分類。(不改也行,但分類就只會有序號而無名稱)
    3. 各分表中比較複雜的欄位需要人工標記資料,排序時才能取到正確數值。目前設計可用 <data>值</data><data value="值">顯示文字</data> 標記用於機器排序的值。(不改也行,但有些項目就會排序錯誤)
  5. 實測掛在 GitHub Pages 載入、排序速度都相當快,無論是電腦或手機,數秒內即可完成,而即使第一次載入較慢,之後載入由於各分表頁面已有快取,載入就會比較快。
  6. 有個小缺點是此技術使用 AJAX 載入內容,檔案放在本機時會受到同源政策影響而無法載入,如要在本機測試,須自架本機伺服器,或調整瀏覽器設定以關閉同源政策對 file URL 的嚴格限制:
    • Chromium 系(包括 Google Chrome、79 版以後的 Edge 等): 建立瀏覽器應用程式的捷徑,在執行檔路徑後加上參數 --allow-file-access-from-files
    • Firefox 系(包括 Tor Browser 等): 於網址列輸入 about:config,搜尋 security.fileuri.strict_origin_policy 將值改為 false

    這些設定會增加上網風險,建議使用獨立的瀏覽器帳號/設定檔、或瀏覽器程式,和平常上網的瀏覽器分開。

目前只是初版,如有細節需要改善或調整,都還可以再研究。

@danny0838 danny0838 force-pushed the search branch 9 times, most recently from 97b4e8b to abc1e7f Compare January 11, 2024 13:07
(Notepad++)
檔案: game/game/*.htm (不包含子資料夾)
尋找: <div style="text-align:\s*center;\s*color:\s*#800000;\s*font-family:\s*標楷體;">\s*<b><big><big>((?:(?!</).)*)</big></big></b>\s*</div>\s*((?:<small>\s*)?<table[^<>]*>)
取代為: $2\n<caption style="text-align:center; color:#800000; font:bold 1.8em 標楷體;">$1</caption> (\n 或須改為 \r\n)

取消修改 game/game/list-1.htm
(Notepad++)
檔案: game/game/*.htm (不包含子資料夾)
尋找: <p>\s*(<small>)
取代為: <p></p>\n\n\1 (\n 或須改為 \r\n)
(Notepad++)
檔案: game/game/*.htm (不包含子資料夾)
尋找: (\d+CD(?:/\d+DVD)? \()([\d.]+)(?:\/([\d.]+))?\)
取代為: $1<data>$2</data>(?{3}/<data>${3}</data>)\)

取消修改 game/game/list-1.htm
(Notepad++)
檔案: game/game/*.htm (不包含子資料夾)
尋找: (\d+CD(?:/\d+DVD)?)(?=$|<)
取代為: $1<data>

取消修改 game/game/list-1.htm
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant