如何使用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
替換之後效果:
修改主題字型
在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 }}" /></a>
<h1><a href="{{.Site.BaseURL}}">{{.Site.Title}}</a></h1>
<p>{{.Description}}</p>
{{ partial "follow.html" . }}{{ partial "navigation.html" . }}
</header>
id = “logo”的這一行既是圖片資訊,替換圖片,則將 imgsrc 連線替換。 取消圖片則將這行註釋或者刪除。註釋後效果如下:
<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>
<li class="nav-site">
這一行可以編輯一個連結。
修改後效果如下:
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>
修改follow.html的效果:
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"
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>
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>
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
顯示效果為:
注:如果有其他好的部落格主題,且託管在github上,可以clone到本地進行修改嘗試