写在开头
1.个人博客采用hexo快速搭建，使用主题为Anisina，主题原作者编写的中文使用教程请敲这里,也可以选择其他主题
2.本文内容主要在于通过分析layout布局模板和config配置文件，更好理解Anisina主题的使用方法
3.对works.ejs文件做了部分修改，config.yml新增Project Info。详情
Hexo
什么是 Hexo？
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
安装
建站
安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install
|
新建完成后，指定文件夹的目录如下：
.
├── _config.yml #配置文件夹
├── package.json #应用程序的信息
├── scaffolds #模板文件夹
├── source #资源文件夹
| ├── _drafts
| └── _posts
└── themes #主题文件夹
|
常用命令
$ hexo init [folder] #新建一个网站
$ hexo new [layout] <title> #新建一篇文章
$ hexo g #生成静态文件
$ hexo clean #清空缓存
$ hexo server #运行服务器
$ hexo d #部署到git仓库
|
Anisina
1.安装
git clone https://github.com/Haojen/hexo-theme-Anisina.git
clone`下来后将文件拷贝至`hexo init [folder]/themes
|
2.修改
1.将Anisina文件拷贝到themes文件
2.themes: Anisina
3.或者直接拷贝 Anisina 文件夹下的 `_config.yml` 替换 hexo 默认的 _config.yml
|
3.配置文件_config.yml
配置文件采用key: value的形式,:后面一定要带空格，否则error。可以拷贝key之后ctrl + f 查找快速修改配置信息。
# Site
title: # your blog title name
author: # your name
header-img: # background image
favicon: # website icon
# SNS settings
github_username: # Id of a social account
# Sidebar settings
sidebar-about-description: # your individual description
sidebar-avatar: # your photo
# 配置git仓库地址，配置完成后每次只需要执行 hexo d 就能将public文件push到仓库
deploy:
type: git
repo: # The repository with you want to upload
branch: master
# 文章header-img背景图片，url采用'cdn-url' + 'header-img'拼接的方式。
cdn-url: http://ot0jk0h4v.bkt.clouddn.com/ # 你的CDN地址
# 博文默认图片(如果不设置这一项, 博文标题的图片默认是灰色的)
post-default-img: post-default.jpg
# 友链, 请务必按以下格式书写
friends: [
{
title: "your friend title",
href: "your fiend path"
},
{
title: "your friend title 2",
href: "your friend path 2"
}
]
# 页面nav配置，这里重写了nav.ejs模板
menu:
Home: /
Tags: /tags
My Works: /work
# my works Project Info 同样，重写了works.ejs模板
project: [
{
title: ,
subTitle: ,
data: ,
img_link: ,
tags: [],
direction: ,
link: /#
}
]
|
- 运行命令:
hexo new page "Tags" , 这会在博客的 source 目录下生成一个名为 Tags 的文件夹, 里面会有一个 index.md 格式的页面,如果没有请手动创建.
- 然后打开
yourblog/source 文件夹 , 找到 Tags/index.md 这个文件, 然后设置在两条的---里面, 指定一个 layout: tags值.注意 key 和 value 之间的空格
- 然后运行命令,重新生成博客内容:
hexo clean && hexo g , 然后可以运行 hexo serve 在本地查看效果
5.博文
运行命令:hexo new post folder,这会在source/_posts
以下是博文配置
---
layout: post
title: "Hola 2016"
subtitle: "hi, I'm haojen ma"
date: 2016-05-26 06:00 # 博文创建时会自动生成
author: "Haojen Ma"
header-img: "img/post-default.jpg"
cdn: 'header-on'
tags:
- Movies
- Life
top: num #可将博文置顶，num值越大优先级越高
---
|
创建一条博文
hexo new "your-post-name"
|
创建一条博文的同时，也会创建一个以该博文名命名的文件夹:
博文标题背景图片
header-img: “http://sometest.png“
如果你没有设置的话，会默认使用 _config.yml 下 post-default-img指定的背景图像
6.创建My Works界面
运行命令:hexo new page work,这会在source目录下生成一个work文件夹
---
title: my works
date: 2017-07-17 17:34:13
layout: works
---
|
修改works.ejs模板
打开themes/layout/works.ejs文件，重写class="container"标签内代码
<div class="container">
<section class="row">
<div class="col-sm-10 col-sm-offset-1
col-md-8 col-md-offset-2
works-area">
<% for(var obj of config.project){ %>
<div class="works-item">
<div class="title">
<h3>
<%= obj.title %>
</h3>
<span class="title-date text-muted">
<%= obj.data %>
</span>
</div>
<div class="works-item-img">
<img src="<%= obj.img_link %>">
</div>
<div class="works-content">
<% if(obj.tags){ %>
<div class="use text-warning">
<% for (var arrayVal in obj.tags ){ %>
<span>
<%= obj.tags[arrayVal] %>
</span>
<% } %>
</div>
<% } %>
<% if(obj.subTitle){ %>
<p class="subtitle"> <%= obj.subTitle %> </p>
<% } %>
<% if(obj.direction){ %>
<p class="text-muted"> <%= obj.direction %> </p>
<% } %>
</div>
<div class="footer clearfix">
<a class=" btn btn-default" href="<%= obj.link %>" target="_blank"> Open
it</a>
</div>
</div>
<% } %>
</div>
</section>
</div>
|
从上面的ejs模板可以看出，在浏览器渲染数据时，会先查找_config.yml文件中的key为project的数组
example:
project: [
{
title: ,
subTitle: ,
data: ,
img_link: ,
tags: [],
direction: ,
link: /#
}
]
|
7.博文置顶
可能是我技术小白，没有在作者的源码中找到博文置顶的功能，遂自己参考网络资料对node_modules/hexo-generator-index/lib/generator.js进行了修改，具体可参考博文
