前言
上一篇介紹了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一些資料。
安裝步驟如下:
- 安裝插件
npm install hexo-generator-feed --save
- 根目錄下面_config.yml配置文件中添加如下
feed:
type: atom
path: atom.xml
limit: 20
hub:
- themes\jacman下的_config.yml默認會有下面代碼,如果你的沒有就添加
#### RSS
rss: /atom.xml ## RSS address.
- 編譯部署
hexo deploy -g
5.查看是否成功,輸入你的博客域名,后面加上/atom.xml,比如我的是http://tengj.top/atom.xml 如果打開有下面數據就表示成功。
總結
暫時先優化這么多,已經感覺很不錯了。我們關心的應該是內容,而不是死命折騰博客本身,總覺得它會被我們玩壞。冏
更多教程可以來我嘟嘟獨立博客里面看到
歡迎來訪:嘟嘟獨立博客
最近擼了個java的公眾號,學習資源超級多,視頻,電子書,最新開發工具一個都不能少,已全部分享到百度雲盤,求資源共享,打造一個學習方便,工作方便的java公眾號,開源開源,有需求的可以關注~撒花