hugo个人博客 修改主题:颜色,字体,布局



修改主题侧边栏颜色

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;
}

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

修改侧边栏布局

侧边栏不想要头像?想添加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 }}" /></a>
            <h1><a href="{{.Site.BaseURL}}">{{.Site.Title}}</a></h1>
            <p>{{.Description}}</p>

            {{ partial "follow.html" . }}
            {{ partial "navigation.html" . }}
        </header>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

id = “logo”的这一行既是图片信息,替换图片,则将 imgsrc 连接替换。 取消图片则将这行注释或者删除。注释后效果如下:
delete logo



2. 添加links
可以参考配置文件:https://github.com/penn201500/hugo-crisp-theme-for-blog/blob/master/mysite/themes/crisp/layouts/partials/navigation.html
将与header.html同目录的navigation.html文件修改为:

<hr class="nav-site-separator">
<h6>Links</h6>
<nav class="nav">
      <ul class="nav-list">
        <font size="3">

           <li class="nav-site"><a href="http://lilydjwg.is-programmer.com/" target="_blank">依云的博客</a></li>

           <li class="nav-site"><a href="http://evilbinary.org/" target="_blank">邪恶二进制</a></li>

           <li class="nav-site"><a href="http://www.wlman.cc/" target="_blank">Consec 's Blog</a></li>

           <li class="nav-site"><a href="http://www.linuxzen.com/" target="_blank">cold's world</a></li>
        </font>
      </ul>
</nav>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

<li class="nav-site"> 这一行可以编辑一个链接。
修改后效果如下:
add links



3. 只需要github follow
crisp主题的follow方式有facebook,twitter,linkedin,github,google+, rss 。
下面介绍如何只留github follow方式(添加或删除其他的follow方式类似)
将同目录下的follow.html修改如下:

<div id="follow-icons">
    <a href="https://github.com/penn201500" rel="me"><i class="fa fa-github-square fa-2x"></i></a>
</div>  
 
 
  • 1
  • 2
  • 3

图标使用的是fontawesome,可以从github fork:
https://github.com/penn201500/Font-Awesome.git
或者访问fontawesome:
http://fontawesome.io/icons/

修改follow.html的效果:
update follow method



4.增加tags和修改title
4.1 修改title
将E:\github_projects\my_blogs\mysite目录下的config.toml文件修改为:

baseurl = "http://www.learnbetter.club"
languageCode = "en-us"
title = "My Blog"
 
 
  • 1
  • 2
  • 3

4.2 add tags
1.增加tags.html文件到header.html文件所在的目录。tags.html文件的内容为:

<h6 class="sitetaglisttitle">Tags</h6>
<ul class="sitetaglist">
    {{ range first 10 .Site.Taxonomies.tags.ByCount }}
        {{ if ge .Count 1 }}
            <li><a href="/tags/{{ .Name | urlize }}">{{ .Name }} ({{ .Count }})</a></li>
        {{ end }}
    {{ end }}
</ul>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2.并修改header.html:

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

            {{ partial "follow.html" . }}
            {{ partial "navigation.html" . }}
            {{ partial "tags.html" . }}  <!--增加tags-->
        </header>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3.修改E:\github_projects\my_blogs\mysite\content\content\test.md文件为:

+++
date = "2016-05-29T23:56:41+08:00"
draft = true
title = "test"
tags = "test"
+++

hello hugo! I am test.md
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

显示效果为:
add tags and update title


注:如果有其他好的博客主题,且托管在github上,可以clone到本地进行修改尝试




转载自:https://blog.csdn.net/justheretobe/article/details/51615554

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值