如何使用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 串連替換。 取消圖片則將這行注釋或者刪除。注釋後效果如下：

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>

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

表徵圖使用的是fontawesome，可以從github fork：
https://github.com/penn201500/Font-Awesome.git
或者訪問fontawesome：
http://fontawesome.io/icons/

修改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 = truetitle = "test"tags = "test"+++hello hugo! I am test.md

顯示效果為：

註：如果有其他好的部落客題，且託管在github上，可以clone到本地進行修改嘗試