"網站技術與設計"共有688篇文章

之前我們在 快速查詢CSS/HTML與各瀏覽器的支援－Can I Use  這篇文章中 提到過瀏覽器支援性的問題，在這篇文章中我們建議開發者先到 Can I Use 網站中確認瀏覽器對CSS新屬性的支援度再進行開發。然而在實際開發的過程中，我們常常會遇到客戶在驗收階段對我們說：「為什麼在我手機(電腦)上看起來怪怪的？」仔細確認過客戶的裝置版本之後、就是各種的無奈。在這個階段我們不太可能把之前做好的東西推翻重做，多數時間的解法都是針對不支援的瀏覽器另外設置對應的CSS。在這個時候，確認瀏覽器是否支援某些CSS屬性這件事、就變得非常的重要。

slick js 是一個相當好用的輪播套件，Magento2 page builder裡的slider也是使用這個套件來實現輪播的效果。這篇文章要跟大家分享的是：如何使用slick js 製作上下滾動的滑塊，以及如何解決垂直滑動時出現的高度問題呦！

如果各位接觸Magento2開發有一段時間，對於添加排程工作想必不陌生。今天想與大家進一步分享的，是關於排程進階的參數控制。如果您發現預計執行的工作，沒有如預期產生在cron_schedule資料表，或者沒有正常的執行，那麼有可能是被這些隱性參數所影響。

由於Dart Sass 2.0.0不再支援用"/"表示除法，如果您恰好使用了這個方法，那麼在編譯的過程中，SASS會不斷的跳出棄用警告：DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.。而且這警告又沒有辦法關閉，雖然不影響編譯的結果，但是大量的警告真的很煩人。若是使用了bootstrap 4，那警告量更是驚人。若是要解決這個問題，底下提供了二個方法供您參考。

Bootstrap 3 和 Bootstrap 4 的下拉選單，只支援到第二層，如果需要多層次選單的話，我們需要用到 bootstrap-submenu.js。其中Bootstrap 3 要搭配 Bootstrap-submenu 2使用，Bootstrap4 則是要搭配 Bootstrap-submenu 3 使用。今天這篇文章主要是分享Bootstrap 4 + Bootstrap-submenu 3的作法，關於Bootstrap 3 + Bootstrap-submenu 2 的作法，你可以參考我們的舊文章：讓你的Bootstrap下拉選單可以支援多層選單

在Magento2大部分的頁面都有Full Page Cache，舉凡像是prodcut、category、cms頁都有使用，讓使用者在下次近入頁面時間提升，但是這對於說想在頁面上想根據不同使用者所呈現不同內容來說是非常惱人的，雖然可以使用cacheable="false"來避免但是這樣便會完全失去Full Page Cache功能，於是剩下的辦法便是使用AJAX拿回沒有Cache的資料進行渲染，但是對於每次都寫一隻AJAX與API的方式來說並不是怎麼的有效率，這邊將提供一個簡單的方法將你的Block轉換為上述方式，只需一個簡單的參數，省下更多的時間。

由於Photoshop軟體運算技術的提升，讓本來很複雜的修圖變的很輕鬆，今天astralweb要與大家分享當照片放大後會模糊，PS有什麼方式可以改善呢，一起來看看如何製作吧! ※本教學使用Adobe Photoshop 2021 (v22.1) 製作 ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法，如去背、選取工具、色調調整 以往如果解析度不夠的圖片就會無法使用，現在你可以先考慮一下PS新的處理功能

因為專案需求的關係需要在admin的category的form上新增原本沒有的欄位，上網爬文後我使用category attribute的方式去新增，以下圖所示，是我用的方式。而將這multi-select的選項換成我需要的選項Customer group。

由於網路發展的快速，越來越多開發者為了避免使用者等待網頁讀取時間過長而使用CDN，而CloudFlare是如今網站常用的CDN服務供應商，專門提供網站加速與安全防護的服務。 最近遇到了一個有使用CloudFlare專案的需求是記錄使用者的IP方便確認哪些是惡意攻擊的使用者以方便封鎖。但因為這個專案是有使用CloudFlare，取到的IP都是從CloudFlare出來的，無法確認真正的使用者是從哪裡來。以下就要來介紹的是在使用CloudFlare時取得使用者真實IP的方法。

由於Photoshop軟體運算技術的提升，讓本來很複雜的修圖變的很輕鬆，今天astralweb要與大家分享如何快速將黑白照片上色，一起來看看如何製作吧！ ※本教學使用Adobe Photoshop 2021 (v22.1) 製作 ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法，如去背、選取工具、色調調整 以往將黑白照片上色時，我們需要將不同顏色區塊給區分開來並分別上色，現在Photoshop可以直接幫你做好這些事情

當我們從github下載Magento PWA Studio來使用的時候，會發現PWA是直接使用CSS檔案，沒有透過任何的編譯工具。如果您已經習慣使用SASS或LESS來編譯CSS，那你一定很希望能夠在PWA繼續使用你熟悉的工具，要不然光是那些巢狀的CSS選擇器，就可以把人給逼瘋。這篇文章就是要跟大家分享如何在PWA使用SASS及LESS。

在開發多國語系的Shopify網站時，我們常常需要在不同的語系下，顯示不同的頁尾選單。而shopify的預設功能，沒有辦法針對不同語系去指定不同的頁尾選單。因此我們需要修改程式碼來實現多語系的頁尾選單。如果想要針對不同語系顯示不同的頁尾選單，我們只需要把握判二樣技巧就可以了一、判斷語系二、呼叫自訂選單