poliphilo 的部落格

您在這裡

用 CSS 完成單行與多行省略號功能!

什麼是省略號?

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

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

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

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

如何在已編譯的 Drupal Twig 中除錯

相關專案: 

在 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 設定沒有作用,實際上是因為需要清除快取(或是禁用快取)。

Tag: 

關於選購 Drupal 版型

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

第一階段評估項目

網站內容架構

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

Google調整搜尋演算法!你的網站對行動裝置友善嗎?

由於行動裝置的普及,越來越多人透過行動裝置來上網,Google宣布自2015/4/21起進行搜尋排名演算法的調整,會將網站的行動裝置友善度納入排名依據。根據Google聲明,此次演算法的調整會影響全世界所有語言的搜尋結果,不過排名順序的改變僅限於行動裝置,且是對每一個獨立頁面而非整體網站。

如果你的網站尚未有行動版,那麼在行動裝置上你的網站排名會下降。不過不用擔心,一旦你的網站有了行動版(且要通過Google檢測),Google會自動重新分析你的網頁,排序便會再有所變動。或者,你可以更主動一些,要求Google重新分析你的網頁

Map local css (Chrome篇)

現在有一些瀏覽器內建的開發工具很強大,前端工程師最常用到的其中一個功能就是即時編輯元素樣式預覽效果。可是在套版的過程中我們必須要不時複製寫在開發工具上樣式貼回本機的程式碼有點麻煩,不過這是必要的,因為過程中一但網頁或瀏覽器掛掉,自己不小心關掉視窗或是反射性地按下重新整理,結果都只有一個,那就是剛才在編輯好的樣式都一去不復返 T_T ,只能重頭再來 Orz。當檔案在伺服器端時,開發版型或是套版可能會透過 SFTP、直接修改線上檔案或是使用 Git 來進行作業,如果是前兩種方式,有些人可能習慣編輯沒兩下就更新伺服器端檔案然後重新整理網頁來看看效果(也許那是一種即使開發工具已能即時預覽還是會有種要確實地更新了伺服器端檔案並確認線上版本樣式也無誤後才會有的安心感),也有可能調整到一個段落後才將更新伺服器端檔案。所謂調整到一個段落也有大小之分,我自己的習慣是小段落,例如一個 Header 包含 Logo 、搜尋、主選單和次選單等等項目,每一個項目都是一個小段落,Header 則算是一個大段落(若之於整個頁面來說,至少也算是中段落),通常我會套完一個項目後更新線上檔案,而非套完整個 Header 。

YANA失蹤記,我們用GMAP協尋

那一天一如往常,大夥工作告一段落後準備來去吃午飯,在出門前同事叫喚著YANA,不見貓影,啊原來會議室的門沒關,大概跑過去探險了,那兒對她來說可是一個新天地。燈沒有開,黑暗中並沒看到她光亮的眼珠子,也沒聽到隨著身動會發出的鈴鐺聲,心開始不安了起來。是在哪兒睡著了呢?把燈打開,卻仍是什麼也找不著,開始著急了!脫口而出「YANA好像不見了!」。我們低下身來,桌腳、地板、牆角、流理臺、每一個櫃子都打開、沙發底下、廁所、馬桶、洗手台、紙箱、樓梯間、走廊,還有那些被稱作空間的一切都檢查再檢查,卻什麼也沒有!這不是一如往常的一天,她不見了!

訂閱 RSS - poliphilo 的部落格