Update @ 2018-05-23 10:53:21:

  • 使用 Next Mist
  • 改变了文章页面的背景色
  • 改变了 header 的高度，设置了背景，调整了 site title 和 menu 的布局，增加了动画效果
  • 在 Home 页面，设置“巧克力块”背景色效果，文章之间用原白色背景色隔开

Update @ 2018-05-10 21:25:36:

  • 增加了将文章中图片进行宽度高度设定的功能，加上了边框。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /*add to make images in article center*/
    img {
       display: block;
       width: 550px;
       height: auto;
       margin: auto;
       border: 1px solid #88acdb;
       border-radius: 2%;
       margin-top: 15px;
       margin-bottom: 40px;
    }
  • 尝试添加阅读百分比功能

在 next 中移植源码，已经移植了 scrollpercent 相关的css/swig代码，但只能显示图标并不能实现跳转到顶部和显示百分比。 通过跑 next 主题发现，应该还需要 scrollspy 这个代码。

Update @ 2018-05-04 16:31:01:

Hexo框架有着更全的文档，是更加流行的静态网站搭建框架。在这里记录一下用 Hexo 搭建博客的过程和对遇到问题的解决方法。

i. Hexo 的安装

在已经安装 npm 的基础上安装。

1. 安装npm(cnpm)

1
2
3
4
# 安装hexo
$ npm install hexo-cli g
## 因为网络缘故，在国内使用 node.js 的原生工具 npm 直接安装可能无法正常进行，可以采用淘宝前端组的国内镜像安装cnpm，而后以下步骤可以使用其定制的 cnmp 工具代替 npm。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 初始化博客文件夹,创建博客文件夹

1
$ hexo init blog`

这时会显示如下，给出需要手动安装依赖的警示。

1
2
3
4
5
6
7
8
INFO  Cloning hexo-starter to ~/Project/for_Blog_Test/hexoBlog/myblog
.
.
INFO  Install dependencies
ERROR: install is not COMMAND nor fully qualified CLASSNAME.
.
.
WARN  Failed to install dependencies. Please run 'npm install' manually!

3. 切换到博客文件夹路径，安装Hexo的扩展插件

1
2
$ cd blog
$ npm install

然后可以看到层级目录, 

1
2
3
4
5
6
7
├── _config.yml  #站点的配置信息
├── node_modules  #node 模块组件
├── package-lock.json 
├── package.json  #应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除
├── scaffolds  #模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source  #资源文件夹是存放用户资源的地方。
└── themes  #主题文件夹，Hexo 将根据这个主题来生成静态页面

4. 安装其它插件

  • 本地服务
    $ npm install hexo-server --save
  • 站点后台服务
    $ npm install hexo-admin --save
  • 存档
    $ npm install hexo-generator-archive --save
  • RSS
    $ npm install hexo-generator-feed --save
  • 全局搜索
    $ npm install hexo-generator-search --save
  • 标签云
    $ npm install hexo-generator-tag --save
  • git部署
    $ npm install hexo-deployer-git --save
  • 站点
    $ npm install hexo-generator-sitemap --save

5. 测试

生成一个demo.md 文件，在../source/_post/
$ hexo new post demo
本地生成静态页面，启动本地服务（开启调试功能将会输出更多的信息），在 localhost:4000查看
hexo clean && hexo g && hexo s --debug

6.Hexo 命令

1
2
3
4
hexo g：hexo generate
hexo c：hexo clean
hexo s：hexo server
hexo d：hexo deploy

ii. Hexo框架使用

1. 配置文件要注意的地方

Hexo 框架有两个配置文件，分别是站点配置文件 ../blog/_config.yml 和 主题的配置文件../blog/themes/yelee/_config.yml,在此将前者称为站点配置，后者称为主题配置。

站点配置

  • Site
1
2
3
4
5
6
7
8
9
# Site
title: #博客标题
subtitle: #博客子标题
description: #简单介绍
keywords:
author: #博客作者
language: #博客主要语言类型
timezone:
since: #站点开始年份
  • URL
1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: #你要部署的网址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
  • Writing
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post   #默认的博客页面类型
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:  #高亮部分使用 prettify 实现，将这里自带的高亮关闭了
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:
  • 部署

只有这里配置了，才能通过 hexo d来一键部署

1
2
3
4
deploy:
  type: git
  repository: # git ssh
  branch: master

主题配置

  • 高亮相关
1
2
3
4
5
6
7
8
highlight_style:
  on: false #这里使用了 prettify 所以关闭了自带的，要启用自带的需要设置为 true
  inline_code: 4  # Value: 0 - 9 可选
  code_block: 4 # Value: 0 - 4 
  # Set inline_code to style highlight text
  # Chose a highlight theme for code block
  # 通过 inline_code 切换内置文本高亮样式
  # 通过 code_block 切换内置代码高亮配色主题
  • 友情链接
1
2
3
friends:
  Hexo: https://hexo.io
  GitHub: #github地址
  • 选项页面打开方式

true 表示在新的标签页中打开，false在本标签页打开

1
2
3
4
5
6
7
8
9
10
11
12
open_in_new:
  global: 2 # 0-2
  title: false # article title in homepage 主页文章标题
  post: false # link within post/page 正文中的链接
  tags: false # 标签
  categories: false # 分类
  article_nav: false # 导航
  archives: true # 归档
  mini_archives: true # 迷你归档
  menu: false # 边栏菜单
  friends: true  # 友情链接
  socail: true # 社交图标
  • 网页标签的显示
1
2
3
4
5
# Tab Title Change | 标签页标题切换
tab_title_change: 
  on: true
  left_tab_title: ‘xxxxxx’ #切换到其他页面时的显示
  return_tab_title: '' #在本页面的显示，''显示在看内容的标题
  • Menu

默认的 /是指 source 文件夹

1
2
3
4
5
6
7
8
9
10
11
12
menu:
  Home: /
  Archives: /archives/
  #随笔: /tags/随笔
  Tags: /tags/
  About: /about/

# Link to your avatar | 填写头像地址
avatar: /img/avatar.png

# Small icon of Your site | 站点小图标地址
favicon: /favicon.png

2. 建立博客页面必要的操作

配置标签云和类别以及 about 页面

1
2
3
hexo new page "tags"
hexo new page "categories"
hexo new page "about"

以上操作会在source 目录下生成 tags、categories、about三个文件夹，里面都对应有一个index.md的文件，在tags文件夹中的index.md中，修改type为tags,如下所示，相应的categories和about也把对应位置的type值改为categories和about。如下，

1
2
3
4
5
6
7
8
9
10
11
---
title: tags
date: 2018-05-04 16:34:11
type: "tags"
---

---
title: tags
date: 2018-05-04 16:34:11
type: "categories"
---

修改个人头像和网页卡图标

  • 个人头像

在..themes/yelle/source/img/中修改

  • 网页卡图标

在..themes/yelee/source/生成一个favicon.png，可以使用http://www.bitbug.net/来制作。

iii. 常见问题

  • 修改配置文件有误

冒号后面需要空格

  • 端口占用

关闭正在运行的4000端口；或者使用新的端口hexo s -p 5000

  • 配置文件修改后，高亮工作不正常

有的主题在配置文件中没有设定高亮的开关模式有效，需要到主题文件夹目录主题配置文件查看，或许要到 layout, source下查看

  • 使用 Prettify 替代自带的高亮

这篇博文讲的很详细http://jumpbyte.cn/2016/07/02/use-and-install-prettify/
可以高亮代码，可以显示行号

  • 使用 highlight.js 代替自带高亮

可以高亮但是不能显示行号，具体参考https://blog.csdn.net/melordljm/article/details/51991389

iiii. 参考

为hexo博客加入prettify高亮插件
Hexo安装配置详解
Hexo高级教程之代码高亮-使用 highlight.js
Yelle主题 github 文档