1. 程式人生 > >如何使用hugo搭建個人部落格(二):修改主題:顏色,字型,佈局

如何使用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 }}" /></a>
            <h1><a href="{{.Site.BaseURL}}">{{.Site.Title}}</a></h1>
<p>
{{.Description}}</p> {{ partial "follow.html" . }}{{ partial "navigation.html" . }} </header>

id = “logo”的這一行既是圖片資訊,替換圖片,則將 imgsrc 連線替換。 取消圖片則將這行註釋或者刪除。註釋後效果如下:
delete logo

<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"> 這一行可以編輯一個連結。
修改後效果如下:
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>  

修改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"

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

顯示效果為:
add tags and update title

注:如果有其他好的部落格主題,且託管在github上,可以clone到本地進行修改嘗試