VECTOR COOL 威得數位行銷 - 第 2 頁，總計 43 頁

純CSS方型圖片，RWD自適應父容器寬度

在現代網頁設計中，我們經常需要在不同裝置和螢幕大小下展示圖片。有時，我們希望圖片能夠以方型的形式呈現，並自動適應其父容器的寬度。在這篇文章中，我們將使用純 CSS 技術來實現這樣的效果。

HTML 結構

首先，讓我們來看一下 HTML 結構。我們將使用以下代碼：

在這個結構中，我們使用了一個包含 image-square 類別的容器，並在其中插入一個 <img> 元素。src 屬性設置為 Unsplash 提供的隨機圖片 URL，這樣我們可以獲得一個無版權的圖片來完整演示這個範例。

CSS 樣式

現在，我們來看一下 CSS 樣式，以實現方型圖片並使其自適應父容器的寬度。

在這個 CSS 樣式中，我們對 .image-square 類別設置了以下屬性：

對於 .image-square img 選擇器，我們設置了以下屬性：

完整示例

您可以在 CodePen 上查看完整的示例，並進行測試和修改。

See the Pen
Untitled by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

結論

透過使用純 CSS 技術，我們可以輕鬆地創建方型圖片容器並實現自適應父容器寬度的效果。這個技巧可以應用於各種網頁設計場景中，為使用者提供更好的視覺體驗。透過設置容器的寬度為父容器的百分比，並使用 padding-bottom 屬性創建一個方形容器，我們可以確保圖片在不同裝置和螢幕大小下都能自動調整大小，並保持比例。這種技術的優點是簡單且無需任何 JavaScript 庫或框架的依賴。希望這篇文章能幫助您理解如何使用純 CSS 創建自適應的方型圖片容器。

[……]

Swiper with lightbox 輪播插件結合燈箱

Swiper 是一個功能豐富且流行的 JavaScript 輪播插件，廣泛應用於網站和行動應用程式的圖片輪播、幻燈片和滑塊展示。它提供了豐富的配置選項和自定義功能，非常容易擴充，不僅如此還有完整的Example，可讓開發者快速開始輕鬆創建出優雅且互動性強的輪播效果。

為何要加入燈箱功能

在很多使用場景下，只有輪播功能可能無法完全滿足需求，特別是當用戶想要更專注地放大圖片並細看細節時，我發現 Swiper 沒有預設這樣的功能，所以在這樣的情況下，將 Lightbox（燈箱）功能加入 Swiper 是一個明智的選擇。Lightbox 是一種常見的互動式圖片展示方式，它可以讓用戶單擊圖片時在一個彈出視窗中放大圖片，以提供更好的使用者體驗。這種結合可以為用戶提供更大的圖片展示空間，更方便地觀看圖片細節，並增加了互動性和使用便利性。

如何合併燈箱功能

這部分我已經實作在CodePen上，有興趣的可以參考下列程式碼，並可以直接在codePen上看執行結果，這樣最快

See the Pen
Untitled by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

刷新 Line 針對網址 og:image 的快取 refresh LINE URL og:image Cache

寫前有寫過一篇如何刪除Line 針對網址訊息的og:image快取，今天需要這功能時居然沒作用了，Line還是自顧自的秀出舊圖片
https://vector.cool/clear-line-url-preview-cache/

即便使用 Line 的工具 poker 刪除緩存，重新抓取已經抓到新的 og:image 圖片，但實際在 Line 貼上相同網址，一樣呈現舊圖，跟客戶解釋這是緩存過幾天就會好，但總是有瘋子客戶會瘋狂追問，為什麼還沒好，為什麼還是舊圖、什麼時候會好、好了沒，為了耳根清靜，我找到一個新方法能刷新，也許也能幫助到你

1.確定目標網頁正確設定 og:image 標籤

檢查一下，有可能真的是你的問題，那客戶罵你是剛好而已，哈，先確定是否存在這標籤，另外也要確定標籤上的連結是可以正常開啟的，當然你也可以貼到 Facebook 塗鴉牆驗證一下，如果設定正確，Facebook 將會抓到你預期要呈現的縮圖

2.在網址上加參數

假定你要刷新預覽圖片的網址為：
https://example.com
你只要在這網址上加上參數，至於參數要加什麼就隨便你，加上參數大概會長這樣
https://example.com?aaa=bbb

3.貼到 Line 上

把步驟2加上參數的網址貼到 Line 上，此時 Line 就會刷新該網址的預覽圖片了，如果成功刷新圖片了，即便目標網址移除參數後，仍然會是新的預覽圖片

試試看，看對你們有用嗎？

[……]

CSS 選取同層偶數元素，當 nth-child(even) 不起作用

在編輯網頁的時候很常會遇到這種情況，讓單數列與偶數列交錯，這次修改HTML不是我自己產生的，是由WordPress產生的，因此要透過CSS選擇器選取偶數列，將偶數的欄反轉，HTML結構大致如下，內容我省略

HTML:

CSS:

上述CSS不起作用，有點納悶查了一下，改用下列方法，就成功了

有遇到這問題的朋友可以試試看喔

[……]

簡單取得 Line 官方 QRCcode 分享網址，分享在網頁上

相信你一定對 Line 這個通訊軟體不陌生吧！畢竟，它是台灣的市佔率最高的即時通訊軟體，連婆婆媽媽阿公阿麼每天也都在 Line，無論工作與生活 Line 與台灣人密不可分。

除了聊天、打電話，罵老闆，還可以透過 Line 來訂購產品，做即時客戶服務，也因如此，在商業應用上，經營 Line 來貼近使用者，增加社群力更是不可或缺的一環，而網頁經營者要將網頁與 Line 連接最快速的做法，就是透過 QRCode 的方式，讓 Line 用戶透過行動裝置的 Line APP 掃描 QRCode，快速連結到 Line 聊天室或 Line 社群，省去了輸入 ID 的麻煩。

QRCode 掃描加 Line 這件事相信大家也都不陌生，其實 Line 官方有提供一個官方版的 Line 網頁，頁面網址大概長得像像面這樣的格式

https://line.me/R/ti/p/@abcdef

點連結會進到 Line 官方 QRCode 的頁面(如下圖)

所以網頁分享 Line QRCode 最快速的做法就是，直接連結到這個頁面，透過官方 QRCode 頁面也讓人更信賴，不過也不知道為什麼 Line 官方不做個 QRCode 網址分享產生器，大概是跟商業策略有關，本篇就不討論，本篇文章教您如何簡單的取得這個連結，讓您簡單的將QRCode 超連結，放進網頁或文章中，照著下列圖文即可

開啟 Line APP
1.下方頁籤切換到「主頁」
2. 點選右上角的齒輪圖標進入「設定」頁面

3. 點選「個人檔案」進入個人檔案頁面

4.選擇行動條碼

5. 按複製連結

複製到剪貼簿的網址就是 Line 的分享網址囉，趕快貼到網頁上吧

[……]

專案「拖延」的藝術-老師不會教的事

如果是專案管理者，專案執行時延遲是肯定會遇到的問題，但沒人會教你「拖延」。
這裡討論的拖延，並非故意拖延，是基於團隊或資源分配導致的延遲，拖延有時只是必要之惡，但還是要盡快完成任務，不可懈怠，當專案進入「拖延」時刻猶如走鋼索的人，得到掌聲及粉身碎骨於一念之間，如何為自己或組織爭取多一點時間，不會遭到罰則又讓專案順利完成，且得到顧客滿意這就是門藝術。

但如果實際進度真的與預期相距甚遠，建議直接道歉，並與客戶共同尋求解決方案才是正道

依據經驗歸納出幾種技巧：

技巧性拖延

當客戶需求在不確定的階段，給客戶多點時間想想，順勢將完成時間遞延，製作時間加上客戶的猶豫思考時間這是非常合理的，而團隊只是先做別的事而已，但你得到額外的拖延額度

答應客戶範圍外的小功能

客戶需求變更，在可控的情況下，答應客戶
並延伸討論幫客戶想更多解決方案，但需要拿捏就是快速、簡單、看得到東西的小事
預留延遲的伏筆，記得讓對方感受到欠你個人情

推託複雜的更改

執行階段，已陷入延遲的專案，切記!! 不可再加入新的大範圍或複雜的任務，這將壓垮你和你的團隊或組織，專案必定延遲，既不被客戶接受、也不被團隊或組織體諒，裡外不是人。
告訴客戶的額外需求先用簡單的替代方案先處理，此舉說明既沒有坐視不管，也先幫客戶解決當下遇到的問題，若要真正的解決額外需求，等當前專案結束後再來討論，通常客戶是可以接受的

無關緊要的小事先做

避免客戶要求檢視進度時，如果什麼東西也沒有，客戶期待將摧毀對你的信任，所以花一點時間先做很快完成的簡單小事、看得見的小事，因為主要會延遲的通常是大功能或沒做過的新功能，這些功能通常在完成前無法展示，如果沒先做些無關緊要小事，將陷入沒有東西看的窘境，反之，當客戶要求檢視進度時，就可展示這些無關緊要的小事，鉅細靡遺解釋這無關緊要的小事，藉此掩蓋還沒完成的大功能，讓會議有東西看、有東西講、有東西討論，至少看圖說故事，讓業務還是PM發揮他們的唬爛功力，最好能延伸討論無關緊要問題，帶客戶在這些無關緊要的問題上做無謂的討論，無關緊要的問題，結論還是無關緊要。
至少讓你順利度過進度審查會議

哀兵策略

如果是已經快要完成了，這是最後一步的終極手段，請小心使用，如非必要請不要用，
這時通常是客戶等待的臨界點，基本上客戶已經生氣了，此手段盡可能只用一次，用第二次就非常拙劣，客戶對你信任會降至最低，直到客戶看見東西。

哀兵策略意旨因人身不可抗力的原因，導致專案延遲，常見的有染疫、流感、重感冒、住院、大姨媽來(僅對男客戶有效)，道德勒索讓客戶無法質疑，真的不是故意無法出席、不能主持，但通常這時效頂多三天，你就必須好了，包含你的專案

請謹記以上技巧並非長期解決之道，它們僅為應急之計。持續改進您的專案管理流程和時間管理能力將有助於減少這些緊急情況的發生。

原創，引用請標明出處

[……]

Json code comments

Json 為純數據，簡單來說，Json現階段沒有標準註解，但沒有註解實在很不方便，所以可以用偷吃步的方式，一樣以 Key:Value 的方式呈現資料，取個像註解的Key用雙斜線開頭而Value 就是註解的文字，用以讓程式碼忽略這個資料

這種方式註解看起來像這樣：

註解在資料裡的樣子：

https://stackoverflow.com/a/244858

[……]

[更新]解決 win11 無法拖曳檔案至工作列程式開啟問題

2023/05/02 文章更新，今天忽然發現這功能回來了，回頭翻 Windows 更新記錄，可能是在 Windows 11, version 22H2 這個更新中偷偷加回來了，似乎也沒刻意宣傳這愚蠢刪除又改回來的功能，如果你也正在尋找這問題的解決方案，更新到最新版本的 Win11 試試，就不必使用第三方方法了

Windows 大概腦袋燒壞了吧，升級到 Win11 發現無法拖曳檔案到工作列程式開啟，這太概是很多人每天會做很多次的動作，沒人明白為何要移除這個功能，甚至很因為無這功能而後悔升級 Win11，因為移除了一個從學電腦開始從小用到老的功能，引發除了我以外的大量使用者不滿，有傳聞微軟將於2022會把此功能加回來，但仍無具體時間表，也有可能會永遠取消這功能。

Windows 11 Drag & Drop to the Taskbar (Fix)

為維持以往的生產力，一名開發者暱稱為：Dr. Mona Lisa（蒙娜麗莎博士），發表這款程式名為“Windows 11 Drag & Drop to the Taskbar (Fix)”，於 GitHub 開源，供使用者免費下載使用，透過第三方程式來解決這愚蠢的問題。另外這程式是開源公開於 GitHub 上，所以程式會公開接受大家檢視，相對安全

安裝程式

於下方網址找到該程式的最新版本下載二進位版本下載到桌面

https://github.com/HerMajestyDrMona/Windows11DragAndDropToTaskbarFix/releases/

打開程式

程式會開啟於常駐程式中

到這邊就已經完成安裝囉，接下來，拖曳一個檔案試試看吧

Refrence:
https://life.aceidlo.net/fix-windows-11-drag-to-taskbar/
https://www.796t.com/article.php?id=450189

[……]

清除 LINE 快取、暫存、預覽圖片 – Clear LINE URL Preview Cache.

相信大家都有這經驗，修改了網頁的標題、描述或預覽圖片，將網址貼到Line，居然還是顯示舊的，未更改之前的資料，這原因是Line為優化程式效能，有個快取功能，也就是說當L ine 機器人爬過，取得資訊後會把取得的資料存入快取資料庫，當第二次貼相同網址時，會直接去快取資料庫中抓資訊，所以不會真實反映當下的標題、描述內容。

但通常客戶不太會理你說的這些，只會把問題丟給你，以下就是解決方法囉，Line 推出了一個給開發人員的好功能，可以重新抓取網頁的資訊來取代原本抓取的資料

更新 !!! 原本文方法似乎已經不管用了，請參考最新做法
https://vector.cool/refresh-line-url-ogimage-cache/

Line 清除快取功能網址

http://poker.line.naver.jp/

把網址打上去，勾選 Clear Cache 重抓，就這麼簡單!!

refrence
https://blog.no2don.com/2020/11/line-line-clear-line-url-preview-cache.html

[……]

Apache .htaccess Rewrite homepage only , not 301

在首頁網址不變的前提下，利用 Apache .htaccess 重寫首頁頁面，指定到同站某一網頁內容，而不影響其他網頁運作

使用情境：

首頁需要改版時，但新版本頁面開發/測試時但還不能正式上線，但於準上線狀態，這時可以透過這技巧，避免停機更新，快速切換首頁顯示頁面，不更動網址所以行銷追蹤碼或廣告著陸都不會有問題

[……]