ETH官方钱包

創(chuàng)作內(nèi)容

16 GP

【紀錄】Hugo tabview大失敗 5/5

作者:樂小呈│2021-05-05 16:57:24│巴幣:32│人氣:201
今天
把文章的內(nèi)容導覽修好

嘗試搞了tabview

內(nèi)容導覽
右側(cè)多了一個內(nèi)容導覽,會列出文章裡的header,然後點擊會跳到那裏
原本主題就有這個功能,只是我改模板的時候弄掉了,把它修好
原本導覽的字會隨著滾動變色,但因為某些css衝突了所以沒效

是說妳們覺得導覽有需要跟著跑嗎,還是釘在原本的位置就好?

還有文字區(qū)塊的寬度也改寬了,這才是原本主題應(yīng)該有的寬度


然後是tabview
因為文章的tag頁面會把所有類型文的都列出來,所以我想用頁面的另一個屬性來把他們隔離
用個tab來切換列出的文章類型

計畫是這樣的
Hugo 可以透過判斷試來檢測文章的某些屬性,所以我想說用一個 shortcode 來搞tabview就好
把我要切換的類型傳進 shortcode,讓他畫出tabview然後根據(jù)使用者選取的 tab 來回傳類型
只要列出文章的時候判斷類型和tab選取的是不是相同就好

一直都很順利,我找到讓 hugo shortcode傳入傳出變量的方法
把網(wǎng)頁使用到的所有類型傳進 shortcode裡,用迴圈遍歷畫出按鈕
接下來用 javascript 給按鈕監(jiān)聽事件,看是哪個按鈕被按下

然後...
我要怎麼把javascript的變量傳回去
shortcode 可以傳變量沒錯...但javascript的變量在另一個地方,沒辦法把它傳進Hugo變量


於是tabview失敗了  
可能要找其他放法來做

就醬
找資料時發(fā)現(xiàn)的,Hugo竟然可以把整個html存進變量裡然後用 iframe 畫誒
但裡面的 hugo 語法沒辦法辨識就是了

引用網(wǎng)址:http://www.jamesdambrosio.com/TrackBack.php?sn=5140697
All rights reserved. 版權(quán)所有,保留一切權(quán)利

相關(guān)創(chuàng)作

同標籤作品搜尋:網(wǎng)頁|Hugo

留言共 1 篇留言

md9830415
如果是table of contens的話,再美觀一點應(yīng)該就是滑動到哪邊顯示到哪,像是這個
https://themes.gohugo.io//theme/hugo-theme-zzo/en/posts/markdown-syntax/

如果是根據(jù)分類轉(zhuǎn)換的話,可以用用看Categories來分類?
這主題看看,這頁面上面那一排就有應(yīng)該是你想要的效果,參考可以他主題的Code改看看
https://demo.stack.jimmycai.com/archives/

詳細就不曉得了,因為我是花一堆時間找主題,但找到後只改依些細部而已

05-06 03:52

樂小呈
contens滑動到哪邊顯示到哪真的比較好看,之後再研究怎麼修[e18]05-06 08:19
樂小呈
分類我是想弄成兩層,第一層已經(jīng)成功了,就像你給的這個網(wǎng)站
現(xiàn)在是卡在第二層,第二層比較像是過濾而已,不會跳轉(zhuǎn)到其他頁面,只是判斷某些條件看要不要列出來05-06 08:19
樂小呈
類似這樣子,但我找一些資料發(fā)現(xiàn)都是寫死進HTML裡的,沒辦法用回圈[e3]
https://aws1.discourse-cdn.com/standard10/uploads/gohugo/optimized/2X/3/35451c8a95e200eb2d1386b56ba47b12b6d19d73_2_690x288.png05-06 08:19
樂小呈
或像這樣的
https://www.w3schools.com/howto/howto_js_tabs.asp
05-06 08:22
我要留言提醒:您尚未登入,請先登入再留言

16喜歡★angus945 可決定是否刪除您的留言,請勿發(fā)表違反站規(guī)文字。

前一篇:【紀錄】Hugo 文章t... 後一篇:【紀錄】Hugo tab...

追蹤私訊切換新版閱覽

作品資料夾

Shana963各位
大量的肉食引起人類的糧食危機 http://www.jamesdambrosio.com/artwork.php?sn=5946352看更多昨天14:00


face基於日前微軟官方表示 Internet Explorer 不再支援新的網(wǎng)路標準,可能無法使用新的應(yīng)用程式來呈現(xiàn)網(wǎng)站內(nèi)容,在瀏覽器支援度及網(wǎng)站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現(xiàn)和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業(yè)系統(tǒng)版本才可使用)

face我們了解您不想看到廣告的心情? 若您願意支持巴哈姆特永續(xù)經(jīng)營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】