如何使用hugo搭建个人博客（二）：修改主题：颜色，字体，布局

最新推荐文章于 2024-08-23 09:11:24 发布

learn2t

最新推荐文章于 2024-08-23 09:11:24 发布

阅读量1.3w

点赞数 3

分类专栏：软件工具文章标签：博客 hugo 搭建博客静态博客 github

本文链接：https://blog.csdn.net/justheretobe/article/details/51615554

版权

上一篇博文中谈到了如何在本地使用hugo预览特定主题crisp，本文介绍主题的颜色，字体，布局的修改。

修改主题侧边栏颜色

crisp主题的侧边栏默认是白色，如果想改个颜色咋办？
到github仓库 https://github.com/penn201500/hugo-crisp-theme-for-blog/ 获取 hugo-crisp-theme-for-blog/mysite/themes/crisp/layouts/partials/criticalpath.html 文件，替换本地themes目录下的同名文件，如
E:\github_projects\my_blogs\mysite\themes\hugo-theme-crisp\layouts\partials\criticalpath.html
替换之后效果：
hugo update sidebar bgcolor

修改主题字体

在criticalpath.html文件中，查找font-family。然后修改字体类型，大小，颜色等

body,html
{
    font-size: 1em;
    line-height: 1.65em;
    font-family:"Open Sans",sans-serif;
    font-weight:300;color:#444
    background-color: #ecf0f1;
}

修改侧边栏布局

侧边栏不想要头像？想添加links？只要github follow？
下面介绍如何实现这些需求

1.去掉头像
编辑layouts/partial目录下的header.html文件：
如：E:\github_projects\my_blogs\mysite\themes\hugo-theme-crisp\layouts\partials

        <header id="header">
            <a id="logo" href="{
   { .Site.BaseURL }}"><img src="https://www.gravatar.com/avatar/1a2807faf3cca1667ff6f04bf5886eff.png" alt="{
   { .Site.Title }}" /></