如何使用hugo搭建个人博客(二):修改主题:颜色,字体,布局

上一篇博文中谈到了如何在本地使用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 }}" /></
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值