From efcda2000bcd4cdce7f46fa0c5ef701139e6d660 Mon Sep 17 00:00:00 2001 From: tony140407 Date: Tue, 9 Jun 2026 11:56:35 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(components):=20=E6=8F=90=E4=BE=9B=20ma?= =?UTF-8?q?in.css=20=E7=9B=B4=E6=8E=A5=E5=BC=95=E7=94=A8=E8=88=87=20SCSS?= =?UTF-8?q?=20source=20zip=20=E5=85=A9=E7=A8=AE=20CSS=20=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E6=83=85=E5=A2=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 一般使用：以 `` 引用或下載 main.css 後置於專案 - 進階使用：下載 scss-source.zip，於 SCSS pipeline 中自選元件 import - JS 元件以 ES module 載入，下載連結於各元件頁面 - 部署流程於 hugo build 後將 assets/css 打包為 public/zip/scss-source.zip --- .github/workflows/build.yml | 8 ++++ .github/workflows/deploy-to-gh-pages.yml | 8 ++++ content/components/_index.md | 40 +++++++++++--------- readme.md | 46 ++++++++++++----------- static/zip/css.zip | Bin 11010 -> 0 bytes 5 files changed, 64 insertions(+), 38 deletions(-) delete mode 100644 static/zip/css.zip diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index b7667b22..6689d56b 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -31,6 +31,14 @@ jobs: TARGET_URL="https://storage.googleapis.com/guide-dev/${{ github.run_id }}" hugo build --minify --baseURL "$TARGET_URL" + - name: Package SCSS source for download + run: | + mkdir -p ./public/zip ./_scss-source-stage/svgs + cp -r assets/css ./_scss-source-stage/css + cp static/svgs/downarrow.svg static/svgs/uparrow.svg ./_scss-source-stage/svgs/ + (cd ./_scss-source-stage && zip -r ../public/zip/scss-source.zip . -x '*.DS_Store' -x '*/.*') + rm -rf ./_scss-source-stage + - name: Archive production artifacts uses: actions/upload-artifact@v4 with: diff --git a/.github/workflows/deploy-to-gh-pages.yml b/.github/workflows/deploy-to-gh-pages.yml index 9cf348f1..2ee73b79 100644 --- a/.github/workflows/deploy-to-gh-pages.yml +++ b/.github/workflows/deploy-to-gh-pages.yml @@ -41,6 +41,14 @@ jobs: run: | hugo --minify --config hugo.toml + - name: Package SCSS source for download + run: | + mkdir -p ./public/zip ./_scss-source-stage/svgs + cp -r assets/css ./_scss-source-stage/css + cp static/svgs/downarrow.svg static/svgs/uparrow.svg ./_scss-source-stage/svgs/ + (cd ./_scss-source-stage && zip -r ../public/zip/scss-source.zip . -x '*.DS_Store' -x '*/.*') + rm -rf ./_scss-source-stage + - name: Archive production artifacts uses: actions/upload-artifact@v4 with: diff --git a/content/components/_index.md b/content/components/_index.md index 26f89f41..4658f5f0 100644 --- a/content/components/_index.md +++ b/content/components/_index.md @@ -9,7 +9,9 @@ weight: 20 ### CSS 元件使用方式 -可直接[下載]({{< relURL "zip/css.zip" >}})，並使用下方程式碼匯入： +#### 一般使用 + +直接以 `` 引用或下載 [main.css]({{< relURL "main.css" >}}) 後置於專案靜態資源資料夾，並使用下方程式碼匯入： {{< code-example content=`` >}} @@ -21,32 +23,36 @@ weight: 20

-#### 多國語系支援 - -請依照[多國語系支援]({{< ref "visual/internationalization/_index.md" >}})另外包含所需要的字體 CSS 檔案。 +#### 進階使用（SCSS） -### JavaScript 元件使用方式 +若專案具備 SCSS build pipeline，可下載 [scss-source.zip]({{< relURL "zip/scss-source.zip" >}})，解壓後內含： -#### [文字輸入區塊]({{< ref "components/textarea/_index.md" >}}) +- `css/` — SCSS 元件原始碼 +- `svgs/` — 元件樣式所引用的 SVG 圖示（如 `accordion`） -下載 [character-count.js]({{< relURL "js/components/character-count.js" >}}) 檔案並選擇性使用下方程式碼匯入： +部分元件 CSS 透過相對 URL（例如 `url("svgs/downarrow.svg")`）引用圖示，部署時請將 `svgs/` 置於與編譯後 CSS 相同層級，確保路徑可正確解析。 -{{< code-example content=`` >}} +將進入點 `.scss` 置於 `css/` 目錄內（或以 `sass --load-path=css` 編譯），即可依需求 import 所需元件： -#### [公文元件]({{< ref "components/official-document/_index.md" >}}) +{{< code-example content=`@import "variables"; +@import "color"; +@import "typography"; +@import "components/accordion"; +@import "components/modal";` >}} -下載 [official-document-element.js]({{< relURL "js/components/official-document-element.js" >}}) 檔案並選擇性使用下方程式碼匯入： +#### 多國語系支援 -{{< code-example content=`` >}} +請依照[多國語系支援]({{< ref "visual/internationalization/_index.md" >}})另外包含所需要的字體 CSS 檔案。 -#### [互動資料表格]({{< ref "components/table/_index.md" >}}) +### JavaScript 元件使用方式 -下載 [interactive-table-element.js]({{< relURL "js/components/interactive-table-element.js" >}}) 檔案並選擇性使用下方程式碼匯入： +各 JS 元件採 Web Components / Custom Elements 設計，獨立分檔，使用時依需個別下載。所有 JS 元件統一以 ES module 載入： -{{< code-example content=`` >}} +{{< code-example content=`` >}} -#### [跳至主要內容區]({{< ref "components/skip-to/_index.md" >}}) +例如： -下載 [skip-to-element.js]({{< relURL "js/components/skip-to-element.js" >}}) 檔案並選擇性使用下方程式碼匯入： +{{< code-example content=` +` >}} -{{< code-example content=`` >}} +各 JS 元件的下載連結與完整使用方式，請參考左側選單中對應的元件頁面。 diff --git a/readme.md b/readme.md index a5c83253..6f6e2efa 100644 --- a/readme.md +++ b/readme.md @@ -6,7 +6,9 @@ ## CSS 元件使用方式 -可直接[下載](https://guide.nics.nat.gov.tw/assets/css.zip)，並使用下方程式碼匯入： +### 一般使用 + +直接以 `` 引用或下載 [main.css](https://guide.nics.nat.gov.tw/main.css) 後置於專案靜態資源資料夾，並使用下方程式碼匯入： ``` @@ -17,44 +19,46 @@ > [!WARNING] > 本檔案暫時包含 Tachyons，作為 Atomic CSS 的第三方程式。 -### 多國語系支援 +### 進階使用（SCSS） -請依照[多國語系支援](https://guide.nics.nat.gov.tw/visual/internationalization/index.html)另外包含所需要的字體 CSS 檔案。 +若專案具備 SCSS build pipeline，可下載 [scss-source.zip](https://guide.nics.nat.gov.tw/zip/scss-source.zip)，解壓後內含： -## JavaScript 元件使用方式 +- `css/` — SCSS 元件原始碼 +- `svgs/` — 元件樣式所引用的 SVG 圖示（如 `accordion`） -### [文字輸入區塊](https://guide.nics.nat.gov.tw/components/textarea/index.html) +部分元件 CSS 透過相對 URL（例如 `url("svgs/downarrow.svg")`）引用圖示，部署時請將 `svgs/` 置於與編譯後 CSS 相同層級，確保路徑可正確解析。 -下載 [character-count.js](https://guide.nics.nat.gov.tw/js/components/character-count.js) 檔案並選擇性使用下方程式碼匯入： +將進入點 `.scss` 置於 `css/` 目錄內（或以 `sass --load-path=css` 編譯），即可依需求 import 所需元件： +```scss +@import "variables"; +@import "color"; +@import "typography"; +@import "components/accordion"; +@import "components/modal"; ``` - ``` -### [互動資料表格](https://guide.nics.nat.gov.tw/components/skip-to/index.html) - -下載 [skip-to-element.js](https://guide.nics.nat.gov.tw/js/components/skip-to-element.js) 檔案並選擇性使用下方程式碼匯入： +例如： ``` - + ``` +各 JS 元件的下載連結與完整使用方式，請參考 [共用元件](https://guide.nics.nat.gov.tw/components/index.html) 各元件頁面。 + ## 開發 ``` diff --git a/static/zip/css.zip b/static/zip/css.zip deleted file mode 100644 index be624268baf22ce8e9051cc34b47ec96ff75bff8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11010 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�_-H8jRjp$9Nt8EyKBF+Zr@CFwR`PR%n}o@1nfJxM&;F3WTKc3NBhY!m8fRwI{v zo8Sim06d+dj5r7=D%js|Ts^|z4>{y}y8KuBSN~G{a|7%79?;VU)=$au68&BAf3c7C z)A=VGPa8$g8T+S=qMwrGwfK0u&z%1Yt@-cd$N#Zk^xWvvGQe|Q^@%q6DOq0ekMpo+ zM*s0@z;g>v{Oofg^ogJSDOp~IFMhM|m)rU^5cxmY+UMq;*wyC@*%Q0^Q?k6!A2%VM z-OxYhTA!PEqS~G_R=+-jwLcPQ|}|7PL;!-G9H`ZVf%KDc@s zb^eqruTGTTjQ;n7&*!F|CSlKq48K1?M6};c{nNSFa|=(yiszm7)3D;FWO)r^{AS_5 z9$h@Q^psVeXUV6|{ikGkQDXuAaUcKhTAydJrwsd3vb^R90slPT{=3@e!Sg8v{*)}Q e2qM6Lmk?#dAs! Date: Tue, 9 Jun 2026 13:36:18 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(components):=20=E6=96=B0=E5=A2=9E=20js?= =?UTF-8?q?-components.zip=20=E4=B8=80=E6=AC=A1=E5=8F=96=E5=BE=97=E6=89=80?= =?UTF-8?q?=E6=9C=89=20JS=20=E5=85=83=E4=BB=B6=E5=8E=9F=E5=A7=8B=E7=A2=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CI 部署時將 static/js/components/ 打包為 public/zip/js-components.zip - 文件以「個別元件頁面」陳述 JS 元件詳細用法位置，避免依賴版面位置描述 --- .github/workflows/build.yml | 3 ++- .github/workflows/deploy-to-gh-pages.yml | 3 ++- content/components/_index.md | 6 +++--- readme.md | 6 +++--- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 6689d56b..1948f54b 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -31,13 +31,14 @@ jobs: TARGET_URL="https://storage.googleapis.com/guide-dev/${{ github.run_id }}" hugo build --minify --baseURL "$TARGET_URL" - - name: Package SCSS source for download + - name: Package source for download run: | mkdir -p ./public/zip ./_scss-source-stage/svgs cp -r assets/css ./_scss-source-stage/css cp static/svgs/downarrow.svg static/svgs/uparrow.svg ./_scss-source-stage/svgs/ (cd ./_scss-source-stage && zip -r ../public/zip/scss-source.zip . -x '*.DS_Store' -x '*/.*') rm -rf ./_scss-source-stage + (cd static/js && zip -r ../../public/zip/js-components.zip components -x '*.DS_Store' -x '*/.*') - name: Archive production artifacts uses: actions/upload-artifact@v4 diff --git a/.github/workflows/deploy-to-gh-pages.yml b/.github/workflows/deploy-to-gh-pages.yml index 2ee73b79..c172b65e 100644 --- a/.github/workflows/deploy-to-gh-pages.yml +++ b/.github/workflows/deploy-to-gh-pages.yml @@ -41,13 +41,14 @@ jobs: run: | hugo --minify --config hugo.toml - - name: Package SCSS source for download + - name: Package source for download run: | mkdir -p ./public/zip ./_scss-source-stage/svgs cp -r assets/css ./_scss-source-stage/css cp static/svgs/downarrow.svg static/svgs/uparrow.svg ./_scss-source-stage/svgs/ (cd ./_scss-source-stage && zip -r ../public/zip/scss-source.zip . -x '*.DS_Store' -x '*/.*') rm -rf ./_scss-source-stage + (cd static/js && zip -r ../../public/zip/js-components.zip components -x '*.DS_Store' -x '*/.*') - name: Archive production artifacts uses: actions/upload-artifact@v4 diff --git a/content/components/_index.md b/content/components/_index.md index 4658f5f0..07bd577a 100644 --- a/content/components/_index.md +++ b/content/components/_index.md @@ -46,7 +46,9 @@ weight: 20 ### JavaScript 元件使用方式 -各 JS 元件採 Web Components / Custom Elements 設計，獨立分檔，使用時依需個別下載。所有 JS 元件統一以 ES module 載入： +各 JS 元件獨立分檔，每個元件的下載連結與詳細用法請參考個別元件頁面。如需一次取得全部，可下載 [js-components.zip]({{< relURL "zip/js-components.zip" >}})。 + +所有 JS 元件統一以 ES module 載入： {{< code-example content=`` >}} @@ -54,5 +56,3 @@ weight: 20 {{< code-example content=` ` >}} - -各 JS 元件的下載連結與完整使用方式，請參考左側選單中對應的元件頁面。 diff --git a/readme.md b/readme.md index 6f6e2efa..2cbf3263 100644 --- a/readme.md +++ b/readme.md @@ -44,7 +44,9 @@ ## JavaScript 元件使用方式 -各 JS 元件採 Web Components / Custom Elements 設計，獨立分檔，使用時依需個別下載。所有 JS 元件統一以 ES module 載入： +各 JS 元件獨立分檔，每個元件的下載連結與詳細用法請參考 [共用元件](https://guide.nics.nat.gov.tw/components/index.html) 各元件頁面。如需一次取得全部，可下載 [js-components.zip](https://guide.nics.nat.gov.tw/zip/js-components.zip)。 + +所有 JS 元件統一以 ES module 載入： ``` @@ -57,8 +59,6 @@ ``` -各 JS 元件的下載連結與完整使用方式，請參考 [共用元件](https://guide.nics.nat.gov.tw/components/index.html) 各元件頁面。 - ## 開發 ```