iT邦幫忙

0

Nuxt.js Vue實現類似wordpress TOC 抓取頁面中h2自動生成目錄

  • 分享至 

  • twitterImage

各位前輩好

想請問使用nuxt.js和vue的狀況下
是否可以實現類似wordpress TOC插件的效果,插件說明如下
https://themeforwp.net/archives/wordpress-automatically-generates-a-directory-listing-plugin-table-of-contents-plus/

主要是想達到抓取網頁中的h2然後自動生成目錄
效果像下面的網頁(電腦版往下拉才會看見,會固定在右上方的目錄)
https://sango.cloud/fastest-install/

因為靜態,動態的頁面都想直接通用
所以從data生成的先不考慮

然後同事不喜歡用jquery(?)
所以想問用原生的vue是否可以達成?或是有plugin可以用嗎?

謝謝!

ccutmis iT邦高手 2 級 ‧ 2019-10-16 12:59:08 檢舉
document.querySelectorAll("h2")
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

4
dragonH
iT邦超人 5 級 ‧ 2019-10-16 13:41:37

codepen

如果你只是要抓 <h2>

然後弄成類似一個目錄

那應該是 js 的問題

然後在補上錨點的功能

應該就是你想要的

甲土豆 iT邦新手 5 級 ‧ 2019-10-16 16:02:12 檢舉

H大,永遠不會讓我們失望

dragonH iT邦超人 5 級 ‧ 2019-10-16 16:15:42 檢舉

/images/emoticon/emoticon82.gif

H大,永遠不會讓我們失望/images/emoticon/emoticon07.gif

我要發表回答

立即登入回答