前言
上一篇文章介紹了hexo+gitHub簡易搭建屬於本身的我的獨立博客,可是主題是默認的landscape,略顯簡單,今天的教程推薦Jacman主題。Jacman是一款爲Hexo打造的一款扁平化,有着響應式設計的主題,我的感受還不錯就使用了。css
正文
安裝主題
$ git clone https://github.com/wuchong/jacman.git themes/jacman
啓用
修改你的博客根目錄下的config.yml
配置文件中的theme
屬性,將其設置爲jacman
。html
更新
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
文件夾中分別創建tags
和categories
文件夾每一個文件夾中分別包含一個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主題的下載以及配置,簡單的說就是對兩個config.yml文件的配置,hexo提供的主題不少,你們能夠去官網選擇喜歡主題。下一篇打算總結下基於這個主題下個人一些優化配置。
最後,厚顏無恥的求打賞..若是您認爲博主的教程幫助到了你~ 你懂的o(^▽^)o (/▽\=)