創作內容

16 GP

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

作者：樂小呈│2021-05-05 16:57:24│巴幣：32│人氣：187

今天

把文章的內容導覽修好

嘗試搞了tabview

內容導覽

右側多了一個內容導覽，會列出文章裡的header，然後點擊會跳到那裏

原本主題就有這個功能，只是我改模板的時候弄掉了，把它修好

原本導覽的字會隨著滾動變色，但因為某些css衝突了所以沒效

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

還有文字區塊的寬度也改寬了，這才是原本主題應該有的寬度

然後是tabview

因為文章的tag頁面會把所有類型文的都列出來，所以我想用頁面的另一個屬性來把他們隔離

用個tab來切換列出的文章類型

計畫是這樣的

Hugo 可以透過判斷試來檢測文章的某些屬性，所以我想說用一個 shortcode 來搞tabview就好

把我要切換的類型傳進 shortcode，讓他畫出tabview然後根據使用者選取的 tab 來回傳類型

只要列出文章的時候判斷類型和tab選取的是不是相同就好

一直都很順利，我找到讓 hugo shortcode傳入傳出變量的方法

把網頁使用到的所有類型傳進 shortcode裡，用迴圈遍歷畫出按鈕

接下來用 javascript 給按鈕監聽事件，看是哪個按鈕被按下

然後...

我要怎麼把javascript的變量傳回去

shortcode 可以傳變量沒錯...但javascript的變量在另一個地方，沒辦法把它傳進Hugo變量

於是tabview失敗了

可能要找其他放法來做

就醬

找資料時發現的，Hugo竟然可以把整個html存進變量裡然後用 iframe 畫诶

但裡面的 hugo 語法沒辦法辨識就是了

喜歡 16 收藏引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=5140697
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：網頁|Hugo

留言共 1 篇留言

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

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

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

05-06 03:52

樂小呈：
contens滑動到哪邊顯示到哪真的比較好看，之後再研究怎麼修[e18]05-06 08:19

樂小呈：
分類我是想弄成兩層，第一層已經成功了，就像你給的這個網站
現在是卡在第二層，第二層比較像是過濾而已，不會跳轉到其他頁面，只是判斷某些條件看要不要列出來05-06 08:19

樂小呈：
類似這樣子，但我找一些資料發現都是寫死進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 可決定是否刪除您的留言，請勿發表違反站規文字。

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

追蹤私訊切換新版閱覽

作品資料夾

--- 重點文章 --- (0)
└學習、開發資源分享 (8)
└發佈的遊戲 (4)
└學習和教育 (2)
└關於樂小呈 (9)

--- 學習日誌 -- (0)
└綜合學習 (8)
└遊戲和程式 (63)
└數學和圖學 (56)
└網頁和前端 (25)
└技術和美術 (1)

--- 學習筆記 --- (0)
└零碎筆記 (27)
└複雜筆記 (5)

--- 其他文章 --- (0)
└近況和閒聊 (60)
└回顧和歷程 (26)
└遊戲和心得 (5)
└寫到一半的 (2)
└蛤 (1)

遊記 (1)

不知道分哪 (1)

未分類 (10)

leo25127 給更新至1226回：
穿越奇幻日常系小說『公爵家的獨生子』更新囉，來看看我們無厘頭的ㄎ一ㄤ少爺怎麼在異世界作威作福吧！看更多我要大聲說昨天18:35