hexo干货系列:(二)hexo主题下载及配置

前言


上一篇文章介绍了hexo+gitHub简易搭建属于自己的个人独立博客,但是主题是默认的landscape,略显简单,今天的教程推荐Jacman主题。
Jacman是一款为Hexo打造的一款扁平化,有着响应式设计的主题,个人感觉还不错就使用了。

正文


安装主题


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

启用


修改你的博客根目录下的config.yml配置文件中的theme属性,将其设置为jacman

更新


cd themes/jacman
git pull

请先备份你的_config.yml文件后再升级
更新好后,本地启动起来效果

hexo server -g  #生成加预览

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中修改大部份的配置,我做了中文注释,一看就懂

# 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位于主题根目录下,下面贴出我的配置

##### 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

说明:

  • menu 默认没有启用 /tags/categories 页面,如果需要启用请在博客目录下的source文件夹中分别建立tagscategories文件夹每个文件夹中分别包含一个index.md文件。内容为:
layout: tags (或categories)
title: tags (或categories)
 ---

因为主题中已经内置了这两个页面的模板,所以他们会被正确的解析出来。

  • 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主题配置

总结

以上就是hexo主题的下载以及配置,简单的说就是对两个config.yml文件的配置,hexo提供的主题很多,大家可以去官网选择喜欢主题。下一篇打算总结下基于这个主题下我的一些优化配置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,827评论 1 317
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,511评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,318评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,108评论 0 189
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,112评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,387评论 1 185
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,905评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,657评论 0 177
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,144评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,744评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,100评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,565评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,041评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,769评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,301评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,173评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,313评论 2 242

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,036评论 18 139
  • 第一章 安装Git工具 下载GitHub for Windows,直接点击安装,安装完成后,可以看到“Git Sh...
    不圆的石头阅读 11,778评论 5 63
  • 背景 搭建自己的hexo博客 解决 我的博客最终事例 1.草稿相当于很多博客都有的“私密文章”功能。 会在sour...
    飞奔的阿加西阅读 12,520评论 1 13
  • 一、职场铁律: 1、公司的问题,是你改善的机会。 2、客户的问题,是你提供服务的机会。 3、职场,就是让解决问题的...
    刘西洋阅读 3,347评论 0 0
  • 1:今天见到了国家一级心里学大师、智慧果创始人、聊了两个小时,解决了我未来该怎么做?该去向哪里的疑问,十分感谢,感...
    Martin_马丁阅读 248评论 0 0