部落格

您在這裡

poliphilo

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

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


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

 

步驟一:製作客製化模組

首先,

poliphilo

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

為資料頁面(ProfilePage)設定結構化資料(來源:
Chloe

我是Chloe,在工程部門擔任大約半年的測試實習生(QA intern),在這段時間內學習到很多在學校裡學不到的東西、從剛開始對測試相關的知識都還懵懵懂懂,一直到現在對測試與開發都有進一步的認識,很開心也很感謝能有這個機會可以到這裡實習!

工作內容

作為QA實習生,主要會需要負責的就是針對工程部們的同事們開發完的每一項網頁功能去進行自動化測試的建立,會根據每個任務的目的性去思考會有怎麼樣的測試情境、有哪些測試步驟,再進一步去思考怎麼寫出想對應的程式碼去完成每一項步驟,達到任務的目的。
 
工作的流程比較多是由原本負責測試相關的工程師來和我進行每一項任務的說明與指引,確保我對於完成這項工作沒有疑惑,然後再讓我試著獨自去完成任務,當然其中如果有碰上問題,帶我的工程師也會很即時可以和我溝通想法,在這之中給予我很大的彈性自己去找出解決方式、或是給予我不同方向的提示去思考更多的解決辦法,在這樣的溝通之中,讓我逐漸培養針對每一項測試任務的熟練度,逐漸知道可能會有哪些問題需要先確認、撰寫程式碼的時候碰上問題應該現做什麼樣的處理與嘗試再進行回報會增加彼此的溝通效率等等。
 
除此之外,我也從一開始的開發環境建置的過程中,對於網路的一些基本知識有了更進一步的了解、也同時在這個過程中去了解整個公司的網站架構,也在開發過程中了解到公司的CI/CD流程,看到自己寫出來的程式碼可以在CI中成功運行並且通過的時候,
jimmy
去年回顧檢討了一下,公司產自於開源,使用開源,也回饋開源,但客戶是否了解明白我們這樣的選擇?問這種問題的下場,最後問題還是會回到自己身上:除了客戶之外,公司的同仁是否理解這樣的價值和選擇?

唯有明白之後,表達出去、產製出來的東西,才會內建這些精神,AI 都需要對齊價值了,公司同事其實也會需要價值靠攏一下...

也因此從去年8月開始,試驗了一系列方式,來進行公司內部的開源教育訓練培力,並把文件放在新進人員必讀的地方,以讓後續這樣的知識可以當作背景:

  • 一、為什麼需要在乎使用的軟體是否為開源
  • 二、開源為什麼這麼在意「社群」
  • 三、除了原始碼,還有什麼應該跟公開透明相關?
  • 四、程式碼都開源了,還有什麼可以封閉?
  • 五、開源軟體目前產業多大、多小?有什麼著名的公司、產品使用開源?
  • 六、開源有哪些商業模式
  • 七、我們使用哪些開源軟體、開源困境為何

在七次短講後,最後請各部門同事挑選開源軟體專案後,用公司社會企業的回饋,贊助這些開源專案來做個本計畫的 Ending。

poliphilo

在 Drupal 中,我們可以透過「角色」與「權限」的設計為網站建構出一個安全的使用環境,當核心模組提供的權限設定不符合需求時,我們還可以透過 Drupal 提供豐富的 API 來完成,本篇文章來為大家介紹如何透過客製化模組來自訂選單權限。

 

客製化選單權限

假設我們使用一個 Drupal 建立了包含主網域與數個子網域的網站,在這樣的情境下,通常會需要做更細緻的權限控管,這次我們以限定子網域是「sub.example.org」且角色為「Content Editor」或「Site Administrator」才有權限進行選單管理。

首先,我們先建立一個客製化模組(這裡以 Drupal 7 為例)的 .info ,由於本次我們是透過 Domain 模組來管理網域,客製化程式也會使用到相關函式,因此相依性要記得設定。

name = MY_MODULE_NAME
description = Limits menu management access based on roles and domain settings.
core = 7.x
yaya
嗨~我是yaya,在網絡行動科技擔任了快兩年的專案實習生。還記得大學時在課上接觸到網頁設計,對此深感興趣。因此在系上FB社團看到學姊發佈的實習職缺時便投了履歷。如今,已在網絡行動科技實習了相當長一段時間,感激緣分讓我認識這裡。

實習工作

作為專案實習生,我跟著專案經理一同工作,參與整個專案。每個專案所面對的客戶都是獨一無二的,組織規模、團體理念、建置目的等都有所不同。在面對各式非營利組織,我看到專案經理能根據組織的需求、使用習慣和經費等多面向給予建議,並在客戶、工程師、設計師之間進行溝通和協調。
 
在實習期間,我有機會參與一個網站從無到有的建置過程。包含前期的需求評估會議、規畫書撰寫和線框稿繪製,到網站製作完成後測試、操作手冊的撰寫等。看到最初僅是對話的會議紀錄轉化成規劃書、從黑白的線框稿到美麗的設計稿,最後實際上線變成供人使用的網站,每次都讓我感到振奮。
 
另外,我也有幸參與到官網介紹頁面和AI功能頁面的配置設計。這部分工作更具彈性和發想空間,需要揣摩使用者進到頁面時的想法和舉動,並規畫文案、功能按鈕、提示文字等各種配件的擺放位置、大小、呈現方式等。當看到自己提出的草稿被專案經理們雕琢修改、最後定稿並上線時,感動之餘也深刻感受到自己還有許多需要學習的空間。
 
此外,我也參與到協助收集潛在客戶名單(從中可以認識到原來有很多超出自己想像的大大小小的社會團體
poliphilo

 

我們在〈如何在 Drupal 網站加入結構化資料(Structured Data)? 以文章為例〉已經有介紹過什麼是結構化資料(Structured Data),以及如何在 Drupal 使用 Schema.org Metatag 模組為一般文章(Article)建立結構化資料,接下來我想以網站的「麵包屑」當作範例與大家分享,在實作前可以先到 Schema.org 了解什麼是 BreadcrumbList

為頁面麵包屑導覽設定結構化資料(來源:
poliphilo

什麼是結構化資料?

結構化資料(Structured Data)透過標準化格式來組織和格式化網頁內容,使其容易被搜尋引擎理解與處理,因此有助於搜尋引擎更準確索引網頁內容,並能在搜尋結果中依據類型的不同而顯示對應的介面,這對網站的使用者體驗也有所幫助。關於結構化資料的更多介紹,建議可以至 Schema.org 好好瞭解唷!

例如食譜網頁以結構化資料呈現,就能分類材料、烹飪時間和溫度、熱量等內容(來源: Google
 

以下為結構化資料常見的支援格式:

頁面