poliphilo 的部落格

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

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

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

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

什麼是 VS Code？

什麼是省略號？

省略號就是「……」，又稱刪節號，中文省略號原本為「…」，後來因為避免與直排文字中的冒號混淆，因此改成「……」。在網頁排版中，常使用於文章列表中的標題與摘要段落，為了讓版面整齊，我們會使用省略號讓文字限制於特定行數使其高度一致。

許久以前，要處理省略號時，可能會使用以下方式

• 後端程式語言（e.g. PHP）計算字數後加上省略號
• 前端程式語言（e.g. Javascript）計算字號後加上省略號
• 使用 HTML + CSS 產生一個內含省略號的小區塊放至在行尾

然而，隨著 CSS 技術的進展與瀏覽器對這些新技術支援度的提升，如今我們可以用幾行 CSS 設定就完成單行文字與多行文字的省略號功能，現在就來為大家介紹一下。

在 Drupal 7 時，我們更新 tpl 檔案後直接重新整理頁面就能看到更新的結果，但是 Drupal 8、9 快取機制已經不同，因此會遇到更新 twig 之後重新整理頁面後內容卻沒有更新的問題，接下來主要會整理與翻譯 Debugging compiled Twig templates 這篇文章來說明 Drupal 的快取機制以及如何在已編譯的 Twig 進行除錯。

Drupal 中的 Twig 如何運作

Twig 預設會將樣板編譯為 PHP，並將編譯後的樣板儲存在文件系統中（預設會在 sites/default/files/php/twig）

在 Twig 完成一些標記（markup）後，Render API 中會有另一層快取。Render API 會取用 Twig 建立的標記，並且通常會以這樣的方式對其進行快取，即在這之後的頁面請求與 Twig 無關（如果快取資料保持不變的話），因此，我們可能會遇到 Twig 的 除錯或 auto_reload 設定沒有作用，實際上是因為需要清除快取（或是禁用快取）。

當專案預算不足或時程較趕時，購買付費版型來建置網站是一個常見的選擇。那麼要如何在眾多版型裡挑選到適合自己的版型呢？通常可以透過二步篩選來找到最接近需求的版型。一般而言，挑版型最重要的幾個核心條件放在第一階段來篩選，以下是我認為必須放在第一步評估的項目：

第一階段評估項目

網站內容架構

網站是由內容們組合起來的，所以不論是在規劃網站架構或是版型設計，「內容」本身都是很重要評估要素，挑選版型時也不例外。建議在挑選版型前要先規劃好網站架構，若有已有 wireframe 更好，這樣在挑選版型時可以注意版型各頁面的呈現方式是否有與自己網站對應到，方能較快速的找到對應程度最高的版型。