hexo博客优化

今天，终于对hexo博客进行了优化，从早上八点一直改到晚上七点；上午的时间基本在让新版本跑起来，下午则在改一些细致的东西；期间把源码基本看了一遍，有一些问题值得记下来

这里要感谢小姐姐@ Hiitea分享的Replica，我对Replica进行了一些改动；我删去了categories，只留下了tags；

历史版本：

这也是我喜欢的一款，主题是aircloud，十分简洁，我最喜欢的是它的归档，是以时间轴竖向的排列方式；

Replica版

也就是现在的版本，github风格，他的排版，颜色我都很喜欢

记录

我是用的git+hexo+markdown+github搭建的个人博客；用git进行代码管理，hexo是博客框架，基于node.js,markdown是用来写文章的，类似记事本，github上的个人仓库相当于服务器；写好文章后，git提交github，其他人访问我的博客只要访问github的服务器就行了；本身没有后台和数据库，都在本地，所以很安全，方便，维护也简单；免费，而且易于实现，对于我们这种学生党，简直太好了；同时也有缺点，就是速度慢（访问国外服务器肯定会慢一些），而且不好做seo优化（因为很多github的服务器屏蔽了百度，哈哈哈），好在我也并不打算做优化···

hexo目录结构

1
2
3
4
5
6
7
-- _config.yml
|-- package.json
|-- scaffolds
|-- source
   |-- _posts
|-- themes
|-- .gitignore

_config.yml

hexo切换主题其实也不算难，比较繁琐的可能是写_config.yml配置

1
2
3
4
5
6
7
8
9
# Site
title: xy-bz's Blog
author: Xianyu Bozhou
language: zh-CN
timezone: Asia/Shanghai
location: wu han
favicon: https://github.githubassets.com/favicon.ico
avatar: img/avatar.png
# ···

我就截取了部分；一般要配置一些标题啊，作者，语言等等；一些路径也是可以填在这的，比如你的头像，你放在hexo上，就填上图片的相对路径就好；特别要注意YAML的语法,“：”后面有空格

官方文档

package.json

记录版本信息，hexo框架的参数，hexo需要的插件等等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.7.0"
  },
  "dependencies": {
    "ejs": "^2.5.5",
    "hexo": "^3.2.0",
    "hexo-asset-image": "git+https://github.com/CodeFalling/hexo-asset-image.git",
    "hexo-deployer-git": "^0.1.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-search": "^2.2.5",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "hexo-tag-dplayer": "^0.3.3"
  }
}

scaffolds

这是个文件夹，我理解的这是存的是模板，比如你hexo new xx一篇文章，生成的文章就以这个文件里的模板自建一个，帮你填好一些信息，比如文章名，创建时间

source

这个是放资源和文件的地方，比如_posts里面有新建的文章和资源文件夹，个人写的.md文档放这里

themes

存放主题文件,比如我的主题Replica文件目录

1
2
3
4
5
6
7
8
9
10
-- themes
	|-- Replica
		|-- layout
			|-- _partial
			|-- _widget
			 -- 
		|-- source
			|-- js
			|-- css
		.gitignore

一般layout是放的模板，比如ejs文件，更改这些文件就相当于在改前端页面，我没有学过这门语言，但我跟浏览器给我的信息就能猜个大概，有点js，java的意思

.gitignore

这个存的是和git相关的，hexo d -g上传时钩子忽略上传的文件

public

通常，如果你编译以后会生成这个文件；hexo把md文档编译成静态网页，存放在里面（一般还有你的资源啥的，比如图片）；当你本地运行时，就是打开的这个文件；如果你hexo clean了，那么删除的也是这个文件

.deploy_git

这个文件就是用来上传到github的文件了

生成文档时同时生成资源文件夹

只要在_config.yml配置

1
post_asset_folder: true

图片在网页上无法显示

在换主题的时候，我遇到了这个问题，我检查了图片路径，ejs里面地址定向，最后发现是插件的问题；Hexo上传的图片在网页上显示是要插件的，但是我改主题以前，都能正常的显示，但是换了主题之后就不能用了，这个问题让我很困惑，按理说它们之间应该联系不大的；最后，确实是重装之后，解决了问题

1
npm install hexo-asset-image --save

路径问题

这个也处理了很久，我第一次在_config.yml配置的时候写的是相对路径（因为我在使用aircloud时，就是写的相对路径，估计他的layout里面也没改变路径）

1
avatar: img/avatar.png

这是我当时的文件目录

1
2
3
4
5
6
-- _config.yml
|-- source
   |-- _posts
   |-- img
   		-- avatar.png
|-- themes

这是图片avatar.png

https://xy-bz.github.io/img/avatar.png

https://xy-bz.github.io/archives/img/avatar.png

https://xy-bz.github.io/tags/img/avatar.png

当时的情况就是点击overview，图片正常显示，然后点击post和tags图片显示异常

当时并没有去查图片的路径，我觉得可能是局部刷新那里的问题，也许是刷新的时候错误的关闭了变量导致不能访问，这时只要在刷新的时候加载一下图片就行

1
2
3
4
5
6
7
<li class="<%= isOverview ? 'selected' : '' %>">
      <a href="<%= config.root %>">Overview</a></li>
    <li class="<%= nav_selected === 'archives' ? 'selected' : '' %>">
      <a href="<%= url_for(theme.archive_dir) %>">Posts <span class="counter"><%= site.posts.length %></span></a>
    </li>
    <li class="<%= nav_selected === 'tags' ? 'selected' : '' %>">
      <a href="<%= url_for(theme.tag_dir) %>">Tags <span class="counter"><%= site.tags.length %></span></a></li>

最后发现，图片指向的路径点的时候就变了，不是我认为的
https://xy-bz.github.io/img/avatar.png
这里的avatar.png实际上是三个不同地方的图片，我只有第一个路径下有图片，第二个第三个没有，当然就显示异常了；这里如果要在这三个地方用一张图片就有几种办法，第一是去改源码，把三个地方的路径改成同一个；第二个就是在配置的时候填绝对路径；最后就是三个路径都给他建起来；

这里的经验：以后在debug时，先要确定到底出错的原因是什么，顺腾摸瓜，去找问题；不能漫无目的的去猜，比如这次要是我一开始就去检查路径正不正确，直接就会知道是配置的问题，就不会浪费大量的时间（今天都没时间看高数了···）

三目运算

上学的时候都学过三目运算 ？：；都知道是什么意思，如果要自己写这种逻辑就是直接if···else去了，Replica这个项目基本上都是用的三目运算代替ifelse语句

1
2
3
4
<%
var tags = page.tags ? page.tags.data : '';
var favicon = config.favicon || 'https://github.githubassets.com/favicon.ico';
%>

目的呢是为了压缩代码；网页访问是追求速度的，同样的逻辑代码，我的比你的代码量少，那么我就先传输完；这种提升，从小的对比可能效果不大，但是在网上，一旦这个网页浏览量上来了，这个提升就很可观了

日期处理类库

Moment.js官方文档

显示更新日期

1
moment(<%= page.updated %>).format('YYYY-MM-DD HH:MM:SS')

显示距今多久

1
moment(<%= page.date %>).fromNow()