OXYGEN Modal應用-製作固定在側邊可開合的文章目錄LuckyWP TOC

|發布於:
2021-08-26
❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

Last updated at — 2021-09-09 03:41

因為我的文章很長(尤其是美妝傲客的文章都是近萬字),所以,從開始寫部落格,就很想要能夠固定在側邊+可以開合的目錄外掛。
要將文章目錄固定在側邊一點都不難,position:fixed;就能搞定,但是,要能開合,就要寫一些Java Script了,比如說Jquery。我知道有一個付費的目錄外掛,叫做Fixed TOC❐,它可以滿足這些功能。
不過,既然已經OXYGEN了,便想到可用『Modal』這個element,既不用自己寫JS,就能用簡單的方式,達到固定在側邊+可以開合的目錄。

用Modal+LuckyWP TOC製作固定在側邊可開合的文章目錄

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

需要的工具

操作步驟(影片中的章節)

  • 00:00 OXYGEN Modal應用-搭配LuckyWP table of contents製作固定在側邊可開合的文章目錄
  • 01:30 新增文章模板
  • 03:40 用Div+Text Link製作「文章目錄」的按鈕
  • 04:00 設定「文章目錄」按鈕的位置
  • 05:10 設定「文章目錄」按鈕的樣式
  • 10:10 新增Modal
  • 11:10 設定Modal去觸發「文章目錄」的TextLink的「ID」
  • 11:55 爲「文章目錄」的TextLink設定較高的Z-index
  • 13:20 Modal Trigger設定自動收合關閉
  • 15:00 設定Modal的寬度
  • 17:20 設定Modal的位置
  • 18:25 新增ShortCode以放入目錄外掛的ShortCode
  • 18:45 LuckyWP Table of Contents
  • 20:05 加入LuckyWP的ShortCode
  • 21:40 爲ShortCode設定樣式
  • 22:10 ShortCode要設定最大高度
  • 22:50 ShortCode要加入自訂CSS code,將超過高度的目錄要能垂直滾動
  • 23:45 新增文章,以展示製作好的目錄
  • 24:25 文章需套用剛剛做好的含有目錄的模板
  • 25:00 調整LuckyWP的背景顏色,以符合Modal的配景顏色
  • 25:50 設定Modal在手機裡的尺寸
  • 28:35 設定「目錄按鈕」在手機裡的位置
❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

LuckyWP TOC的設定

因為LuckyWP TOC的功能比較多,所以,懶得設定的人可以參考我的設定,以後有時間,我再寫一篇詳細的教學介紹。

以下圖片是我的設定

LuckyWP-Table-of-Content-1LuckyWP-Table-of-Content-2Table-of-Content-3Table-of-Content-4LuckyWP-Table-of-Content-5|目錄外掛
⇦左右滑動看其他圖片⇨
好嘛好嘛...臨走前幫我拍拍手嘛
如果你願意免費幫助我,請在下方圓形按鈕幫我拍拍手。
最多可以按5下,那就幫我按5下吧!
算我求你啦啦啦~~~
謝謝你、我愛你❤
臉書或Google帳號就可以快速登入喲...

▍關於作者|MiriamMibao温唯
2019.02.11,我開始了這裡…
不懂css、不懂php,當然-也不知道誰是Nginx、誰又是Apache…
硬要WordPress架站,一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!這一路走來,跌跌撞撞,摸索過國內外能夠解決問題的資料…
是不是該好好紀錄這一段跌跌撞撞的探索日記?或許,也能帶給你們一些幫助...
以下歡迎留言討論囉!
我只想當個旁觀者,有新的留言請通知我(按一下輸入Email信箱)
想Fallow哪種留言?
0 留言板
Inline Feedbacks
查看所有留言

Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.

-
Cloudways專屬折扣☞註冊輸入折扣碼
BFCM2021
,獲得首四月6折優惠!
Cloudways專屬折扣☞輸入折扣碼
享首四月6折優惠!
文章
目錄
請我喝咖啡
支持我繼續創作
訂閱搶先看
0
對文章有任何疑問或想法嗎?歡迎一起討論唷!x
()
x