--- tags: 軟體工程師體驗營 - 2024 --- # 🏅 JS 任務 Day26 - Hexo 調整樣式 ### 客製化網站 head 設定 在最外層的 `_config.yml` 檔案中， ![image](https://hackmd.io/_uploads/Bk0S7pVEA.png) 可以看到「`# Site`」有以下的參數可設定 ![](https://imgur.com/wSEfxWP.png) 詳細說明如下： ``` title: 網站中的首要標題 subtitle: 網站中的次要標題，進一步說明主標題 description: 簡要的說明網站，這能有助於搜尋引擎優化與提供讀者更進一步的說明 keywords: 網站內的關鍵字，有助於提升搜尋引擎優化 author: 作者 language: 網站主要使用的語言 timezone: 網站使用的時區 ``` 可以將這些區塊補充完整，以便更好的管理與優化網站的資訊。 ### 客製化樣式調整 接下來可以運用 Hexo 中的變數設定來調整部落格中的樣式，將特定頁面的內容變為滿版並移除右側的標籤設定，主要會調整到 theme/layout/layout.ejs 檔案 > layout.ejs： > 此為多數頁面共用的樣板，頁面的主要內容區塊會放在 #main 中，其他區塊拆分成各個 .ejs 檔案獨立管理，像是 `_partial/header` 為表頭區塊、`_partial/sidebar` 為右側欄位的部分 ...等等 > > 詳細可以再觀看課程影片「Hexo 中階 - 客製化網頁樣式」了解 **設定變數** 我們可以在想要呈現滿版頁面的 `.md` 檔設定 fullPage 變數，讓我們後續可以藉由此變數控制該頁面是否滿版 以下圖為例，我們將 test 頁面設定 fullPage 來控制該頁是否要滿版 （true: 滿版｜false: 非滿版） ![](https://imgur.com/GYfOevn.png) **隱藏右側標籤** 要讓頁面滿版需要隱藏右側標籤欄位，我們可以進入 `themes/landscape/layout/layout.ejs` 檔案調整。 我們找到下方這句表示右側標籤部分的語法： ``` if (theme.sidebar && theme.sidebar !== 'bottom'){ ``` > theme.sidebar 為 `theme/landscape/_config.yml` 中 sidebar 的值 改寫為： ``` if (!page.fullPage && theme.sidebar && theme.sidebar !== 'bottom'){ ``` 利用 `page.fullPage`，取得我們在頁面中設定的 fullPage 值， 加入 `!page.fullPage` 這段語法就能控制當我們頁面設定的 fullPage 變數為 true 時，就不呈現 if 內的`_partial/sidebar` 區塊。 **動態帶入 class** 此時會發現因為 #main 區塊本身有預設寬度的關係導致頁面內容還是無法滿版（可以使用開發人員工具觀看）。 接下來我們可以透過 fullPage 變數動態帶入 class，當頁面設定的變數 fullPage 是 true 時，就加入 `fullPage` 這個 class，就能透過這個新增的 `fullPage` class 來調整 CSS 的設定 在 layout.ejs 檔案中，我們在最外層加入動態 class 的語法 ![](https://imgur.com/d9ogJUv.png) 在 `id="container"` 後面加上以下程式碼，當我們頁面 fullPage 狀態是 true 時就能加入 `class="fullPage"` ``` class="<%= page.fullPage === true ? 'fullPage' : '' %>"> ``` > 使用三元運算子判斷 接著我們就能利用 fullPage 這個 class 搭配 #main 提升 CSS 權重覆蓋預設的樣式寬度 在 `<body>` 上方新增 `<style> ... </style>` 並設定 CSS 的內容： ```css .fullPage #main { width: 100%; } ``` 這樣就可以成功將頁面調整為滿版哩！ ## 題目 調整部落格的 title、description ..等 `_config.yml` 設定，並將 About 頁面內容調整為滿版以及嘗試依照上方技巧移除頁面內容的預設區塊（標題上方的時間與下方 share 區塊），讓 About 頁面只有標題與內容 >![](https://imgur.com/SmRc3fK.png) ## 回報流程 將答案截圖，並將圖片連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： 以下提供兩種方式移除標題上方時間與下方 share 區塊： 1. 在 layout.ejs 直接使用 CSS 設定： ``` .fullPage .article-meta, .fullPage .article-footer { display: none; } ``` 2. 在 article.ejs 運用 fullPage 變數判斷： ``` <% if (!post.fullPage){ %> <div class="article-meta"> ...略 </div> <% } %> ...略 <% if (!post.fullPage){ %> <footer> ...略 </footer> <% } %> // 在 page.ejs 中，page 改為使用 post 區域變數帶入，因此需要使用 post.fullPage 才能取得 fullPage 的值 可參考：https://hexo.io/zh-tw/docs/templates#%E5%8D%80%E5%9F%9F%E8%AE%8A%E6%95%B8 ``` --> 回報區 --- | 報數 | Discord 名字 | Codepen／其他回饋 | |:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:| | 1 | JY |[Codepen](https://codepen.io/jylee0805/pen/BaepZXJ) | | 2 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/zYQNdqY) | | 3 |Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/ZENLJaz) | | 04 | Tough life | [HackMD](https://hackmd.io/@hakuei0115/r1b9gOSNC)/內有解釋 | | 05 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/MWdJEBm) | | 06 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/GRarOXN) | | 07 | yunyouob | [PAGE](https://qiaowind.github.io/hexo-demo/about/)| | 08 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/bGygKZE)| | 09 | macihuang | [PAGES](https://macy1215.github.io/macyblog/about/)| | 10 | boin | [PAGES](https://bernieji.github.io/blog/about/)| | 11 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/JjqJVwg)| | 12 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/ExzwdBa)| <!-- | num | user | [Codepen]() | -->