hexo乾貨系列:(二)hexo主題下載及配置

前言


上一篇文章介紹了hexo+gitHub簡易搭建屬於本身的我的獨立博客,可是主題是默認的landscape,略顯簡單,今天的教程推薦Jacman主題。Jacman是一款爲Hexo打造的一款扁平化,有着響應式設計的主題,我的感受還不錯就使用了。css

正文


安裝主題


$ git clone https://github.com/wuchong/jacman.git themes/jacman

啓用


修改你的博客根目錄下的config.yml配置文件中的theme屬性,將其設置爲jacmanhtml

更新


cd themes/jacman
git pull

請先備份你的_config.yml文件後再升級 更新好後,本地啓動起來效果前端

hexo server -g  #生成加預覽

<img src="http://7xqch5.com1.z0.glb.clouddn.com/1hexo2.png" style="margin:0;"/>git

hexo文目錄


├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml:網站的 配置 信息,您能夠在此配置大部分的參數。
package.json:應用程序的信息。
scaffolds:模版文件夾。當您新建文章時,Hexo會根據scaffold 來創建文件。
source:資源文件夾是存放用戶資源的地方。除_posts文件夾以外,開頭命名爲_(下劃線)的文件/文件夾和隱藏的文件將會被忽略。Markdown和HTML文件會被解析並放到public文件夾,而其餘文件會被拷貝過去。
themes:主題 文件夾。Hexo會根據主題來生成靜態頁面。程序員

hexo的_config.yml配置


您能夠在hexo安裝文件目錄下的_config.yml中修改大部份的配置,我作了中文註釋,一看就懂github

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 網站
title: 嘟嘟獨立博客		#網站標題
subtitle: 愛生活愛編碼		#網站副標題
description: hello,every body!~	#網站描述
author: Tengj Jun		#您的名字
language: zh-CN			#網站使用的語言
timezone:			#網站時區。Hexo 默認使用您電腦的時區

# URL 網址
## 若是您的網站存放在子目錄中,例如 http://yoursite.com/blog,則請將您的 url 設爲 http://yoursite.com/blog 並把 root 設爲 /blog/。
url: http://tengj.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory 目錄配置
source_dir: source	 #源文件夾,這個文件夾用來存放內容。
public_dir: public	 #公共文件夾,這個文件夾用於存放生成的站點文件。
tag_dir: tags		 #標籤文件夾
archive_dir: archives	 #歸檔文件夾
category_dir: categories #分類文件夾
code_dir: downloads/code #nclude code 文件夾
i18n_dir: :lang		 #國際化(i18n)文件夾
skip_render:		 #跳過指定文件的渲染,您可以使用 glob 表達式來匹配路徑。

# Writing 文章
new_post_name: :title.md # 新建文章默認文件名
default_layout: post     # 默認佈局
titlecase: false # Transform title into titlecase
external_link: true # 在新標籤中打開一個外部連接,默認爲true
filename_case: 0    #轉換文件名,1表明小寫;2表明大寫;默認爲0,意思就是建立文章的時候,是否自動幫你轉換文件名,默認就行,意義不大。
render_drafts: false  #是否渲染_drafts目錄下的文章,默認爲false
post_asset_folder: false #啓動 Asset 文件夾
relative_link: false	#把連接改成與根目錄的相對位址,默認false
future: true		#顯示將來的文章,默認false
highlight:	#代碼塊的設置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag 分類和標籤的設置
default_category: uncategorized		#默認分類
category_map:				#分類別名
tag_map:				#標籤別名

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 分頁
## Set per_page to 0 to disable pagination
per_page: 10	#每頁顯示的文章量 (0 = 關閉分頁功能)
pagination_dir: page	#分頁目錄

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: jacman

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/tengj/tengj.github.com.git
  branch: master

主題的的_config.yml配置


配置文件_config.yml位於主題根目錄下,下面貼出個人配置json

##### Menu
menu:
  首頁: /
  歸檔: /archives
  標籤: /tags
  分類: /categories
## you can create `tags` and `categories` folders in `../source`.
## And create a `index.md` file in each of them.
## set `front-matter`as
## layout: tags (or categories)
## title: tags (or categories)
## ---

#### Widgets
widgets: 
- github-card
- category
- tag
- archive
- tagcloud
- rss
  ## provide eight widgets:github-card,category,tag,rss,archive,tagcloud,links,weibo



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

#### Image
imglogo:
  enable: true             ## display image logo true/false.
  src: img/logo.png        ## `.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
### Theme Color 
theme_color:
    theme: '#2ca6cb'    ##the defaut theme color is blue

# 代碼高亮主題
# available: default | night
highlight_theme: default

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

close_aside: false  #close sidebar in post page if true
mathjax: false      #enable mathjax if true

### Creative Commons License Support, see http://creativecommons.org/ 
### you can choose: by , by-nc , by-nc-nd , by-nc-sa , by-nd , by-sa , zero
creative_commons: none

#### Author information
author:
  intro_line1:  "程序員上輩子都是折翼的天使"    ## your introduction on the bottom of the page
  intro_line2:  "This is my blog,Try to do better."  ## the 2nd line
  weibo:      ## e.g. wuchong1014 or 2176287895 for http://weibo.com/2176287895
  weibo_verifier: b3593ceb    ## e.g. b3593ceb Your weibo-show widget verifier ,if you use weibo-show it is needed.
  tsina:      ## e.g. 2176287895  Your weibo ID,It will be used in share button.
  douban:     ## e.g. wuchong1014 or your id for https://www.douban.com/people/wuchong1014
  zhihu:      ## e.g. jark  for http://www.zhihu.com/people/jark
  email:      ## e.g. imjark@gmail.com
  twitter:    ## e.g. jarkwu for https://twitter.com/jarkwu
  github: tengj    ## e.g. wuchong for https://github.com/wuchong
  facebook:   ## e.g. imjark for https://facebook.com/imjark
  linkedin:   ## e.g. wuchong1014 for https://www.linkedin.com/in/wuchong1014
  google_plus:    ## e.g. "111190881341800841449" for https://plus.google.com/u/0/111190881341800841449, the "" is needed!
  stackoverflow:  ## e.g. 3222790 for http://stackoverflow.com/users/3222790/jark
## if you set them, the corresponding  share button will show on the footer

#### Toc
toc:
  article: true   ## show contents in article.
  aside: true     ## show contents in aside.
## you can set both of the value to true of neither of them.
## if you don't want display contents in a specified post,you can modify `front-matter` and add `toc: false`.

#### Links
links:
#### Comment
duoshuo_shortname: 嘟嘟MD   ## e.g. wuchong   your duoshuo short name.
disqus_shortname:    ## e.g. wuchong   your disqus short name.

#### Share button
jiathis:
  enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display.
  id:    ## e.g. 1889330 your jiathis ID. 
  tsina: ## e.g. 2176287895 Your weibo id,It will be used in share button.

#### Analytics
google_analytics:
  enable: false
  id:        ## e.g. UA-46321946-2 your google analytics ID.
  site:      ## e.g. wuchong.me your google analytics site or set the value as auto.
## You MUST upgrade to Universal Analytics first!
## https://developers.google.com/analytics/devguides/collection/upgrade/?hl=zh_CN
baidu_tongji:
  enable: true
  sitecode: e6d1f421bbc9962127a50488f9ed37d1 ## e.g. e6d1f421bbc9962127a50488f9ed37d1 your baidu tongji site code
cnzz_tongji:
  enable: false
  siteid:    ## e.g. 1253575964 your cnzz tongji site id

#### Miscellaneous
ShowCustomFont: true  ## you can change custom font in `variable.styl` and `font.styl` which in the theme folder `/jacman/source/css`.
fancybox: true        ## if you use gallery post or want use fancybox please set the value to true.
totop: true           ## if you want to scroll to top in every post set the value to true


#### Custom Search
google_cse: 
  enable: false
  cx:   ## e.g. 018294693190868310296:abnhpuysycw your Custom Search ID.
## https://www.google.com/cse/ 
## To enable the custom search You must create a "search" folder in '/source' and a "index.md" file
## set the 'front-matter' as
## layout: search 
## title: search
## ---
baidu_search:     ## http://zn.baidu.com/
  enable: false
  id:   ## e.g. "783281470518440642"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search  ## your can change to your site instead of the default site
  
tinysou_search:     ## http://tinysou.com/
  enable: false
  id:  ## e.g. "4ac092ad8d749fdc6293" for your tiny search id

說明:bash

  • menu 默認沒有啓用 /tags/categories 頁面,若是須要啓用請在博客目錄下的source文件夾中分別創建tagscategories文件夾每一個文件夾中分別包含一個index.md文件。內容爲:
layout: tags (或categories)
title: tags (或categories)
---

由於主題中已經內置了這兩個頁面的模板,因此他們會被正確的解析出來。hexo

  • widgets: 提供了8種小工具。
  • rss: 請填寫你博客的RSS地址。
  • theme_color: 默認主題顏色,修改一下就能改變整個博客主題顏色,蠻不錯的,推薦幾個顏色 #2ca6cb #ea6753 #589baf
  • ShowCustomFont: 啓用自定義字體,若是你有必定前端基礎能夠修改font.styl替換爲你喜歡的字體。
  • toc: 是否啓用在文章中或側邊欄中的目錄功能。兩者能夠都爲true或都爲false。同時,若是你但願在特定的某一篇文章中關閉目錄功能你能夠在文章文件開頭中的front-matter中加上一行toc: false
  • fancybox: 默認關閉,若是你使用Hexo常常發表Gallery類型的文章,那麼請設置爲true(同時須要複製fancybox.js到你的博客目錄下scripts文件夾中)。ps: 我很佩服用Hexo發表相冊的文藝青年。
  • author: 做者信息,建議儘可能填寫完整。其中tsina是你的新浪微博ID,不一樣於用戶名或微博主頁地址。啓用這個屬性後,其餘用戶在微博上分享你文章的同時會自動@你。
  • duoshuo_shortname: 填寫duoshuo_shortname多說的用戶名,啓用多說評論系統。在大陸地區更好用的評論系統
  • jiathis: 加網分享系統。默認關閉,由於主題已經內置了原生的分享功能。
  • google_analytics: Google Analytics追蹤代碼。請注意:*Google Analytics已經升級到了Universal Analytics。請先前日後臺升級你的Google Analytics版本後再啓用追蹤代碼 更多信息請點擊這裏瞭解。
  • google_cse: Google自定義搜索。若是開啓自定義搜索須要先登陸Google CSE,配置好你的站點,並得到此自定義搜索的ID。此外你須要在博客目錄下的source文件夾中創建search文件夾幷包含一個index.md文件。內容爲:
layout: search
title: search
---

參考


hexo的jacman主題配置app

總結


以上就是hexo主題的下載以及配置,簡單的說就是對兩個config.yml文件的配置,hexo提供的主題不少,你們能夠去官網選擇喜歡主題。下一篇打算總結下基於這個主題下個人一些優化配置。


最後,厚顏無恥的求打賞..若是您認爲博主的教程幫助到了你~ 你懂的o(^▽^)o (/▽\=)  

相關文章
相關標籤/搜索