前言

3月份初,许久没写博客(主要就是懒)的博主在莫一天心血来潮写好一篇文章后,使用hexo d部署博客文章时,发现hexo抛出各种错误。但由于当时准备面试的面试题(主要就是懒),然后就放着没管它。紧接着面试实习岗位,工作后也一直没有闲下来。
最近终于抽出时间来重构博客,写下这篇文章,记录一下重构博客的过程~

博客目录介绍

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json
  • .deploy:执行hexo deploy命令部署到GitHub上的内容目录
  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
  • _drafts:草稿文章
  • _posts:发布文章
  • themes:主题文件目录
  • _config.yml:全局配置文件,大多数的设置都在这里
  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的 关于 按钮

接下来是重头戏 _config.yml ,做个简单说明:

# Hexo Configuration
## Docs: http://zespia.tw/hexo/docs/configure.html
## Source: https://github.com/tommy351/hexo/

# Site #整站的基本信息
title: 不如 #网站标题
subtitle: 码农,程序猿,未来的昏析师 #网站副标题
description: bruce sha's blog | java | scala | bi #网站描述,给搜索引擎用的,在生成html中的head->meta中可看到
author: bruce #网站作者,在下方显示
email: bu.ru@qq.com #联系邮箱
language: zh-CN #语言

# URL #域名和文件结构
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://ibruce.info #你的域名
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code

# Writing #写文章选项
new_post_name: :title.md # File name of new posts
default_layout: post #默认layout方式
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
highlight: #代码高亮
  enable: true #是否启用
  line_number: false #是否显示行号
  tab_replace:

# Category & Tag #分类与标签
default_category: uncategorized # default
category_map:
tag_map:

# Archives #存档,这里的说明好像不对。全部选择1,这个选项与主题中的选项有时候会有冲突
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

# Server #本地服务参数
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: true
logger_format:

# 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: MMM D YYYY
time_format: H:mm:ss

# Pagination #分页设置
## Set per_page to 0 to disable pagination
per_page: 10 #每页10篇文章
pagination_dir: page

# Disqus #社会化评论disqus,我使用多说,在主题中配置
disqus_shortname:

# Extensions #插件,暂时未安装插件
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
## 主题
theme: modernist # raytaylorism # pacman # modernist # light
exclude_generator:

# Deployment #部署
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
  type: github
  repository: git@github.com:bruce-sha/bruce-sha.github.com.git #你的GitHub Pages仓库

主题目录介绍

.
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-CN.yml      #中文语言
├── layout             #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
|   ├── _partial       #局部的布局,此目录下的*.ejs是对头尾等局部的控制
|   └── _widget        #小挂件的布局,页面下方小挂件的控制
├── source             #源码
|   ├── css            #css源码 
|   |   ├── _base      #*.styl基础css
|   |   ├── _partial   #*.styl局部css
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #*.styl引入需要的css源码
|   ├── fancybox       #fancybox效果源码
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道

如果你需要修改头部,直接修改 hexo\themes\modernist\layout\_partial\header.ejs ,比如头上加个搜索框:

<div>
<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
 <input type="search" name="q" id="search" autocomplete="off" autocorrect="off" autocapitalize="off" maxlength="20" placeholder="Search" />
 <input type="hidden" name="q" value="site:<%- config.url.replace(/^https?:\/\//, '') %>">
</form>
</div>

将如上代码加入即可,您需要修改css以便这个搜索框比较美观。
再如,你要修改页脚版权信息,直接编辑 hexo\themes\modernist\layout\_partial\footer.ejs。同理,你需要修改css,直接去修改对应位置的styl文件。

主题安装

https://www.haomwei.com/technology/maupassant-hexo.html

$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save

npm install hexo-renderer-pug --save安装时可能会报错,以下是解决方案:
改用cnpm来安装软件

$ npm install -g cnpm –registry=https://registry.npm.taobao.org
目的是直接改npm为淘宝的npm,也为防止某些依赖直接用npm来安装,导致无法顺利安装完成
$ npm config set registry https://registry.npm.taobao.org

编辑Hexo目录下的 _config.yml,将theme的值改为maupassant

theme: matery

功能配置

# 是否启用Fancybox图片灯箱效果
# Disqus评论 shortnam
disqus: 
# 友言评论 id
uyan: 
# 来必力评论 data-uid
livere: 
# 畅言评论 appid
changyan: 

changyan_conf: ## Your changyan conf, e.g. prod_d8a508c2825ab57eeb43e7c69bba0e8b
# Gitment评论相关参数
gitment:
  enable: false
  owner: 
  repo: 
  client_id: 
  client_secret: 
# Gitalk评论相关参数
gitalk:
  enable: false 
  owner:  
  repo: 
  client_id:  
  client_secret:  
  admin:  
# Valine评论相关参数
valine: 
  enable: false 
  appid: 
  appkey: 
  notify: false # 评论系统中的邮件提醒设置
  verify: false ## Validation code.
  placeholder: Just so so 
  avatar: 'mm' 
  pageSize: 10
  guest_info: nick,mail,link
# 默认使用Google搜索引擎
google_search: true
# 若想使用百度搜索,将其设定为 true
baidu_search: false
# Swiftype 站内搜索key
swiftype: 
# 微搜索 key
tinysou: 
# 基于jQuery的本地搜索引擎,需要安装hexo-generator-search插件使用
self_search: false
# Google Analytics 跟踪ID
google_analytics: 
# 百度统计 跟踪ID
baidu_analytics: 
# 
fancybox: true ## If you want to use fancybox please set the value to true.
# 是否显示侧边栏分类数目
show_category_count: false
# 是否显示文章中目录列表自动编号
toc_number: true
#  是否使用分享按鈕,需要安装hexo-helper-qrcode插件使用
shareto: false
#  是否使用不蒜子页面访问计数
busuanzi: false
# 
wordcount: false ## If you want to display the word counter and the reading time expected to spend of each post please set the value to true, and you must have hexo-wordcount installed.
# 是否在移动设备屏幕底部显示侧边栏
widgets_on_small_screens: false ## Set to true to enable widgets on small screens.
# 是否使用canvas动态背景
canvas_nest:
  enable: false
  color: ## RGB value of the color, e.g. "100,99,98"
  opacity: ## Transparency of lines, e.g. "0.7"
  zIndex: ## The z-index property of the background, e.g. "-1"
  count: ## Quantity of lines, e.g. "150"
# 是否启用捐赠按钮
donate:
  enable: false
  github: ## GitHub URL, e.g. https://github.com/Kaiyuan/donate-page
  alipay_qr: ## Path of Alipay QRcode image, e.g. /img/AliPayQR.png
  wechat_qr: ## Path of Wechat QRcode image, e.g. /img/WeChatQR.png
  btc_qr: ## Path of Bitcoin QRcode image, e.g. /img/BTCQR.png
  btc_key: ## Bitcoin key, e.g. 1KuK5eK2BLsqpsFVXXSBG5wbSAwZVadt6L
  paypal_url: ## Paypal URL, e.g. https://www.paypal.me/tufu9441
post_copyright:
  enable: false ## If you want to display the copyright info after each post, please set the value to true and fill the following items on your need.
  author: ## Your author name, e.g. tufu9441
  copyright_text: ## Your copyright text, e.g. The author owns the copyright, please indicate the source reproduced.

# 自定义页面及菜单,依照已有格式填写。
# 填写后请在source目录下建立相应名称的文件夹,并包含index.md文件,以正确显示页面。
# 导航菜单中集成了FontAwesome图标字体,可以在这里选择新的图标,并按照相关说明使用。
menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: about
    directory: about/
    icon: fa-user
  - page: rss
    directory: atom.xml
    icon: fa-rss

# 选择和排列希望使用的侧边栏小工具
widgets: ## Six widgets in sidebar provided: search, category, tag, recent_posts, rencent_comments and links.
  - search
  - category
  - tag
  - recent_posts
  - recent_comments
  - links

# 友情链接,请依照格式填写
links:
  - title: site-name1
    url: http://www.example1.com/
  - title: site-name2
    url: http://www.example2.com/
  - title: site-name3
    url: http://www.example3.com/

# 网站历史时间线,在页面front-matter中设置layout: timeline可显示
timeline:
  - num: 1
    word: 2014/06/12-Start
  - num: 2
    word: 2014/11/29-XXX
  - num: 3
    word: 2015/02/18-DDD
  - num: 4
    word: More

# Static files
# 静态文件存储路径,方便设置CDN缓存
js: js
css: css

# Theme version
# 主题版本,便于静态文件更新后刷新CDN缓存
version: 0.0.0

评论

Disqus配置使用

注册

https://disqus.com/

主题特性

主题目录结构

-maupassant
|-languages

网站图标

网站Favicon:/blog/source/favicon.ico,建议的大小:32px*32px