hexo乾貨系列：（三）hexo的Jacman主題優化

前言

上一篇介紹了Jacman主題的安裝和配置，今天根據上次的基礎作了些優化，讓博客看起來很舒服。

正文

首頁文章展現摘要

該主題首頁文章列表默認是所有展開，感受很差，我關閉掉了，只展現少許摘要。
修改\themes\jacman下面_config.yml中的expand改爲false便可

index:
  expand: false           ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: Read More

主題背景色修改

我給主題添加了個背景圖片，看清來很文藝
修改\themes\jacman\source\css\_base下的public.styl，找到body，添加background-image url('/img/bg.jpg')，圖片放在\themes\jacman\source\img便可

body
  background color-background
  background-image url('/img/bg.jpg')
  font-family font-default
  font-size font-size
  color color-font
  line-height line-height
  min-height: 100vh
  display: -webkit-flex
  display: flex
  -webkit-flex-direction: column
  flex-direction: column

文章內容選中顏色修改

內容選中默認是藍色的，偶然看到推酷網站上面是綠色的，很喜歡就打算把本身博客也改改。
打開\themes\jacman\source\css\_partial下面的index.styl在最下面添加以下代碼，須要配置選中背景色和字體顏色

::selection
    background #33a183
    color #fff
::-moz-selection
    background #33a183
    color #fff
::-webkit-selection
    background #33a183
    color #fff

從新部署一下點開一篇文章查看下效果，如圖

頂部頭像修改

默認的黑桃感受很差看，我本身找了張圖片替代，而且圖片弄成圓形效果
修改\themes\jacman下_config.yml中的imglogo的src屬性，我這裏使用gif會動的圖

imglogo:
  enable: true             ## display image logo true/false.
  src: img/dudu.gif        ## `.svg` and `.png` are recommended,please put image into the theme folder `/jacman/source/img`.
favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/jacman/source/img`.     
apple_icon: img/jacman.jpg ## size:114px*114px,please put image into the theme folder `/jacman/source/img`.
author_img: img/author.jpg ## size:220px*220px.display author avatar picture.if don't want to display,please don't set this.
banner_img: #img/banner.jpg ## size:1920px*200px+. Banner Picture

這時候頭像仍是正方形的。修改\themes\jacman\source\css\_partial下的header.styl，在#imglogo這個下面新增border-radius 100%屬性

#imglogo
  float left
  width 4em
  height 4em
  @media mini
    width @width+1
  @media tablet
    width @width+1.5
  img
    width 4em
    border-radius 100%
    @media mini
      width @width+1.5
    @media tablet
      width @width+2

開啓多說評論

修改\themes\jacman下_config.yml中的duoshuo_shortname屬性，

#### Comment
duoshuo_shortname: rlovep ## e.g. wuchong   your duoshuo short name.
disqus_shortname:    ## e.g. wuchong   your disqus short name.

關於獲取shoutname，你們注意了，shoutname不是你登錄的用戶暱稱，而是應該去多說首頁點擊我要安裝，註冊你的多說二級域名。去掉 .duoshuo.com 部分 就是你的shoutname，下圖中tengj就是個人shoutname。

配置文章模板

咱們能夠修改根目錄下\scaffolds\post.md文件，配置好基本的信息，好比：

title: {{ title }}
date: {{ date }}
categories: 
tags: 
---

配置RSS

RSS是個好東西，可讓別人訂閱你，這裏先只介紹如何安裝，之後專門寫篇介紹RSS一些資料。
安裝步驟以下：

1. 安裝插件

npm install hexo-generator-feed --save

1. 根目錄下面_config.yml配置文件中添加以下
   

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:

1. themes\jacman下的_config.yml默認會有下面代碼，若是你的沒有就添加

#### RSS 
rss: /atom.xml ## RSS address.

1. 編譯部署

hexo deploy -g

5.查看是否成功，輸入你的博客域名，後面加上/atom.xml,好比個人是http://tengj.top/atom.xml 若是打開有下面數據就表示成功。

總結

暫時先優化這麼多，已經感受很不錯了。咱們關心的應該是內容，而不是死命折騰博客自己，總以爲它會被咱們玩壞。冏

---

更多教程能夠來我嘟嘟獨立博客裏面看到

歡迎來訪：嘟嘟獨立博客

---

最近擼了個java的公衆號，學習資源超級多，視頻，電子書，最新開發工具一個都不能少，已所有分享到百度雲盤，求資源共享，打造一個學習方便，工做方便的java公衆號，開源開源，有需求的能夠關注~撒花