貓城

BLACKCAT CASTLE

如何自製文章目次與錨點⚓

   163 VIEWS
本文目次

長篇文章建議使用文章目次來幫助讀者快速找到他要的內容,這樣不僅讓讀者輕鬆閱讀,對 SEO 也有幫助。一般來說,Wordpress 或 Joomla 等開源平台都有預設的目次功能,不過如果能了解目次與錨點的原理,在任何網站下都能自製理想的文章目次。

首先,我們要先做一個目次,接著在需要的段落給予適當的標題,並在標題中下錨點,如此便完成了。

展示範例與 Code 請參考:DEMO 文章目次與錨點

說明

上面的範例是基本樣式,可以依照自己的理想去設計其他版型,以下將說明目次與錨點的細節。

目次要設定的部分就是<li>中的網址,需在裡面加上#,後面自訂文字,例如<a href="#test">,接著是文章中的標題<h2>、<h3>、<h4>等(註:請不要用 h1,h1 是網頁文章標題,一個網頁只能放一個 h1),裡面需要給 id 值,這個 id 就是剛剛自訂的文字(不用加上 # ),例如<a id="test">,這樣基本的目次便完成了。

樣式說明

目次使用的是項目清單列表,主要分為<ul>跟<ol>兩種,<ul>為無排序清單,因此上面的範例中會看到只有點點沒有數字,而<ol>為排序清單,如果將 ul 改為 ol 那麼就有數字列表了。

除了使用 ul 或 ol 來區分之外,也可以自訂排序樣式,只要設定 class 並修改 list-style-type 的參數即可,以下列出常見參數:

範例:
<ul style="list-style-type:disc">
	<li></li>
	<li></li>
	<li></li>
</ul>
效果:

各種參數:

參數 說明 樣式
none 不顯示符號
disc 實心圓形
square 實心正方形
circle 空心圓形
lower-alpha 小寫英文字母
upper-alpha 大寫英文字母
decimal 阿拉伯數字
decimal-leading-zero 阿拉伯數字,前方帶有0數字
lower-roman 小寫羅馬數字
upper-roman 大寫羅馬數字
cjk-earthly-branch 地支
cjk-heavenly-stem 天干
cjk-ideographic 中文
hangul 韓文
hiragana 日文平假名
katakana 日文片假名
korean-hanja-formal 中文大寫
arabic-indic 阿拉伯文
lower-greek 希臘語
armenian 亞美尼亞文
bengali 孟加拉文
cambodian 柬埔寨文


時雨 時雨,時雨の町-日文學習園地站長,為了記錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站相關知識與網頁程式語言。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS