徐嘉裕(Neil Hsu)的工作心得網誌!

網站符合無障礙已經是當今的趨勢了，所以在設計LOGO動畫上不能再用傳統的canvas動畫，因為圖片沒版法自流動，無法符合無障礙AA的CRTL+200放大版面流動效果，只能全部改為CSS+純文字，問題不是在動畫，而是如何用CSS至少能做出70%能像PSD圖檔那樣的文字效果，美觀也是要兼顧，經過努力研究與資料參考，終於寫出來這個【文字漸層+文字白框+文字陰影】CSS效果，如下圖： 以下就是整個代碼結構 透過F12撈出來的HTML結構 <div id="logoimgbox2" aria-label="桃園市立富岡國民中學" > <span aria-hidden="true" tabindex="-1" class="logo_01" data-storke="桃園市立" >桃園市立</span> 略.......................... </div> 說明 aria-label是給讀報軟體用的讀報資訊 aria-hidden="true" tabindex="-1" 是讓讀報軟體不要讀取容器中的文字，因為用了 ::before建構一個文字在底層，同樣文字被讀報兩次會被列缺失 data-storke是給CSS ::before的: attr(data-storke);用的 以下為CSS代碼 #logoimgbox2 {     position: absolute;     top: 44px;     left: 174px;     color: #181818;     font-size: 290%;     word-break: break-all;     font-family: Noto Sans TC;     font-weight: 600;     filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .5));  // 文字陰影(黑色)     letter-spacing: 0.6rem; } #logoimgbox2 .logo_...

有些學校伺服器因為長期遭到網路爬蟲攻擊洗流量，乾脆由上層路由防火牆GeoIP鎖掉台灣以外的IP，這樣是能立刻減少流量及0/1消耗，因為國外的爬蟲都被擋掉了，但同樣副作用也導致Let's Encrypt的 SSL憑證更新失敗，因為國外的IP都被鎖了，測試方式很簡單，只要於下列網址輸入需要模擬Let's Encrypt更新的網站，即可測試 Let's Debug： https://letsdebug.net/ 如果返回 紅字 ，那就是IP被鎖，上層 GeoIP 限制會讓驗證節點直接超時（Timeout during connect），連80port都連不到， 綠字 表示沒問題， 黃字 雖有問題仍可更新 解決無法更新方案就只能改用DNS‑01驗證，方法如下： 步驟 1：進入伺服器並執行 Certbot sudo certbot certonly --manual --preferred-challenges dns -d yses.tyc.edu.tw 步驟 2：Certbot 會顯示 TXT 記錄資訊 它會出現類似這樣的提示： Please deploy a DNS TXT record under the name: _acme-challenge.example.com. with the following value: s9pRq9l5R9Xg1wKQyEjQ0i_Z4Hh3V9cQeH6jLn2Qzj8 Before continuing, verify the TXT record has been deployed. 將以下綠字及紅字複製下來： 記錄名稱： _acme-challenge .example.com 記錄值： s9pRq9l5R9Xg1wKQyEjQ0i_Z4Hh3V9cQeH6jLn2Qzj8 備註：終端機上只需要把滑鼠左鍵長壓拖曳後放開即可自動複製，不需要用鍵盤的CTRL+C 步驟 3：在 Infoblox或是網址管理介面新增 TXT 記錄 登入 Infoblox 或網址管理介面(外網段) 找到 網址 對應的 DNS Zone 新增 TXT 記錄： Name： _acme-challenge （Infoblox 會自動加上 .example.com，不需要自己寫完整） Text / Value： s9pRq9l5R...