iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 11

【Day 11】Hexo Fluid 主題使用指南 - Part III

writing-828911_960_720
by Free-Photos on Pixabay


文章頁

文章在首頁的小圖

在每篇文章的開頭中配置 index_img 屬性。

---
title: 文章標題
tags: [Hexo, Fluid]
index_img: /img/picture.jpg
date: 2020-03-01 18:00:00
---
以下是文章内容

圖片的存取位置和 banner 相同,/img/picture.jpg 對應的存取位置應放在 fluid/source/img/picture.jpg。
目錄可以自行定義,但必須放在 source 目錄底下,注意必須以 / 開頭
( / 為絕對路徑,關於絕對路徑和相對路徑的解釋,可以參考這篇文章:Web 基本觀念 - 相對路徑 和 絕對路徑

筆者是放在 blog/source/img 底下再新增一個 article 資料夾,在 article 內新增一個 banner 資料夾,把每一篇文章的 banner 都歸類進去,覺得這樣比較好整理圖片。

index_img: /img/article/banner/banner-04.jpg # 代表第四篇文章的 banner

文章內大圖

在每篇文章的開頭中配置 banner_img 屬性,圖片的存取位置同上。
筆者的習慣是裡外一致(首頁小圖和文章內頁同一張),也可以指定不同圖片。

---
title: 文章標題
tags: [Hexo, Fluid]
index_img: /img/picture.jpg
banner_img: /img/post_banner.jpg
date: 2020-03-01 18:00:00
---
以下是文章内容

文章內容圖片

在文章內插入以下程式碼,再指定圖片位置,存取位置同上。

![](/img/article-pic.jpg)

在文章內加入標籤 tags

在每篇文章的開頭加入 tags 屬性。
整個網站文章中有用到的標籤會被集中到標籤頁,字級越大表示與此標籤相關的文章數越多。

---
title: 文章標題
tags: [Hexo, Fluid] # 請放入[]內,標籤與標籤之間必須以半形逗號區隔
date: 2020-03-01 18:00:00
---
以下是文章内容

在文章中加入分類

在每篇文章的開頭加入 categories 屬性,詳細可參閱 官方說明 Front-matter

在文章的最下方可以看到本篇文章的分類,每個分類按進去,會跳到同樣屬於此分類的文章統整頁。
網站的所有分類也會被集中到分類頁

---
title: 文章標題
tags: [Hexo, Fluid]
categories: 
- [Blog]
- [主題]
date: 2020-03-01 18:00:00
---
以下是文章内容

請注意 分類 具有順序性和層級,例如「Blog, themes」不等於「themes, Blog」,標籤則沒有順序和層級。

例如

categories:
  - Blog
  - themes

themes 會變成 Blog子分類,而不是同一層級的分類。(相當於 Blog 是 themes 的父親
如果需要添加兩個同一層級的分類,可以嘗試以下寫法:

categories:
  - [Blog]
  - [themes]

被[]包起來的部分就會是同一層級的分類。
若想要為文章添加多個分類,其中幾個擁有子分類,可以嘗試以下寫法:

categories:
  - [Blog, themes]
  - [Blog, fluid]
  - [Hexo]

此時這篇文章同時擁有三個分類:themesfluid 都是「父分類 Blog」 的子分類,同時 Hexo 是一個沒有子分類的分類(好像在繞口令啊!)

以上就是筆者使用 Fluid 主題至今為止的指南紀錄,如果有錯誤的地方再請不吝賜教,改天會再寫一篇關於此主題如何修改 CSS 的文章。


上一篇
【Day 10】Hexo Fluid 主題使用指南 - Part II
下一篇
【Day 12】網頁設計師的靈感來源,私藏的10個網站收集頁分享!
系列文
從平面轉型成網頁設計的 UI/UX 設計師30

尚未有邦友留言

立即登入留言