How to use Hugo to build a personal blog (ii): Modify theme: color, font, layout

This is a creation in Article, where the information may have evolved or changed.

In the previous blog post on how to use Hugo to preview a specific topic crisp, this article describes the theme of color, font, and layout modifications.

To modify the theme side sidebar color

Crisp theme of the sidebar is white by default, if you want to change the color?
To the GitHub warehouse https://github.com/penn201500/hugo-crisp-theme-for-blog/get hugo-crisp-theme-for-blog/mysite/themes/ crisp/layouts/partials/criticalpath.html file, replace the file with the same name as the local themes directory, as
E:\github_projects\my_blogs\mysite\themes\hugo-theme-crisp\layouts\partials\criticalpath.html
Post-Replacement effect:

Modify Theme Font

In the criticalpath.html file, look for the font-family. Then modify the font type, size, color, etc.

Body,HTML{  font-size: 1em;     line-height: 1.65em;     font-family:"Open Sans", Sans-serif;  font-weight:  color:#444 background-color: #ecf0f1; }

Modify the sidebar layout

Do you want a picture on the side bar? Want to add links? As long as GitHub follow?
Here's how to implement these requirements

1. Remove the Avatar
Edit the header.html file in the Layouts/partial directory:
such as: 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" This line is both picture information, replace the picture, then replace the IMGSRC connection. Canceling the picture will comment or delete the line. The post-comment effect is as follows:

2. Add links
You can refer to the configuration file: https://github.com/penn201500/hugo-crisp-theme-for-blog/blob/master/mysite/themes/crisp/layouts/ Partials/navigation.html
Modify the navigation.html file with the header.html directory to:

<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" >Evian's Blog</a></li>           <li class="Nav-site"><a href="http://evilbinary.org/" target="_blank" >Evil binary</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">You can edit a link in this line.
The following effects are modified:

3. Only the GitHub follow
Crisp theme follow way to have Facebook,twitter,linkedin,github,google+, RSS.
Here's how to leave only GitHub follow mode (add or remove other follow)
to modify the follow.html in the same directory as follows:

<div  id  = "follow-icons" ;  <a  href  =  "https://github.com/penn201500"  rel  = "Me" ;  i  class  = "FA Fa-github-square fa-2x ";  </i  >  </a ;  </< Span class= "Hljs-title" >div ;   

The icon uses the Fontawesome, which can be fork from GitHub:
Https://github.com/penn201500/Font-Awesome.git
or visit Fontawesome:
http://fontawesome.io/icons/

To modify the effect of follow.html:

4. Add tags and modify title
4.1 Modifying the title
Modify the Config.toml file in the E:\github_projects\my_blogs\mysite directory to:

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

4.2 Add tags
1. Add the tags.html file to the directory where the header.html file resides. The contents of the tags.html file are:

 <h6 class="Sitetaglisttitle">Tags</h6> <ul class="Sitetaglist">     {{ range  first .} Site.Taxonomies.tags.ByCount }}        {{ if ge .} Count 1}} <li><a href="/tags/              {{ . Name | urlize }} ">{{ . Name }} ({{ . Count }})</a></li>         {{ end }}    {{ end }}</ul>

2. and modify header.html:

 <header id="header"><!--<a id= "logo" href= "                   {{ . Site.baseurl }}" > "{{ . Site.title }} "/></a>--<H1><a href="            {{. Site.baseurl}} ">{{. Site.title}} </a></H1><p>             {{. Description}}</P>            {{ partial ' follow.html ' . }}            {{ partial ' navigation.html ' . }}            {{ partial ' tags.html ' . }} <!--add tags--></header>           

3. Modify the E:\github_projects\my_blogs\mysite\content\content\test.md file to:

+++date = "2016-05-29T23:56:41+08:00"draft = truetitle = "test"tags = "test"+++hello hugo! I am test.md

The display effect is:

Note: If you have other good blog themes and are hosted on GitHub, you can clone to a local to make a modification attempt