這是試驗性的圖形化文章分類頁面,直接拿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>
呈現效果如下: