如何使顶部链接围绕雨果中的人物居中

Question

我正在接触 hugo，但我不确定如何创建一个带有围绕中心图像的选项卡的 hugo 站点。如下：

我想不通的是 (1) 如何在标题周围画线，(2) 更重要的是将图像放在中央。我一直在尝试使用学术、博客和最小模板来做到这一点。我试图查看的所有模板的旁边都有图标。也许其他一些模板更好，但我不知道如何让顶部菜单列表以中心的圆圈（它是 png）为中心。有什么建议么？ TIA.

Answer 1

在您的布局中使用此 HTML：

<div id="navbar">
  <a href=""><img src="" /></a>
  <ul>
    <li><a href="">item 1</a></li>
    <li><a href="">item 2</a></li>
  </ul>
  <ul>
    <li><a href="">item 3</a></li>
    <li><a href="">item 4</a></li>
    <li><a href="">item 5</a></li>
  </ul>
</div>

并添加以下内容CSS：

#navbar {display: flex; justify-content: space-between;}
#navbar ul {display: flex;}
#navbar ul li {list-style: none;}
#navbar > a {position: absolute; left: 50%; transform: translateX(-50%);}

如何使顶部链接围绕雨果中的人物居中

how to center the top links around a figure in hugo

html

css

hugo