Skip to content

migrate: 修正 SCSS、i18n 文字內容與語言切換顯示#71

Merged
nonumpa merged 8 commits intomainfrom
migrate/style-and-i18n-fixes
Mar 24, 2026
Merged

migrate: 修正 SCSS、i18n 文字內容與語言切換顯示#71
nonumpa merged 8 commits intomainfrom
migrate/style-and-i18n-fixes

Conversation

@tony140407
Copy link
Copy Markdown
Contributor

@tony140407 tony140407 commented Mar 19, 2026

變更內容

本 PR 包含三類修正,均從 Jekyll 版本遷移至 Hugo:

1. SCSS 相容性修正

  • carousel.scss:將 rgb(0 0 0 / %) 現代語法改為 rgba() 相容語法
  • reset.scss:將 margin: 0 移至 nested rule 之前,修正 Sass Deprecation Warning
  • typography.scss:將 &:lang() 區塊移至 :root 結尾處,同上

2. i18n 文字內容修正

  • button-and-link:英文版第三顆按鈕文字 CancelNext
  • checkable:英文版新增 Authentication method、TW FidO authentication 等翻譯;Health card ID 更正為 NHI Card
  • form:選項欄位與簡易欄位的英文 i18n 選擇器與翻譯擴充(NHI Card、Taipei、New Taipei、Keelung 等)

3. Live Example 語言切換功能修正(Hugo 端 bug)

  • live-example.html shortcode 未將 i18ni18n_selector 傳入 example.html,導致語言選擇器完全不顯示
  • example.htmlwith .i18n 區塊內取不到 Site 參數,導致語言選項名稱空白

nonumpa and others added 7 commits March 19, 2026 11:32
Ported from tmp/0726 f3f587e
…ar after nested

rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

Ported from tmp/0726 cbb8f77
Ported from tmp/0726 185f776 + 5355e56
(checkable/_index.md and radios-with-extra-elements.html already reflected in Hugo main)
… with given exectly one selector

Ported from tmp/0726 1867956
(main.js and form-elements.html already reflected in Hugo main)
live-example.html was not forwarding i18n and i18n_selector to the
example.html partial, so the language selector never rendered.

Also fix $.i18n_selector reference inside with .i18n block where
the dot context changes to the i18n string.
@gemini-code-assist
Copy link
Copy Markdown

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此 PR 旨在將 Jekyll 版本的修正遷移至 Hugo 環境,主要處理了 SCSS 樣式表的相容性問題、國際化 (i18n) 文字內容的擴充與修正,以及修復了 Live Example 語言切換功能中的 Hugo 端錯誤,確保網站功能和顯示的正確性。

Highlights

  • SCSS 相容性與語法修正: 更新了 carousel.scss 中的 rgb() 顏色語法為 rgba() 以提高相容性;在 reset.scsstypography.scss 中調整了 margin: 0&:lang() 區塊的位置,以解決 Sass 棄用警告。
  • i18n 文字內容擴充與修正: 修正了 button-and-link 中英文按鈕文字 'Cancel' 為 'Next';擴充了 form 相關檔案中的 i18n 選擇器和翻譯內容,新增了多個英文翻譯選項,如 'NHI Card'、'Taipei' 等。
  • Live Example 語言切換功能修復: 解決了 Hugo 環境下 Live Example 語言切換功能的錯誤,確保 live-example.html shortcode 正確傳遞 i18ni18n_selector 參數至 example.html,並修正了 example.html 中 Site 參數的存取方式,使語言選項名稱能正常顯示。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 19, 2026

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

您好,感謝您對 SCSS、i18n 文字以及語言切換功能的修正。

這次的 Pull Request 包含多項重要的遷移與修正:

  • SCSS 相容性:透過調整 rgb() 語法及樣式規則順序,解決了 Sass 的棄用警告,提升了程式碼的相容性。
  • i18n 內容擴充:更新了按鈕和表單的英文翻譯,使多語系支援更完整。
  • Hugo 模板修正:修復了 live-example shortcode 中 i18n 參數傳遞的 bug,讓語言切換功能恢復正常。

整體而言,這些都是很棒的改進。我只在 content/components/form/_index.md 中發現一個與無效 HTML 相關的小問題,並提供了一則評論建議。請再確認一下。謝謝!

### 簡易欄位

{{< live-example partial="form/form-elements.html" i18n_selector="[for=name],[for=city],[for=desc]" i18n="en-US:Full name,City of residence,Description" >}}
{{< live-example partial="form/form-elements.html" i18n_selector="[for=name],[for=city],[for=desc],[for=select],[for=taipei],[for=newtaipei],[for=keelung]" i18n="en-US:Full name,City of residence,Description,Select,Taipei,New Taipei,Keelung" >}}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

您好,您在 i18n_selector 中加入的 [for=select], [for=taipei], [for=newtaipei], [for=keelung] 選擇器,目標是 layouts/_partials/form/form-elements.html 裡的 <option> 元素。

然而,HTML 標準中 <option> 標籤並不支援 for 屬性,這屬於無效的 HTML。這可能會導致 i18n 功能不如預期,或在未來無法正常運作。

一個更穩健的做法是修改 layouts/_partials/form/form-elements.html,將 <option> 上的 for 屬性換成有效的屬性(例如 id),然後在這裡更新 i18n_selector

例如,若 form-elements.html 改為:

<option id="taipei">台北市</option>

此處的選擇器就應對應更新為 #taipei

由於 form-elements.html 不在此次 PR 的範圍內,建議可以開立新的 issue 或 PR 來追蹤並修正這個底層的 HTML 問題,以確保元件的正確性與長期維護性。

@nonumpa nonumpa changed the title migrate: 修正 SCSS、i18n 文字內容與語言切換顯示(tmp/0726 → main) migrate: 修正 SCSS、i18n 文字內容與語言切換顯示 Mar 19, 2026
- 移除 i18n 值末尾多餘的分號,避免程式解析錯誤。
- 修正 i18n_selector 從 [for=] 改為 [value=] 以正確對應 <option> 元素
@tony140407 tony140407 force-pushed the migrate/style-and-i18n-fixes branch from d265277 to eeeaeaf Compare March 19, 2026 06:46
@nonumpa nonumpa merged commit af3bc69 into main Mar 24, 2026
7 checks passed
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.

2 participants