日誌2021-05-05 16:57

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

今天

把文章的內容導覽修好

嘗試搞了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

1

LINE 分享

相關創作

【紀錄】Hugo 翻頁 5/17

【開發日誌】個人網站重建

【紀錄】Hugo 翻頁 5/14

留言

• 2021-05-06 03:52md9830415：
  如果是table of contens的話，再美觀一點應該就是滑動到哪邊顯示到哪，像是這個
  https://themes.gohugo.io//theme/hugo-theme-zzo/en/posts/markdown-syntax/
  
  如果是根據分類轉換的話，可以用用看Categories來分類?
  這主題看看，這頁面上面那一排就有應該是你想要的效果，參考可以他主題的Code改看看
  https://demo.stack.jimmycai.com/archives/
  
  詳細就不曉得了，因為我是花一堆時間找主題，但找到後只改依些細部而已

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

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

  2021-05-06 08:19樂小呈：類似這樣子，但我找一些資料發現都是寫死進HTML裡的，沒辦法用回圈[e3]
  https://aws1.discourse-cdn.com/standard10/uploads/gohugo/optimized/2X/3/35451c8a95e200eb2d1386b56ba47b12b6d19d73_2_690x288.png

  2021-05-06 08:22樂小呈：或像這樣的
  https://www.w3schools.com/howto/howto_js_tabs.asp
  

• 送出