自己开发一个HEXO主题可能会踩到的坑. 模版引擎-ejs, CSS预处理-stylus.
说明
之前在用别人的主题，觉得不够有趣，缺乏掌控感，就想自己做一个比较简单的主题。参考了一众大佬的主题，很多大佬的博客已经写的很详尽了，在初期，我是依靠着 AHONN’S BLOG–从零开始制作 Hexo 主题 慢慢摸索开始的。在这里仅记录一些我纠结过踩过坑的地方。
Hexo变量
列表
具体的变量常用的官方文档里都有了，就不多说了。我在学习过程中，主要是forEach那个地方花过一段时间。针对list_categories,list_posts举两个具体的例子。
<!--cateList.ejs-->
<% site.categories.each(function(category) { %>
<li><a href="<%- url_for(category.path) %>">·<%= category.name%></a></li>
<% }); %>
<!--index.ejs-->
<section class = "posts">
<% page.posts.each(function (post) { %>
<article class="post">
<div class="post-title">
<a class="post-title-link" href="<%- url_for(post.path) %>"><%= post.title %></a>
</div>
<div class="post-meta">
<%- partial('_partial/post-meta',{post: post}) %>
</div>
<div class="post-excerpt">
<%- post.excerpt %>
</div>
</article>
<% }) %>
</section>第一个是用来显示所有的分类的，每一个分类创建列表中的一行。
第二个是用来显示博客内所有文章的。
都不难理解，但自己写的时候经常犯错。(我对前端的技术全都是摸着石头过河)
将本地变量传递到局部中去
使用情景：在主页的文章列表中显示文章的分类和标签信息。因为post-meta在很多的页面都会用到，所以想要分离出来。
遇到的问题：post对象需要在post-meta外部通过遍历site.posts来获得,但是需要在post-meta内部调用获得具体value。
解决方式：将post对象传递到post-meta中，就可以在post-meta中直接调用。
<!--index.ejs-->
<%- partial('_partial/post-meta',{post: post}) %>在这篇博客中有更加详细的说明和介绍。
创建一个显示所有分类/标签的页面
主题中原有的category.ejs和tag.ejs文件都是属于单个对象的页面。
Hexo内置会创建页面显示某个categories下的所有文章，tag同理.
e.g. categories/technique.html
但不会像archive一样自动创建一个categories/index.html.
使用其他主题的时候,同样categories，tags需要在根目录source文件夹下面创一个对应的文件夹，再创建一个index.md，Hexo 里面没有预置。
解决方式:
- 命令行输入
$ Hexo new page categoriessource/categories/index.md修改type:"categories" layout/_partial中创建categories.ejs<div class="container"> <div class="archive"> <div class="archive-title">分类</div> <div class="catelist"> <% site.categories.each(function(category) { %> <div><a href="<%- url_for(category.path) %>"><%= category.name%></a></div> <% }); %> </div> </div> </div>- 在
page.ejs中判断<% if (is_page() && page.type === 'tags') { %> <%- partial('_partial/tags') %> <% }else if(is_page() && page.type === 'categories'){%> <%- partial('_partial/categories') %> <% }else if(is_page() && page.type === 'about'){%> <%- partial('_partial/about') %> <% }else{%> <%- partial('_partial/article') %> <% } %>
自己第一次做的时候走了非常多的弯路，看了半天hexo文档也没搞清楚，最后看到了这篇博客，解决了问题，感谢博主的记录和分享。
代码部分高亮
Hexo内置的是highlight.js实现代码高亮，但我数次尝试发现有问题，无法显示。于是查阅了一下相关资料，以及highlight的官网：有非常详细的使用说明usage。支持非常多的语言。
具体需要引入script，引入css。具体的颜色主题可以自由选择，我选择的是atom的one dark。