---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 JS 任務 Day25 - Hexo 新增一篇文章、選單

## 新增新的文章與上方選單

### 新增文章

在終端機中打上以下程式碼新增一篇新的 .md 檔

hexo new '文章名稱'

就會在 source > posts 內產生一個 .md 檔，
針對這個新增的 .md 檔內容規劃後就能產生一個新的頁面



接著就能透過以下程式碼打開 hexo 觀看我們的內容

hexo server

接著就可以使用此網址 `http://localhost:4000` 看到 hexo 的內容

終端機中也會有該連結的提示結

### 新增選單


#### 第一步 - 新增路由

我們可以使用此指令 `hexo new page 路由名稱` 新增一個選單頁面
像是想要新增一個 About 頁面，讓我們可以撰寫一些我的個人資訊的頁面，
可以輸入 `hexo new page about` ，
此時系統會自動化新增一個`source/about/index.md` 檔案，
我們就能編輯該頁的內容。

當開啟 hexo server 時，就可以使用此網址 `http://localhost:4000/about` 進入 about 頁面

#### 第二步 - 將路由實體公布到選單中

接下來我們要將剛剛新增好的頁面加進選單中，需要加入 hexo-theme-landscape 此為 hexo 的主題樣式，幫助我們調整。

依照下方方式使用 git clone 的做法複製檔案


在終端機輸入 `git clone --depth 1 https://github.com/hexojs/hexo-theme-landscape themes/landscape`

> --depth 1 的意思是只下載最近一次的更新檔(因為 GitHub 會記錄每一次更新的資料)，可以避免下載到不需要的資料。

此時會在專案中產生 `themes/landscape` 資料夾，我們就可以在該資料夾中的 `_config.yml` 檔案調整選單 menu

>完整位置為 `themes/landscape/_config.yml`

在「Navigation menu」下將我們剛剛新增的頁面加入選單中


>紅底線為新增的路由

menu:
  Home: /
  Archives: /archives
  About: /about

前方為我們視覺上要呈現的名字（About），後方 /about 是我們在 url 加上的位置，為進入該網頁的路徑名。

### 參考資源
- 課程影音「只用一道指令，瞬間建立一則部落格！」
- 課程影音「全域網站加入客製選單」

## 回報流程

1. 將新的貼文與選單頁截圖後上傳

2. 若已習得上傳 GitHub 也能將網頁之 REPO 與 PAGE 上傳與回報區


回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/ExzNzRL) |
| 2 | Aya | [PAGES](https://study-hex.github.io/try-hexo/) |
| 3 | JY |[Codepen](https://codepen.io/jylee0805/pen/VwOmOoo) |
| 4 | anderson666 |[Codepen](https://goodmanbuild.github.io/hexo0526/) |
| 5 | Ariel | [PAGE](https://ariel0508.github.io/firstBlog/) |
| 06 | Tough life | [HackMD](https://hackmd.io/@hakuei0115/rkuw4fEEA) |
| 7 | Chia Pin | [HackMD](https://codepen.io/joker-cat/pen/wvboLJd) |
| 8 | Shen | [PAGE](https://shen-w-w.github.io/hexo-/)
| 9 | kawa | [PAGE](https://kawa3310.github.io/2024-hexo-tesk/)
| 10 | yunyouob | [PAGE](https://qiaowind.github.io/hexo-demo/)|
| 11 | Zander | [Codepen](https://codepen.io/pen/) |
| 12 | boin | [PAGES](https://github.com/BernieJi/blog) |
| 13 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/MWdJXbe) |
| 14 | 毛巾 | [Github_Pages ](https://maojin-juan.github.io/Maojinjuan/)[Github_Repo](https://github.com/Maojin-juan/Maojinjuan) |
| 15 | macihuang | [PAGES](https://macy1215.github.io/macyblog/) |
| 16 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/NWVgJBG) |
| 17 | Anais77 | [Repo](https://github.com/Anais7775/studyShop)/[Pages](https://anais7775.github.io/studyShop/)|
| 18 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/XWwexPL)|

---

<!--
| num | user | [Codepen]() |
-->