hexo文件结构及网站优化

文件结构

使用hexo已经一周左右时间,由于看上了 html5up 制作的这款主题而没有使用自带的light主题。hexo生成静态网站时会引用很多主题的设置,这就要修改主题文件,而不单单是hexo程序,好在两者的结构都不算太复杂,能让我得心应手的修改,下面就简单说下hexo的文件结构。重要的文件(文件夹)我都在行尾加上“*"标。

.
├── _config.yml #程序主配置,程序能修改的大部分在此*
├── db.json
├── debug.log
├── node_modules #npm安装的hexo插件
│   ├── hexo-generator-feed
│   ├── hexo-generator-sitemap
│   └── hexo-theme-greyshade
├── package.json
├── public #hexo g生成的内容文件夹,这里就是你所看到的最终网页,和.deploy内容相同
│   ├── about
│   ├── archives
│   ├── atom.xml
│   ├── categories
│   ├── CNAME
│   ├── css
│   ├── fancybox
│   ├── index.html
│   ├── js
│   ├── LICENSE.txt
│   ├── README.txt
│   ├── robot.txt
│   ├── sitemap.xml
│   └── tags
├── scaffolds #模板文件夹,hexo new引用的这里
│   ├── draft.md
│   ├── page.md
│   ├── photo.md
│   └── post.md
├── scripts
├── source #所有文章文件放在这里
│   ├── about
│   ├── _drafts
│   └── _posts
└── themes #主题文件夹
    ├── greyshade
    ├── light #自带的主题
    └── striped #这是我用的主题

hexo主文件夹里大部分能修改的都在_config.yml里,其他的修改都在你所选的主题里,下面说说主题文件夹内的结构。

themes/striped
├── _config.yml #主题配置文件,主要修改地方之一*
├── languages #多语言文件夹,根据你选的语言自动翻译
│   ├── default.yml
│   ├── de.yml
│   ├── es.yml
│   ├── ru.yml
│   ├── zh-CN.yml #自设的变量可在这里添加简体中文翻译
│   └── zh-TW.yml
├── layout #主题程序文件夹,发布文章,插件,页面设置都在这里,主要修改这里
│   ├── archive.ejs
│   ├── category.ejs
│   ├── index.ejs
│   ├── layout.ejs
│   ├── page.ejs
│   ├── _partial #页面文件夹,基本都在这里*
│   ├── post.ejs
│   ├── tag.ejs
│   └── _widget #插件文件夹
├── LICENSE
├── README.md #hexo程序的Readme,无实际作用
└── source #前端文件夹,css,js都在这里,固定文件都放这里
    ├── CNAME #github绑定域名用的文件,生成时被引用到public文件夹
    ├── css 
    ├── fancybox
    ├── images #文章里引用的本地图片文件夹
    ├── index.html #_partial文件夹下的文件与此文件生成最终网站的index.html
    ├── js
    ├── LICENSE.txt
    ├── README.txt #github项目里能看到的Readme文件
    └── robot.txt #自定义的爬虫文件

用例子说明一下,比如hexo目前没有友情链接插件,这就需要我们自己来添加。我的目标是添加一个半自动的友情链接插件。

1.定义一个总开关(_config.yml),注意空格

blogroll: 1

2.启用插件(theme/striped/_config.yml),可以自己调顺序

widgets:
- search
- category
- tagcloud
- blogroll

3.定义友情链接的内容(theme/striped/_config.yml),注意空格和缩进

blogroll:
  Zippera's blog: http://zipperary.com
  Binuxの杂货铺: http://blog.binux.me
  Life Memory: http://miantiao.me

4.创建一个插件(theme/striped/layout/_widget/blogroll.ejs),根据主题修改为类似的内容。

<% if (config.blogroll){ %> #引用主配置文件判断是否开启该插件
<section>
<h3><%= __('blogroll') %></h3> #自设的变量名
<div class="widget blogroll">
    <ul>
      <% for (var i in theme.blogroll){ %> #引用主题配置文件内的内容
      <li><a href="<%- theme.blogroll[i] %>" target="_blank"><%= i %></a></li>
      <% } %>
    </ul>
</div>
</section>
<% } %>

5.设置多语言(themes/striped/languages/zh-CN.yml),注意空格

blogroll: 友情链接

这样就完成了一个友情链接插件的设置,以后添加只需要在theme/striped/_config.yml里按格式写就可以了,不用改动网页。为了美观可以自己修改下CSS,就不多说了。

优化

由于hexo已经是静态网站了,没有数据库,优化也就是多弄几个tag之类的,想提高被搜索引擎收录几率就提交一个sitemap。
1.更改链接格式
之前一直在用wordpress,所以知道静态化的好处,但是hexo不存在这个问题,不过看习惯了xxxxx.html的格式看别的还真不太舒服。
修改_config.yml

permalink: archives/:title.html

2.添加sitemap
下载插件,建议把feed也一起下载了

npm install hexo-generator-sitemap
npm install hexo-generator-feed

修改_config.yml

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
 
#sitemap
sitemap:
  path: sitemap.xml

执行一次生成然后上传,网站就有sitemap了

hexo g
hexo d

3.提交给搜索引擎

谷歌站长工具:https://www.google.com/webmasters/tools/home?hl=zh-CN
百度站长工具:http://zhanzhang.baidu.com/sitemap

验证方式可以自己选,如果选html文件验证,就把下载的文件放到theme/striped/source,如果选meta验证的就把给的代码加到themes/striped/layout/_partial/head.ejs。