hexo 添加html项目,Hexo 主题制作指南_html/css_WEB _列表

组织的链接。
常用功能的实现
Hexo 提供了很多专门的变量及函数，用于在编写主题时使用。请参见变量列表和帮助函数列表。这里针对常用的一些功能做对应的介绍。
获取站点的所有的文章、页面、标签和分类
Hexo 为主题提供了一个变量 site，这个变量包括以下几个成员： site.posts博客里的所有文章列表
site.pages所有创建的页面的列表
site.分类列表
site.tags标签列表
其中，site.posts与 site.pages两个结构是相同的，它们各自包括两个成员，一个为长度，一个 data 为具体的数组，它是个对象，但索引是数组，成员是各个文章的详情。
site.和 site.tags则为两个对象，成员比较多，但具体的分类和标签列表，存在索引为 data的成员上，该成员为对象，对象的索引为分类和标签对应的 id，类似于：
"data":{ "aa0sp":{ "name":"乱七八糟", "_id":"aa0sp" }}
不过实际在编写主题的时候，很少会直接用到这几个变量。
获取当前页面的数据
这个变量便是 page，这个变量的特点是，在不同的页面中，它的成员会不一样。比如，在文章归档页，它就有文章列表，如果在文章详情页，它就包含有文章的相关信息。而且在不同的页面中，就算同一个索引的成员，值也会不一样，比如 page.posts，在首页，它是按分页设置限制过的文章列表，而在存档页则是所有文章的列表。
比如，在我们生成的代码中，首页里使用 /-posts.swig( 在线代码)来显示文章列表，其主要代码如下：
{% if site.posts. > 0 %} {# ... #} {% forin site.posts.() %} {# ... #} {%%}{% endif %}
如果你的博客已经有几篇文章得话，会发现文章虽然列出来了，但并不是按时间来排列的。所以几乎没什么用，但如果使用 page.posts变量替代 site.posts，结果就不一样了，修改一下试试。
再刷新一下首页，可以看到，文章只有几篇，并不是全部文章，且按时间倒序排列。page的所有成员，请参见列表。

文章插图
各种链接的处理
获取某个页面的地址，有很多方法。包括：全局的变量 path url
page.path page.，这两个值在单个的文章、分类和标签中，也是都有的
我们来看看这几个值各自有何作用。打开 /post.swig，在第4行前插入如下代码：
{{ path | json }}
{{ url | json }}
{{ page.path | json }}
{{ page. | json }}
然后启动博客，进入做任意一篇文章，可以在顶部看到三个字符串，类似于：
"2016-06/--Float--.html""""2016-06/--Float--.html"""
链接的具体样式，是主配置文件中来决定的，这里的配置值为 :year-:month/:title.html 。可以看出来，path与 page.path输出一致，url与 page.一致。而这几个链接都是无法直接使用的。因为 page.path的值是相对路径，所以除了首页都是不能直接当链接的。而 path.，则是带有主配置文件中 url值配置的全路径，也不太好当作站内链接直接使用。这时候，就需要 Hexo 提供的帮助函数 ()来救场了。
再来加一行：
{{ (page.path) | json }}
输出为：
"/2016-06/--Float--.html"
这个结果就比较适合作为站内链接了。
在页面中加入 css 与 js 文件
Hexo 提供了两个帮助函数 css()和 js()，传入路径数组便可生成对应的 link/ 标签。路径数组配置在主题的配置文件中。

文章插图
当前页面类型的判断
由于有些代码在不同的页面都是共用的，所以有时候就需要根据不同的页面，做不同的显示。比如，一般会把 HTML 的部分写到一个单独的文件里。比如，这里生成的 //.swig文件里，就需要根据不同的页面，来生成不同的标签值。这类判断的方法主要有： ()