hmlo.dev

在SwiftUI中設定頁面為深色模式。 preferredColorScheme 只需在最外層頁面加入方法{icode}.preferredColorScheme(.dark){/icode}。 括號內可用的值有{icode}.none{/icode}、{icode}.dark{/icode}、{icode}.light{/icode}。 {code} NavigationView {   ... } .preferredColorScheme(.dark) {/code} 取得App目前的顏色模式 此環境參數可取得App目前的顏色模式，使用{icode}preferredColorScheme{/icode}修改顏色模式後，此值就會更新。 {code} @Environment(\.colorScheme) private var colorScheme {/code}

試著建置開發Next.js網站所需要的環境吧！ 最近又想整理一下自己的網站，找了許多資料後，打算以Next.js + Github Pages的方式來建立自己的網站。 現在就一起來看看，使用Next.js所需的環境要如何建置吧！ 零、安裝command line developer tools 如果mac電腦還没有安裝過command line developer tools，安裝nvm時可能會遇到一些麻煩，如果還没安裝過，先安裝一下吧～ {code}xcode-select --install{/code} 一、安裝 nvm 其實不安裝nvm也可以，只是如果以後Node.js要升級好像有點麻煩；還有許多不同的Node.js版本管理器，挑選自己喜歡的安裝吧～ 這裡以安裝nvm為例，安裝時需要在使用者資料夾中有.zshrc這個文件，如果没有，就需要先新增一下再安裝。 安裝完成後​​，​輸入{icode}source ~/.zshrc{/icode}讓終端機​讀到.zshrc的內容，​再​輸入nvm -v檢查一下有没​有​安裝​成功​。 {code} touch ~/.zshrc curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash source ~/.zshrc nvm -v {/code} 二、安裝Node.js、npm 再來就可以用nvm安裝Node.js了，安裝Node.js就會一起安裝npm，只要執行{icode}nvm install --lts{/icode}就會自動安裝最新的Node.js LTS版本。 {code} nvm install --lts node -v npm -v {/code} 如果要安裝特定版本就把—lts改為需要的版本編號，例如{icode}nvm install 18.5.0{/icode}即可。 三、建立新Next.js網站 安裝完Node.js後，就可以使用{icode}npx{/icode}建立Next.js網站了；先將終端機移動到要建立網站的資料夾，執行{icode}npx create-next-app{/icode}後，會詢問要新增的專案名稱，填完就會在所在位置新增專案資料夾並下載Next.js網站所需的檔案。 ...

打開 Terminal 輸入 sudo nano /etc/systemd/logind.conf 開啟檔案 找到 #HandleLidSwitch=suspend 刪除 # ，並將 suspend 改為 ignore 儲存檔案 輸入 systemctl restart systemd-logind 重新啟動服務

AOS 讓你的網頁只需加入一些簡單的語法 ，就能根據目前頁面捲動到的位置對元素執行指定的動畫。 加入 AOS 的 js 和 css。 {code} <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" /> <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> {/code} 在元素中加入 data-aos="fade-up", data-aos="fade-down" ...等屬性。 {code} <div data-aos="fade-up"></div> <div data-aos="fade-down"></div> <div data-aos="fade-right"></div> <div data-aos="fade-left"></div> {/code} 在元素後面加入 script，讓程式開始動作。 {code} <script>   AOS.init(); </script> {/code} 更多 AOS 使用方法與參數可參考：AOS

Owl Carousel 2 是一個簡易使用的輪播js套件，只要在網頁中加入一些語法即可加入輪播，可根據需要輪播圖片或圖文區塊等...

當你想要變更網址，但又不想讓網頁重新讀取網頁時，可以使用此方法。 {code} <script>   history.pushState(null, null, '/url/path/?p=page'); </script> {/code}

在執行某些 javascript 時，會需要在網頁完成讀取後才能正常執行，這時將 javascript 程式寫在 window.onload 裡就能讓程式在網頁讀取完成後再執行。 如果是讀取外部檔案，可以使用 defer 屬性來延遲程式執行。 {code} <script>   window.onload = () => {     code...   } </script> <script src="/javascript/file/path.js" defer></script> {/code}

location 不只能取得網址，還能用來重新載入網頁和轉址。 {code} <script>   // 重新載入網頁   location.reload();   // 轉址，會留下歷史記錄   location.href = 'https://www.example.com';   // 轉址，不會留下歷史記錄 (不能回上一頁)   location.replace('https://www.example.com'); </script> {/code}

當你需要利用網址來進行判斷時，可以使用 location 來取得當前網址的資訊。 {code} <script>   // https://www.example.com/event/page/?p=1&s=2#hash   location.hash;   >> "#hash"   location.host;   >> "www.example.com"   location.hostname;   >> "www.example.com"   location.href;   >> "https://www.example.com/?p=1&s=2#hash"   location.origin;   >> "https://www.example.com"   location.pathname;   >> "/event/page/"   location.port;   >> "" // 大多數瀏覽器不會顯示默認端口（http:80，https:443）   location.protocol;   >> "https:"   location.search;   >> "?p=1&s=2" </script> {/code}

變更手機瀏覽器介面的顏色，可以在網頁中加入meta來改變顏色，但不是所有瀏覽器都適用就是了... {code} <!-- Chrome, Firefox OS and Opera --> <meta name="theme-color" content="#cccccc"> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content="#cccccc"> <!-- iOS Safari: default, black, black-translucent --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> {/code}

變更input中placeholder的樣式。 {code} <style>   input::placeholder {     color: #000;   } </style> {/code}

在寫css時，有時會需要選擇有特定屬性的元素，像是元素中有某個data-value，或是連結中某個特定的網域...等，都可以用CSS 屬性選擇器來選擇元素。 {code} <style>   // 連結中有href屬性的元素   a[href] {}   // 連結的href屬性值，等於https://的元素   a[href = "https://"] {}   // 連結的href屬性值，包含https://的元素   a[href *= "https://"] {}   // 連結的href屬性值，開頭為https://的元素   a[href ^= "https://"] {}   // 連結的href屬性值，結尾為https://的元素   a[href $= "https://"] {}   // 連結的href屬性值，經空格分開值中符合https://的元素   a[href ~= "https://"] {} </style> {/code}

在網頁插入code時，加入Google Code Prettify，讓code變的方便讀取。 {code} <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css"></script> <pre class="prettyprint linenums lang-html"><code>     code... </code></pre> {/code}

在 Blogger 後台中選擇「主題」，然後在我的主題點選「編輯 HTML 」插入 GTM 的代碼，插在 head 中的 GTM 代碼第四行裡有個{icode}＆{/icode}會讓xml格式錯誤，改成{icode}&amp;{/icode}後就可以正常儲存了。 {code} <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');</script> <!-- End Google Tag Manager --> {/code}

網頁有時會在不需要換行的地方自動換行，在css中加入以下樣式強制文字不換行。 {code} <style>   white-space: nowrap; </style> {/code}

使用 nth-child 選取指定個數的元素。 {code}   /* 在body中，單數並且有.item的元素 */   body .item:nth-child(odd){     background-color:#ccc;   }   /* 在body中，雙數並且有.item的元素 */   body .item:nth-child(even){     background-color:#ccc;   }   /* 在body中，第1個並且有.item的元素 */   body .item:nth-child(1){     background-color:#ccc;   }   /* 在body中，第1, 4, 7...並且有.item的元素 */   body .item:nth-child(3n+1){     background-color:#ccc;   }   /* 3 * 0 + 1 = 1 */   /* 3 * 1 + 1 = 4 */   /* 3 * 2 + 1 = 7 */ {/code}

Google Fonts 的思源黑體和思源宋體的加入語法。 思源黑體 {code} <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <style>   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');   p {font-family: 'Noto Sans TC', sans-serif;} </style> {/code} 思源宋體 {code} <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet"> <style>   @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');   p {font-family: 'Noto Serif TC', serif;} </style> {/code}

在 css 中設定變數，重複使用，方便變更樣式。 {css} :root {   --main-color: #eeeeee; } body {   background-color: var(--main-color); } {/css}

在寫網頁的nav和lightbox時，可在背景加入模糊，讓前面的元件可以更清楚凸顯。 {css} .div {   background: rgba(0,0,0,0.8);    -webkit-backdrop-filter: saturate(180%) blur(20px);    backdrop-filter: saturate(180%) blur(20px); } {/css}