@site_name 部落格

Webconf 2025》看 AI 如何改變日常工作流程

peggy — Tue, 24 Mar 2026 08:55:36 +0000

去年「AI」這個詞大概席捲了所有人的生活，而這件事在去年年底參加 WebConf Taiwan 2025 時，感受尤其強烈。無論是工程師、設計師，或是是在相關產業任何一個角色，每個人的工作流程都正在被這波浪潮悄悄改寫。

發揮想像，讓 AI 會的更多

很多人對 AI 的想像還停留在「幫我潤稿」或「生成一張封面圖」，但這次大會讓我深刻感受到，AI 的滲透已經遠遠超過這個層次。工程師們正在用 AI 拆解問題、評估技術選型、撰寫程式碼；設計師用它快速產出多個方向的視覺概念；在專案管理工作中，從整理會議脈絡、追蹤待辦、一直到團隊內外協作，AI 都不再是偶爾借力的小工具，而是真正的工作夥伴。

用 AI 翻轉與客戶的洽談流程

大會中讓我印象最深刻的，是 AI 如何改變「與客戶溝通」這件事。傳統的洽談流程往往得先花時間整理會議記錄、準備簡報、反覆修改，光是讓客戶「看懂我們在說什麼」就耗掉大量的前置精力。更別說下一步，彼此還要反覆確認「我們說的是同一件事嗎？」一旦發現彼此牛頭不對馬嘴，只能摸摸鼻子，從頭來過。

現在不一樣了。與客戶開會前，先用 AI 快速生成一份可點擊的 PRP（Product Requirement Prototyping），作為拋棄式原型——從一開始就預設它是暫時的，目的是回答一個關鍵問題：「我們對這件事的理解是一致的嗎？」當客戶能直接看到、甚至操作一個具體的東西，討論的品質截然不同，共識也來得更快，過程從「下次會議再確認」變成「當場就能對焦」。

創造 NGO 服務流程的可能性

對於許多非營利組織的夥伴來說，AI 或許還感覺遙遠，但它能做的，其實比想像中更平易近人。

例如自動整理大量諮詢信件、協助撰寫計畫書草稿、翻譯跨語言的服務文件、分析數據找出資源最有效益的投入方向……這些應用或許不如生圖寫程式那樣吸睛，但對每天在前線繁忙的服務工作者來說，這是真正改變生活品質的事。AI 讓他們終於有餘力喘口氣，把省下來的時間留給最重要的事。

結語

帶著滿滿的筆記離開 WebConf 2025，心情一方面有點焦慮，覺得好像已經慢了半拍；但又有些期待，因為很多事情其實比想像中容易上手。這些講者們都在傳達一件事：面對這場AI革命不要害怕失敗，關鍵是保持一顆開放的心。

用這句話鼓勵自己和讀到這裡的你，我們就從手邊最煩的那件事開始試試看吧。

本篇文章由 AI 輔助撰稿。

文章分類:

網站建置

不追逐潮流，用心去做正確的事！Drupal 25 週年紀念文章分享

neema — Fri, 16 Jan 2026 06:43:41 +0000

圖片來源：Drupal Turns 25 Today

「Drupal 能有今天的成就，並非因為它追逐潮流，而是因為用心去做了正確的事。」

在變動極快的網絡時代，一個技術能存活 10 年實屬不易，而 Drupal 在 2026 年 1 月正式滿 25 歲了！

25年來，Drupal 深受數百萬網站信賴，並主要提供全球政府、頂尖大學及 NGO 組織最安全、靈活的技術後盾，能達到此一成就，在於 Drupal 團隊對技術韌性的堅持、對持續演進的追求以及做正確的事的深刻信念，而這正是開源技術的核心精神。

而我們作為在台灣長期深耕 Drupal 整合開發的團隊，也感到與有榮焉，時值 Drupal 25 周年，與大家分享Drupal 官方紀念文章「Drupal Turns 25 Today」，整理其發展成就及這份技術背後值得信賴的原因。

穩健的技術實力

Drupal 的強項在於結構化的內容管理、更精細的權限控管與審核機制、成熟的資安防護流程，讓網站更具客製化與開放性，能夠因應組織發展過程中，資料累積的適用性，這也是為什麼當客戶面臨高複雜度的網站需求時會首選 Drupal。

共享與傳承的社群文化

另一方面，Drupal 不僅技術強大，它的設計核心與文化更強調「共享與永續應用(sharing and reuse)」。在 Drupal 社群有來自全球的志工夥伴，開發出功能廣泛的 50,000 個模組並回饋給社群，這份力量仍持續滾動中。

以「人」為核心的平台

而共享與傳承的社群，驅使著從開發者、架構師、設計師，到內容編輯、行銷人員甚至是軟體公司的創辦人，各行各業的數位人才都在這個生態系中成長茁壯。對許多人來說，Drupal 是開啟數位管理的起點，更是他們深耕一輩子的志業。

我們的推薦

在台灣，我們持續使用 Drupal 為客戶解決複雜的數位挑戰。我們發現其「靈活性」能更好的適應組織成長，同時結合 netiCRM 支持者管理系統，Drupal 都能讓組織在穩健的架構下，守護自己的數位資產。最重要的是，我們也相信「投資在自由開放的軟體，才可累積永續。」

祝 Drupal 25 週年生日快樂！

了解更多：

閱讀 Drupal 官方 25 週年全文：Drupal Turns 25 Today
看看網絡行動科技如何利用 Drupal 協助您的組織：瀏覽我們的案例

非營利網站首頁攻略：從情感訴求到高轉換率的設計心法

neema — Mon, 20 Oct 2025 07:32:32 +0000

對非營利組織網站來說，網站不只是資訊發佈的平台，更是連結支持者、傳遞使命與驅動行動的數位核心。而網站首頁是潛在支持者初次接觸組織的地方，通常在短短數秒內，就決定他們在網站上的下一步行動，是瀏覽更多、按下捐款還是關注行動。

我們相信，每個非營利組織都擁有獨特且豐沛的情感訴求，只要善用本文幾個首頁設計技巧，將組織最有力的訴求突顯出來，就能有效提升網站的轉換率。

＊本文內容依據　TechSoup：How to Create High-Converting Homepages　課程影片整理，也歡迎大家收看、學習、交流。

留住訪客的黃金3秒，圖片、文案都準備好了嗎?

首先，請試著用一句話，快速傳達「我的組織要改變什麼？」

沒錯！首頁最引人注目的主視覺區，短短數秒就決定了訪客是離開還是留下，要做到的只有這三件事，過多的資訊都會干擾訪客資訊的接收：

高情感訴求的照片：以組織服務過程中的真實互動情境取代制式圖庫
找出組織的黃金敘事：用一句話快速傳達「我們是誰」、「我們在改變什麼」的資訊
搭配高度對比色、視覺突顯的「行動呼籲(CTA)」按鈕設計來強化使用者的下一步行動

圖說：由 NETivism 建置⌈聖道兒童之家⌋ 官網主視覺區，應用情感訴求強烈的照片搭配黃金敘事呈現組織亟欲改變的服務項目。

首頁的內容策略

當我們應用高情感訴求的圖像留住訪客，接下來便需要開始思考首頁的內容策略，讓組織價值更為彰顯，也讓訪客對組織使命留下深刻的印象，才能進一步轉化行動，以下提供 3 個組織可優先準備的首頁內容：

「我們在做什麼」：延續黃金敘事，以簡潔有力的使命宣言，讓訪客快速理解組織的核心價值
「我們已經做到什麼」：搭配情感圖像或數據，讓理念具象化，不只是口號，而是能被看見、被相信的事實。
「我們的影響力」：組織對整體環境、公益領域有多少社會影響力，都可以透過具體成果與行動里程碑來呈現，增加訪客的認同感。

圖說：由 NETivism 協助翻新的⌈台灣猛禽研究會⌋ 官網，即以簡潔有力的使命宣言，讓第一次瀏覽頁面的訪客也能迅速了解組織在做的事

圖說：由 NETivism 建置的⌈台灣之心⌋ 官網，應用數據將組織行動具象化，讓訪客快速感受組織行動影響力。

建立信任：讓訪客安心支持你

當訪客對組織有更多認識與認同後，只需要再來一點信任感，便有機會提升行動轉換率。

尤其在高度數位化的時代，捐款者線上捐款時，都會想知道他們的貢獻是否被有效運用，或者個人資訊是否會受到保護。也因此建立信任是多方面的，除了「社會證言」的內容呈現外，也需要十分留意「信任指標」，以下也提供兩者的檢視要點：

社會證言：像是受助對象分享、志工故事或是重要合作夥伴都是很好的社會證言內容
信任指標：舉凡瀏覽體驗、資訊安全、透明度報告都是信任指標的要素

圖說：由 NETivism 建置的⌈台灣基地協會⌋ 官網，在首頁呈現豐富的參與者心得回饋，讓服務內容與成果更值得信賴。

綜合以上，相信大家都能感受到非營利組織網站與商業網站最大的不同，就在於如何敘說一個創造社會價值與個人行動意義的故事，喚起人們對社會議題的關注與責任感。這也是為什麼視覺影像、理念宣言、證言在非營利組織網站尤為重要，首頁的每一張圖片、每一句文字、每一個按鈕，都是和支持者對話的關鍵。只要把握設計重點，就能讓網站是推動行動的引擎。

想要更有好地說出組織的故事？我們很樂意陪你把理念傳得更遠。

我們的服務：https://netivism.com.tw/service

我們的作品：https://netivism.com.tw/portfolio

文章分類:

網站建置

雲端開源的中文字型選項變多了！

poliphilo — Tue, 30 Sep 2025 12:05:13 +0000

大家好！可以使用的雲端開源繁體中文字型選項變更多了！自從 2014 年「思源黑體」首次發佈以來，已經過了 10 年以上的時間，在更早之前，網頁適用的中文字型選項很少，尤其是在面向 Windows 使用者時，在沒有額外預算的情況下，往往就只能用當時的系統預設字體「微軟正黑體」，而「思源黑體」的出現，讓大家增加了中文字型的選項，不過與英語系網站相比，能用的中文字型選項仍然很少。近期在準備字型相關分享的簡報時，發現 Google Fonts 上提供的繁體中文字型變多了！

目前完整支援繁體中文的字型有以下 11 個（截自 2025-09-30）

不過若是把 Google Font 上的簡體中文以及有漢字家族的日文、韓文也都算進去，那麼能用的字型就會增加很多。一般來說，由使用者自行上稿的文字強烈建議還是使用完整支援繁體中文的字型，而像是頁面一些特定文案或標題其文字內容在可控的狀況下，則可以考慮使用看看其他語言的文字。

將簡體中文以及有漢字家族的日文、韓文也都算進去的話會多出許多選項！（截圖來源：Google Fonts）

日文的 Rampart One 躍動活潑！（截圖來源：Google Fonts）

雲端字型服務平台

Google Fonts

Google Fonts 上的字型授權為開源（不過要使用前必須注意每個字型的授權條款並不一致），其服務穩定並支援多語系，若製作網站沒有非常充足的預算，又希望讓網站中的文字與網站整體視覺設計更契合，建議可以來 Google Fonts 上找找看有沒有適合的字型。

justfont

justfont 平台上有很多中文字型可以選擇，他們提供的字型設計常將台灣文化融入，並注重在地化和語言需求，例如支援台語拼音、地方語言字型等等。若是要商業使用，會需要購買對應的商業授權，除此之外，justfont 也有推出開源字型「Open 粉圓」，提供使用者下載，若要在網站上使用則需要自行託管。

justfont 商店上面提供的中文字型（截圖來源：justfont）

文鼎iFontCloud

文鼎iFontCloud 有很多中文字形可選擇，商用授權完整且支援多語系。

Adobe Fonts

Adobe Fonts 有大量的設計字型供選擇，且與自家的 Creative Cloud 有整合，不過中文字型相較英文等語言來說選項較少。

希望大家在製作網站時，都能找到適合的字型！

* 文章第一張圖為 Google Imagen 生成

使用 CSS 為文字加上裝飾背景與圖像

poliphilo — Mon, 30 Jun 2025 13:48:28 +0000

什麼是文字裝飾背景與圖像？

今天想跟大家分享一個在進行網站套版時很常遇到的一個需要處理的情境，為了讓標題或特定文字突出顯示，設計師會使用一些方法來區別一般文字段落。最基本的作法有調整文字顏色、字體、粗細與大小，為了讓畫面更美觀、更豐富與更貼近網站主題，設計師會為其加上一些裝飾元素，例如向量圖形、裝飾底線或符合主題的插畫圖像。在英語系網站中，比較接近的說法是「Text Highlighting」，這同樣是一種透過為文字加上背景顏色或效果以突出顯示的技術。

圖片來源：A CSS challenge: skewed highlight — Vadim Makeev

由於本文想分享的一些範例主要是透過圖像讓文字有更突出的顯示效果，因此我就先以「文字裝飾背景與圖像」來稱呼這種設計方法，常見的應用場景包括：

標題強調：可以為重要標題增加背景色來突出顯示
螢光筆效果：例如使用 `linear-gradient` 創造出類似螢光筆的標記效果
連結裝飾：例如使用底線搭配 `transition` 效果讓滑鼠懸停時有變化

以下為客戶網站實際範例

圖片來源：財團法人台灣關愛基金會使用簡約的底線為標題裝飾

圖片來源：親子天下教育創新中心使用品牌識別配色與圖像組合裝飾文字

圖片來源：社團法人雲林縣聽語障福利協進會使用Logo的元素來裝飾標題

CSS 常用技術與實際範例

使用 CSS 套版時，有很多方法可以裝飾文字使其突出顯示，這裡整理常見的技術如下供大家參考：

技術名稱	說明
`background-color`	為文字區塊設定背景色
`background-image`	為文字區塊設定背景圖片，可搭配 `linear-gradient` 或 `background-clip: text` 製作特效
`background-clip: text`	將背景限制在文字輪廓範圍內
`text-shadow`	新增陰影或光暈效果，產生立體感
`text-decoration`	為文字新增裝飾線條
`border`	為文字新增邊框
`box-decoration-break`	控制多行文字背景是否連續
`<mark>`	預設帶黃色背景
`::before` / `::after` + `position: absolute`	插入偽元素作為裝飾背景
`linear-gradient`	使用漸層色作為背景
`mask-image`	使用圖形遮罩達成文字特殊背景
SVG `<text>` + `<pattern>`	使用 SVG 定義圖案文字
`mix-blend-mode`	改變文字與背景的混合方式

遇到較複雜的效果時，在實作上我們常常會使用組合技來完成，我自己覺得以偽元素為主並搭配以下技術就是一個強大的組合，因為這些技術通常可以直接繪製出你要的效果而不需要任何圖片：

background-image
linear-gradient
transform
border-radius

實作範例放在 CodePen 如下提供大家參考

See the Pen CSS text with decoration by Poliphilo Chu (@Poliphilo-Chu) on CodePen.

告別網站建置迷思：許願前，先問「為什麼？」

peggy — Fri, 13 Jun 2025 11:24:50 +0000

多數架站專案的開場白，都是一句「請問可以幫我們做一個這樣那樣的網站嗎？」

有些客戶準備充分，身邊友人、ChatGPT早就調查過一輪；也有客戶還不知道自己想要什麼、該從哪開始說起。總之，初次見面總是難按計劃進行，往往客戶帶著答案紙來，又帶著問題集回去。

身為網站建置專案的PM，許多時候，比起快速出報價與排程，我們反而把時間花在辨別這些問題。

開了一堆功能清單，但真正需要的可能不是這些

當客戶初期攤開他的願望清單：會員系統、影片牆、多層分類、進階搜尋、登入區塊…這些聽起來都很棒，但深聊下去，才能知道這些「需求」背後真正的情境。

某個功能其實是從別人的網站看到覺得「應該也要有」，實際自己的支持者根本用不太到；還有是覺得可以讓內部管理方便，但太複雜反而沒人願意維護。每次討論這些東西的時候，其實更重要的是問一句：「為什麼想做這個？」

畢竟做網站的目的，是讓來的人找到他要的東西、留下他該做的事。

自己的網站，不只說我們想說的，還要說對方想看的

都說現代速食社會，一般人停留網頁的時間，可能比吃完一根薯條還短，點開當下不知道你是誰、不知道要看什麼，就直接關掉了。

這時候再多花俏的功能都沒用。使用者來網站，是帶著情境進來的：有人是從報章雜誌聽說你，好奇搜尋這個組織在幹嘛；有人是朋友轉貼，看一下你們辦的活動；也有人是想尋求幫助、直接報名/捐款或聯絡事情。

這些人訪問的理由、需要的節奏完全不同。如果網站的首頁或導航方式沒有對應到各自的路徑，那很容易讓人迷路或流失。

所以做網站之前，最重要的問題不是「要加什麼功能」，而是目標對象「從哪裡來？現在想幹嘛？」

找對目標，才能釐清需求、做出選擇、將資源用在更有意義的地方。

最後：網站只是關係的起點，不是全部

對很多非營利組織來說，「架網站」通常是階段性的任務，上線＝結案。但真正關鍵的是後續的日常工作：要有人維護、更新、推廣，讓網站成為組織與外界持續互動的一部分。

網站做出來了，只是開始。

如何讓人願意停留、願意回來，更是組織接下來要不斷面對的課題。

成為網站建置專案經理才滿一年，坦白說，一開始以為這份工作要做的是「會議記錄、給報價、催進度、催進度、催進度」。但回頭看這一年，最有價值的部分，其實是陪著客戶一起釐清需求、探索可能，一起把這個「開頭」做好，也期待組織能從這裡出發，越走越好。

如果你的組織正在規劃架一個網站、但還不知道怎麼開始聊需求，或是有點亂、不確定怎麼優先處理，也歡迎來聊聊。

我們的服務：https://netivism.com.tw/service
我們的作品：https://netivism.com.tw/portfolio

文章分類:

網站建置

社會企業的公益回饋與再投資：持續支持非營利與開源社群

lynn — Tue, 25 Feb 2025 16:22:15 +0000

你曾好奇過 NETivism 這個名稱的由來嗎？其實，這個名字源自我們對自身的期許──成為網路世界中的行動者（Net + Activism）。

自 2009 年成立以來，我們始終秉持「透過科技推動社會變革」的理念，致力於支持非營利組織（NPO）與開源社群。除了以自由軟體為基礎，協助非營利組織建立與時俱進的網站，也透過 netiCRM 支持者關係管理系統，幫助組織實現永續經營。我們更自 2011 年起，透過實際的捐贈行動，支持各式公益計畫與開源專案。

截至 2024 年，我們累計的公益捐贈總額已達 2,058,867 元，其中對非營利組織的捐款為 1,245,813 元，對開源專案的回饋則為 813,054 元。這些資源分配至不同面向的行動，期望透過實質支持，推動社會公益與技術創新並進。

公益支出概況

一、直接支持非營利組織

我們長期投入資源協助非營利組織成長與數位轉型，除了曾經長期投入心力與資源合辦的網路星期二，也參與多項專案及直接捐贈，包括：

2023年，與台灣一起夢想公益協會合作推動「夢想數位翼」領頭雁加速計畫，提供組織資金支持與 netiCRM 租用費回饋。
2024年，因應花蓮震災，捐助位於花蓮的 5 個在地非營利組織，支援組織的災後重建與服務持續。

二、回饋開源社群

開源技術是 NETivism 成立的根基，我們深知自由軟體與開源社群對社會創新的價值，因此從創立初期就積極投入資源，支持以下行動：

2011～2014 年：透過 Drupal Association Membership 贊助開源專案。

2014 年：響應友人號召，成為開放文化基金會創始捐助人
2014、2016、2018、2024 年：連續贊助 g0v summit，支持公民科技發展。
2021～2022 年：加入 CiviCRM Bronze Partner 計畫，支持開源 CRM 生態系。
2023～2024 年：捐助多個開源工具與社群，如 Redmine、LibreOffice、SLAT（中華民國軟體自由協會）

三、企業捐助與專案贊助

我們也持續以企業身份參與公益計畫與研究支持，具體作為包括：

2019～2020 年：發起「企業一七捐」計畫，媒合企業資源與非營利組織，協助提升募款效率與擴展支持者網絡。
2023年：支持公益責信協會發表《公益觀察 2023》，共同推動公益領域透明與責信。

持續作為公益與開源的後盾

NETivism 不只是科技公司，更是一個致力於社會變革的社會企業。未來，我們將持續依循公司章程，投入部分盈餘作為公益與開源的回饋基金，支持更多非營利組織與開源社群，攜手為社會創造正向改變。

如果您對這些公益計畫有興趣，或希望與我們一同參與這場社會變革，歡迎關注我們的網站與社群，一起為更好的未來努力！

年度客戶關懷：免費網站診療，持續優化服務

sharon — Mon, 06 Jan 2025 07:16:22 +0000

在 2024 年的尾聲，我們特別推出了一項專屬客戶的免費網站診療服務。
不僅是感謝大家對我們長期的支持，更希望藉由實際的行動，幫助 NPO 夥伴提升網站的使用體驗，使日常工作更加順暢。

為什麼推出免費診療服務？

網站對於組織的重要性，不僅是資訊傳遞的窗口，更是募款與支持者互動的關鍵平台。隨著時間的推移，網站難免會出現一些技術性問題，或是無法完全符合組織不斷變化的需求。因此，我們希望透過年底關懷的網站診療，主動幫助客戶發現並解決這些問題。

2024年底關懷信件中，我們邀請大家填寫問卷，分享網站目前遇到的困難或希望改善的地方，從回覆的客戶中選出了六家，提供後續的服務，大家都提出了具體的需求，包括：

網站介面的優化建議
新增單元的支援
改善網站的使用體驗

團隊在收到這些回饋後，立即進行評估，並針對這些需求進行了部分免費的優化和調整。這些改進不僅提升了網站的效能，也讓這些客戶在短時間內看到實質的成果

例如：聖道兒童之家提出想要做物資表格的手機版優化，讓使用手機觀看的民眾可以更清楚的瀏覽表格

調整前需要自行左右移動的表格

調整之後表格一目了然，不需要左右移動

而此優化也收到客戶的好評！

表格真的變得超級清楚的，這樣真的就很方便使用

之前真的很困擾，不知道怎麼讓大家發現能左右移動XDDD

這個免費調整真的很感人，謝謝你們那麼貼心！

因為那個物資需求表格是支持我們的民眾很常會瀏覽的頁面，瀏覽率相對其他頁面來說算非常高。

我們很多民眾都是習慣捐物大於捐款，所以都會想了解我們最新的物資需求，這個頁面的瀏覽率甚至還大於捐款頁XDD 是全站第二高

但手機板沒辦法一目了然看到所有資訊，就會變成有些空格處無法發揮功能，就不是那麼好使用

真的幫了很大的忙耶，超級感謝的！

關心不間斷，持續優化服務

透過這次的免費診療服務，我們不僅解決了客戶的即時需求，也持續我們的各項優化服務。這也是我們長期以來的核心價值——除了是系統服務的提供者，更希望成為每個 NPO 在數位轉型路上的長期夥伴。

對於未來，我們將持續提供客戶優質的服務，無論是透過技術支援、客製化服務，還是分享數位轉型的最佳實踐，我們都會與客戶並肩前行。

如果您的組織目前正需要架設一個新網站，或是希望提升與支持者的互動，netiCRM 不僅能夠協助您建立更完善的支持者管理系統，還能針對您的網站提供量身訂製的優化建議，請立刻聯絡我們 : pm@netivism.com.tw

本文章與圖片產製過程中，使用 AI 工具輔助產製

文章分類:

網站建置

覆寫系統渲染機制產生客製化嵌入頁面，以Drupal 10為例

poliphilo — Mon, 24 Jun 2024 02:56:52 +0000

我們在建置網站時，有時候會需要製作客製化的嵌入式頁面，常見範例如要在 iframe 或光箱中顯示特定內容，在這些情境下，嵌入的網頁內容通常不需要（或不應該）包含網站的標準頁首、頁尾、側邊欄等元素，以避免多餘的檔案載入影響效能或重複元素干擾嵌入效果而影響使用經驗。今天就來跟大家分享如何在 Drupal 10 覆寫系統渲染機制以客製化嵌入頁面。

今天的介紹的範例是透過客製化嵌入頁面建立導覽地圖功能，導覽地圖擁有一個非常簡單的網頁架構與內容，並搭配特定的前端函式庫完成互動效果，最後會透過 iframe 的方式將其嵌入。

上圖為關渡自然公園的「參觀導覽地圖」功能之截圖

步驟一：製作客製化模組

首先，我們需要先建立一個客製化模組，基本架構如下

modules/custom/custom_map_guide/
|-- custom_map_guide.info.yml
|-- custom_map_guide.routing.yml
|-- src/
    |-- Controller/
        |-- MapGuideController.php

custom_map_guide.info.yml 透過 info.yml 定義模組的資訊

name: 'Custom Map Guide'
type: module
description: 'Provides a custom embed page rendering for map guides.'
core_version_requirement: ^10
package: Custom

步驟二：定義路由

有別於 Drupal 7 的 hook_menu 機制，在 Drupal 10 我們需要透過 routing.yml 來定義路由，以下的範例為透過分類的方式建立地圖主題，因此會需要分類項目 ID作為參數

custom_map_guide.routing.yml

custom_map_guide.content:
  path: '/map_guide/{tid}'
  defaults:
    _controller: '\Drupal\custom_map_guide\Controller\MapGuideController::content'
  requirements:
    _permission: 'access content'

步驟三：建立控制器

定義好路由之後，接著我們要在模組的 src/Controller/ 目錄下，建立 MapGuideController.php，基本的控制器如下

namespace Drupal\custom_map_guide\Controller;
use Drupal\Core\Controller\ControllerBase;

class MapGuideController extends ControllerBase {
  public function content() {

  }
}

接下來我們需要在控制器內處理以下項目：

匯入所需的類別
由於會從控制器中調用模組中定義的函式庫（Library），可以使用靜態 create 方法從服務器取得 ibrary.discovery 服務，以便稍後使用
在 content 方法中依照帶入的分類 ID 並透過自定義的 buildCustomHtml 方法組合成渲染所需的陣列，最後回傳一個包含生成 HTML 的 Response 物件

以下的範例用程式碼包含了較完整的程式邏輯，提供給大家參考

<?php
// 定義命名空間
namespace Drupal\custom_map_guide\Controller;

// 匯入所需的類別
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Asset\LibraryDiscoveryInterface;
use Drupal\taxonomy\Entity\Term;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\HttpFoundation\Response;
use Drupal\Core\Render\Markup;
use Drupal\file\Entity\File;
use Drupal\image\Entity\ImageStyle;

// 定義控制器類別，繼承自 ControllerBase
class MapGuideController extends ControllerBase {
  // 定義受保護屬性來保存 LibraryDiscoveryInterface 實例
  protected $libraryDiscovery;

  // 靜態 create 方法，用於從服務容器中取得 library.discovery 服務並實例化控制器
  public static function create(ContainerInterface $container) {
    return new static(
      $container->get('library.discovery')
    );
  }

  // 建構函數，接受 LibraryDiscoveryInterface 實例
  public function __construct(LibraryDiscoveryInterface $libraryDiscovery) {
    $this->libraryDiscovery = $libraryDiscovery;
  }

  // content 方法，根據給定的 tid 載入分類項目並生成對應的 HTML
  public function content($tid) {
    // 載入指定的分類項目
    $term = Term::load($tid);

    // 如果分類項目存在，則生成自定義 HTML
    if ($term) {
      $render_array = $this->buildCustomHtml($term);

      // 渲染陣列並返回包含 HTML 的 Response 物件
      $html = \Drupal::service('renderer')->renderRoot($render_array);
      return new Response($html);
    }

    // 如果分類項目不存在，返回 404 錯誤
    return new Response('', Response::HTTP_NOT_FOUND);
  }

  // buildCustomHtml 方法，用於生成自定義 HTML
  private function buildCustomHtml($term) {
    // 取得網站名稱
    $site_name = \Drupal::config('system.site')->get('name');
    // 取得分類項目名稱
    $term_name = $term->getName();
    $term_map_guide_main_img_url = '';

    // 檢查詞彙是否有 field_map_guide_main_img 欄位
    if ($term->hasField('field_map_guide_main_img')) {
      $image_field = $term->get('field_map_guide_main_img');

      // 如果圖片字段不為空，載入對應的圖片檔案
      if (!$image_field->isEmpty()) {
        $image_file_id = $image_field->target_id;
        $file = File::load($image_file_id);

        // 如果圖片檔案存在，取得圖片 URI 和樣式 URL
        if ($file) {
          $img_uri = $file->getFileUri();
          $img_style = ImageStyle::load('map_guide_main_img');

          // 如果圖片樣式存在，生成圖片 URL
          if ($img_style) {
            $term_map_guide_main_img_url = $img_style->buildUrl($img_uri);
          }
        }
      }
    }

    // 取得所需的函式庫
    $jquery = $this->libraryDiscovery->getLibraryByName('custom_map_guide', 'jquery');
    $pageguide = $this->libraryDiscovery->getLibraryByName('custom_map_guide', 'pageguide');
    $map_guide = $this->libraryDiscovery->getLibraryByName('custom_map_guide', 'map_guide');

    $css_links = '';
    $js_scripts = '';

    // 生成 CSS
    foreach ($pageguide['css'] as $css) {
      $css_links .= '<link rel="stylesheet" type="text/css" href="/' . $css['data'] . '">';
    }
    foreach ($map_guide['css'] as $css) {
      $css_links .= '<link rel="stylesheet" type="text/css" href="/' . $css['data'] . '">';
    }

    // 生成 JS
    foreach ($jquery['js'] as $js) {
      $js_scripts .= '<script type="text/javascript" src="/' . $js['data'] . '"></script>';
    }
    foreach ($pageguide['js'] as $js) {
      $js_scripts .= '<script type="text/javascript" src="/' . $js['data'] . '"></script>';
    }
    foreach ($map_guide['js'] as $js) {
      $js_scripts .= '<script type="text/javascript" src="/' . $js['data'] . '"></script>';
    }

    // 生成頁面主體的 HTML
    $body = '<div id="map-guide-container" data-map-title="' . $term_name . '" data-map-bg="' . $term_map_guide_main_img_url . '" data-site-name="' . $site_name . '" data-force-landscape="0"></div>';

    // 建構並返回渲染陣列，包含完整 HTML 結構
    $render_array = [
      '#type' => 'html_tag',
      '#tag' => 'html',
      '#value' => Markup::create('<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>' . $term_name . ' | ' . $site_name . '</title>' . $css_links . '</head><body>' . $body . $js_scripts . '</body>'),
    ];

    return $render_array;
  }
}

* 本文首張圖片由 Ideogram 生成

文章分類:

內容管理系統

如何在 Drupal 網站加入結構化資料（Structured Data）？以 ProfilePage 為例

poliphilo — Sun, 23 Jun 2024 07:38:03 +0000

大家好，本文是「如何在 Drupal 網站加入結構化資料（Structured Data）」第三篇，這次主題為「資料頁面（ProfilePage）」，在實作前可以先到 Schema.org 了解 ProfilePage 的完整定義，亦可以參考 Google 的 ProfilePage 說明文件。

為資料頁面（ProfilePage）設定結構化資料（來源： Google）

還不了解什麼是結構化資料（Structured Data）的朋友們，可以先閱讀〈如何在 Drupal 網站加入結構化資料（Structured Data）？以文章為例〉，內文有介紹什麼是結構化資料以及如何在 Drupal 使用 Schema.org Metatag 模組為一般文章（Article）建立結構化資料，另外〈如何在 Drupal 網站加入結構化資料（Structured Data）？以麵包屑為例〉則有 BreadcrumbList 結構化資料的實作範例唷！

Drupal 7 建立資料頁面（ProfilePage）時碰到的問題

由於 Drupal 7 的 Schema.org Metatag 模組目前（2024.06.23） ProfilePage 仍是透過 Schema.org: WebPage 設定，然而模組不能設定「mainEntity」屬性，然而 mainEntity 在 Google 結構化資料是必要屬性，因此再測試時會遇到「mainEntity 欄位未填」的錯誤訊息如下圖所示：

我們可以在 Drupal.org 找到有相關 issue 並得知在 Drupal 9 以上的版本有修正了此問題，修正的方式是將 ProfilePage 獨立成子模組，不過該修正目前（2026.06.23）並沒有 Drupal 7 的版本，因此這裡提供一個簡單快速的解決方案：自己來動手寫自訂客製模組！

使用客製化模組產生結構化資料

若我們想為網站的「工作人員」這個內容類型建立 ProfilePage 結構化資料，首先我們可以使用 hook_node_view 來處理，如下

/**
 * Implements hook_node_view().
 */
function MY_MODULE_NAME_node_view($node, $view_mode, $langcode) {
  if ($node->type == 'staff') {
    
  }
}

接著我們使用 node 的資料來組裝 JSON-LD 結構化資料，包含必要屬性 mainEntity，最後透過 drupal_add_html_head 將其輸出，程式碼範例如下：

/**
 * Implements hook_node_view().
 */
function MY_MODULE_NAME_node_view($node, $view_mode, $langcode) {
  if ($node->type == 'staff') {
    $description = $node->body ? $node->body['und'][0]['value'] : '';

    $json_ld = '
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ProfilePage",
      "dateCreated": "' . date('Y-m-d\TH:i:sP', $node->created) . '",
      "dateModified": "' . date('Y-m-d\TH:i:sP', $node->changed) . '",
      "mainEntity": {
        "@type": "Person",
        "name": "' . check_plain($node->title) . '",
        "description": "' . check_plain(strip_tags($description)) . '"
      }
    }
    </script>
    ';

    drupal_add_html_head(array(
      '#type' => 'markup',
      '#markup' => $json_ld,
    ), 'MY_MODULE_NAME_json_ld');
  }
}

輸出的 JSON-LD 範例如下：

小提示，若你的目標是讓網頁更有效的被 Google 了解與檢索，建議你參考 Google官方文件 - 資料頁面 (ProfilePage) 結構化資料。

如何測試？

我們可以使用 Google 提供的「複合式搜尋結果測試」工具來驗證的結構化資料，只要貼上網址或程式碼片段即可測試！

* 本文首張圖片由 OpenAI DALL·E 生成

文章分類:

內容管理系統

@site_name 部落格

Webconf 2025》看 AI 如何改變日常工作流程

發揮想像，讓 AI 會的更多

用 AI 翻轉與客戶的洽談流程

創造 NGO 服務流程的可能性

結語

不追逐潮流，用心去做正確的事！Drupal 25 週年紀念文章分享

穩健的技術實力

共享與傳承的社群文化

以「人」為核心的平台

我們的推薦

非營利網站首頁攻略：從情感訴求到高轉換率的設計心法

留住訪客的黃金3秒，圖片、文案都準備好了嗎?

首頁的內容策略

建立信任：讓訪客安心支持你

雲端開源的中文字型選項變多了！

雲端字型服務平台

Google Fonts

justfont

文鼎iFontCloud

Adobe Fonts

使用 CSS 為文字加上裝飾背景與圖像

什麼是文字裝飾背景與圖像？

CSS 常用技術與實際範例

告別網站建置迷思：許願前，先問「為什麼？」

開了一堆功能清單，但真正需要的可能不是這些

自己的網站，不只說我們想說的，還要說對方想看的

最後：網站只是關係的起點，不是全部

社會企業的公益回饋與再投資：持續支持非營利與開源社群

公益支出概況

一、直接支持非營利組織

二、回饋開源社群

三、企業捐助與專案贊助

持續作為公益與開源的後盾

年度客戶關懷：免費網站診療，持續優化服務

為什麼推出免費診療服務？

關心不間斷，持續優化服務

覆寫系統渲染機制產生客製化嵌入頁面，以Drupal 10為例

步驟一：製作客製化模組

步驟二：定義路由

步驟三：建立控制器

如何在 Drupal 網站加入結構化資料（Structured Data）？ 以 ProfilePage 為例

Drupal 7 建立資料頁面（ProfilePage）時碰到的問題

使用客製化模組產生結構化資料

如何測試？

如何在 Drupal 網站加入結構化資料（Structured Data）？以 ProfilePage 為例