快轉到主要內容

試驗性Hugo圖形化文章分類,grid排列的Categories頁面

分類   資訊科技 Hugo網站架設
🗓️ 民國112年 癸卯年
✍ 切換正體/簡體字

這是試驗性的圖形化文章分類頁面,直接拿post模板來改。利用Hugo MemE主題的frontmatter去掉post的多餘資訊,再加上grid排列表格製作的圖片按鈕,用以取代MemE主題的純文字分類頁面。

這樣我就可以自由控制出現在「全部分類頁面」的文章。但因為不直覺所以暫時不採用。就好比PChome24H現在改版了,我還是喜歡舊版那醜陋卻一目了然的界面吧。

使用的CSS範本,讓圖片無法點選。

<style type="text/css">
img {
  pointer-events: none;
  user-select: none;
}
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border:hidden;
  overflow:auto;padding:5px 5px;word-break:normal;}
.tg th{border:hidden;
  font-weight:normal;overflow:auto;padding:5px 5px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align;}

</style>

HTML表格,讓圖片成為超連結按鈕,為手機著想所以一排表格只有三格。圖示使用 GNOME Emblem SVG Repo的圖片製作。

<table class="tg" style="border:hidden;">
<thead>
<tr>
    <td class="tg-baqh"><a href="/categories/資訊科技應用/"><img src="/icons/emblem17.png" width=96 height=96 alt=""></a>資訊科技應用</td>
    <td class="tg-baqh"><a href="/categories/hugo網站架設/"><img src="/icons/emblem18.png" width=96 height=96 alt=""></a>Hugo網站架設</td>
  </tr>
</thead>
</table>

呈現效果如下:

相關文章

自訂Hugo的RSS訂閱,過濾特定文章不讓其出現在RSS列表
分類   資訊科技 Hugo網站架設
標籤   Hugo RSS Feed
如何修改自訂Hugo主題:程式碼覆寫(layout override)
分類   資訊科技 Hugo網站架設
標籤   Hugo Theme
「站中有站」 ~ 同一Hugo網站使用二個以上主題的做法
分類   資訊科技 Hugo網站架設
標籤   Hugo Theme

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur或Postimages。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。為防止垃圾內容,有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。若要上傳圖片請善用圖床網站。