<译>建立一个Hexo主题-Part1:首页

时间  2019-11-06
标签 建立 一个 hexo 主题 part1 首页 繁體版
原文   原文链接

前言：
本系列文章翻译自@Jonathan Klughertz的博客，将会用三篇文章的篇幅详细讲解如何制做一个Hexo主题。
我不是学翻译出身，如有翻译错误或是不到位之处，请指正。css

在这个系列教程中，你将学习怎么从零开始制做一个Hexo主题。我很喜欢Hexo，而且天天都在使用，不幸的是，直到今天关于主题制做的文档仍是至关稀缺。因此我打算弥补这个空缺。html

预先准备

  • Hexo博客的基础使用。若是你是第一次接触，请前往官网阅读教程
  • 了解Bootstrap
  • 了解Javascript模板引擎（咱们将使用EJS）

项目描述

这个项目旨在制做一个Hexo主题并详细了解Hexo引擎的工做方式。
我不想在HTML和CSS上花费太多时间，因此咱们将重置下面这个Hexo主题：https://getbootstrap.com/docs... 。它是Bootstrap文档中的一个标准初始模板样例。
咱们将一步步地重用CSS、复制粘贴HTML，直到最后实现想要的效果。
若是你感到困惑或者只对它的代码感兴趣，请前往github。html5

项目结构

建立一个新的hexo博客

让咱们从搭建一个全新的hexo博客开始吧jquery

# Create a new folder
mkdir hexo-theme-creation 
cd hexo-theme-creation
# Initialise Hexo
hexo init

建立主题文件夹

# Enter the theme folder
cd themes
# bootstrap-blog-hexo is also going to be the name of our theme
mkdir bootstrap-blog-hexo

注意：若是你想在git中保存主题的话（你也应该这么作），请在/themes/bootstrap-blog-hexo/中初始化git。git

文件夹结构

这是咱们开始工做所须要的文件和文件夹：github

|-- layout // .ejs templates 
|-- source // source files (CSS, scripts)
|-- _config.yml

建立如下两个文件夹和_config.yml文件。ajax

复制bootstrap blog源码

从bootstrap blog template复制全部咱们须要的源码并放在source文件夹里。你能够选择经过浏览器查看源码并复制下来，或者是下载该压缩包，以后解压到source文件夹里。bootstrap

|-- layout 
|-- source 
    |-- bootstrap // Copy the boostrap library files here 
    |-- css // Copy the blog's css file here
    |-- favicon
        |-- favicon.ico // Your choice of favicon
    |-- js // Copy the blog's js file here
|-- _config.yml

Hexo的基本要素

在咱们开始写第一个模板文件以前，先来看看Hexo博客生成过程的基本要素。api

页面类型

咱们可以在主题中定义6种页面类型，与之相对应地，在public文件夹生成的每个单独的HTML页面都属于下面模板中的其中一个：浏览器

模板 备用模板 页面描述
index 无 这是博客的首页，也是网站的主要入口。本教程中咱们将让其显示文章摘要列表
post index 这是文章的详情页。咱们将展现一篇完整的文章以及一个评论区
page index 这是页面的详情页，与post同样，可是是page类型的post
archive index 这是归档页。它将显示咱们博客中全部文章的标题和详情页连接
category archive 这是分类页。与归档页相似，可是会根据类别进行筛选
tag archive 这是标签页。与分类页相似，可是会根据标签进行筛选

在本篇教程中咱们将建立index模板。

在页面生成过程当中，Hexo将会搜索名字为index.ejs,post.ejs,page.ejs等的文件，这些模板以后用于建立静态HTML页面。

公共布局

Hexo支持使用公共的布局文件，上面的模板都将使用到该文件。
该文件命名为layout.ejs。不一样页面类型的模板会建立一些内容，而这个文件就比如这些内容的“外壳”。
在咱们的主题中，公共布局将包括：<html>标签、<head>标签、头部、菜单、底部和侧边栏。基本上是全部类型的页面都具有的元素。
不一样的页面模板将只负责建立实际内容，这些内容将放在咱们的主体部位。

变量

在全部的模板中，咱们均可以使用hexo引擎提供的内置变量。如下是部分变量：

  • Site：site包含了网站的信息。例如，咱们能够经过site.posts访问博客中的全部文章。当咱们想要显示统计数据的时候，这将派上用场。
  • Page：page是主要变量，包含了许多与当前页面相关的信息，包括全部的文章标题、日期、内容等。
  • Config：config是一个指向站点_config.yml文件的JavaScript对象
  • Theme：theme是一个指向主题_config.yml文件的JavaScript对象

主题的布局建立

上面说起了/layout/layout.ejs文件，如今咱们开始来建立它。

顶部标签

首先建立layout.ejs文件并插入<html></html>标签

//layout/layout.ejs
<html>
<!-- Head tag -->
<%- partial('_partial/head') %>
</html>

这里咱们将全部<head>标签里的代码提取出来并放在局部视图中，这有助于实现关注点分离和代码重用。
语法是partial('path' [, arguments])
在建立layout/_partial/head.ejs文件后，从bootstrap源码中复制head标签里的代码：

// layout/_partial/head.ejs
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon/favicon.ico">
    <title>Blog Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <%- css('bootstrap/css/bootstrap.min.css') %>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <%- css('css/ie10-viewport-bug-workaround.css') %>
    <!-- Custom styles for this template -->
    <%- css('css/blog.css') %>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

这很简单，咱们只需使用CSS helper插入样式表。
source文件夹中的文件将会被复制到站点根目录下，因此不要在路径中包含source/
咱们将让<title>和<meta>标签保持动态，不过如今先暂且无论它们。

底部标签

底部标签位于</body>以前。咱们将在这个局部视图中包含全部脚本。
先修改一下布局：

// layout/layout.ejs

<html>
<!-- Head tag -->
<%- partial('_partial/head') %>
<body>
    <!-- After footer scripts -->
    <%- partial('_partial/after-footer') %>
</body>
</html>

而后建立layout/_partial/after-footer.ejs的内容：

// layout/_partial/after-footer.ejs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<%- js('bootstrap/js/bootstrap.min.js') %>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<%- js('js/ie10-viewport-bug-workaround.js') %>

注意JS helper function的使用，它将引用本地js文件。

顶部菜单

相似地，在<body>标签后建立顶部菜单。

// layout/layout.ejs

// [...]
<body>
    <!-- Menu -->
    <%- partial('_partial/menu') %>
    
// [...]

layout/_partial/menu.ejs 的内容：

// layout/_partial/menu.ejs

<div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav">
            <% for (var i in theme.menu){ %>
                <a class="blog-nav-item" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
            <% } %>
        </nav>
    </div>
</div>

注意theme全局变量的使用,它指向的是主题的_config.yml文件。为了能够在主题配置中配置菜单，咱们须要在_config.yml文件中添加配置：

_config.yml
# Header
menu:
  Home: /
  Archives: /archives

在menu.ejs中咱们遍历了配置文件中全部的菜单项目并建立对应的连接。

顶部

顶部将位于顶部菜单下面，它包含了博客标题和子标题：

// layout/_partial/header.ejs

<div class="blog-header">
    <h1 class="blog-title"><%= config.title %></h1>
    <p class="lead blog-description"><% if (config.subtitle){ %><%= config.subtitle %><% } %></p>
</div>

这里咱们使用了指向站点_config.yml文件的config变量，它包含了可供配置的标题和子标题属性。
注意在布局的<div class="container"><div>中嵌套顶部：

// layout/layout.ejs

<html>
<!-- Head tag -->
<%- partial('_partial/head') %>
<body>
    <!-- Menu -->
    <%- partial('_partial/menu') %>
    <div class="container">
        <!-- Blog Header: title and subtitle -->
        <%- partial('_partial/header') %>
    </div>
    
// [...]

底部

底部如今是彻底静态的，内容以下：

// layout/_partial/footer.ejs

<footer class="blog-footer">
    <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
    <p>Adapted to Hexo by <a href="http://www.codeblocq.com/">klugjo</a>.</p>
    <p><a href="#">Back to top</a></p>
</footer>

主要内容和侧边栏

此时，咱们再加上主要内容和侧边栏，基本就差很少了。
下面是最终的layout.ejs：

// layout/layout.ejs

<html>
<!-- Head tag -->
<%- partial('_partial/head') %>
<body>
    <!-- Menu -->
    <%- partial('_partial/menu') %>
    <div class="container">
        <!-- Blog Header: title and subtitle -->
        <%- partial('_partial/header') %>
        <div class="row">
            <!-- Main Content -->
            <div class="col-sm-8 blog-main">
                <%- body %>
            </div>
            <!-- Sidebar -->
            <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
                <%- partial('_partial/sidebar') %>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <%- partial('_partial/footer') %>
    <!-- After footer scripts -->
    <%- partial('_partial/after-footer') %>
</body>
</html>

body变量对应了不一样页面类型模板建立的内容（参见上面）。
至于侧边栏，咱们如今暂且使用来自bootstrap模板的硬编码：

// layout/_partial/sidebar.ejs

<div class="sidebar-module sidebar-module-inset">
    <h4>About</h4>
    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
    <h4>Archives</h4>
    <ol class="list-unstyled">
        <li><a href="#">March 2014</a></li>
        <li><a href="#">February 2014</a></li>
        <li><a href="#">January 2014</a></li>
        <li><a href="#">December 2013</a></li>
        <li><a href="#">November 2013</a></li>
    </ol>
</div>
<div class="sidebar-module">
    <h4>Elsewhere</h4>
    <ol class="list-unstyled">
        <li><a href="#">GitHub</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Facebook</a></li>
    </ol>
</div>

首页文件

布局到位后，咱们就能够开始建立第一个页面类型模板inde.ejs了。
这是比较简陋的第一个版本：

// layout/index.ejs
<span>Content</span>

别小瞧它，咱们能够用这个在浏览器中测试主题：

# Verify that everything is alright
hexo generate
# Start hexo server
hexo server

访问 http://localhost:4000/ 。哇！
注意：不要忘记在站点的config文件中更新主题：

_config.yml
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: bootstrap-blog-hexo

遍历博客文章

咱们想要在首页显示各篇文章的摘要。
首先，在咱们的index.ejs文件中遍历文章：

// layout.index.ejs

<% page.posts.each(function(item){ %>
    <%- partial('_partial/article-excerpt', {item: item}) %>
<% }); %>
  • 经过page.posts获取该页面的全部文章
  • 经过<%- partial('name', args) %>给partial传参

文章布局

建立article-excerpt.ejs文件，添加适合主题的代码。这是个人布局：

// layout/_partial/article-excerpt.ejs

<div class="blog-post">
    <!-- Title -->
    <h2 class="blog-post-title">
        <a href="<%- config.root %><%- item.path %>">
            <%- item.title %>
        </a>
    </h2>
    <!-- Date and Author -->
    <p class="blog-post-meta">
        <%= item.date.format(config.date_format) %>
        <% if(item.author) { %>
            by <%- item.author %>
        <% } %>
    </p>
    <!-- Content -->
    <%- item.excerpt || item.content %>
    <!-- Only display the Read More link if we are displaying an excerpt -->
    <% if(item.excerpt) { %>
        <p>
            <a href="<%- config.root %><%- item.path %>">
                <%= theme.excerpt_link %>
            </a>
        </p>
    <% } %>
</div>
全文连接

全文连接是由config.root（配置选项，至关于/）和item.path(相对路径或者绝对路径，指向全文)链接组成的。

文章做者

默认状况下，Hexo没有关于做者属性的的文章变量。不过咱们能够在front matter中添加任意本身想要的变量。
若是你想要在文章中显示做者名字，那么文章的front matter应该相似以下进行设置：

title: Hello World
author: Klughertz Jonathan
---
Item excerpt 和 Item content

当用Hexo编辑文章时，你能够用<!-- more -->标签从文章内容中截取摘要。在本教程中，由于咱们展现的是文章列表，因此选择显示摘要。以后用户能够经过点击文章标题或者“阅读更多”的连接浏览全文。

“阅读更多”文本

别忘了，你须要像我这样在主题的配置文件中添加一个新的属性：

_config.yml
# Read More text
excerpt_link: Read More

但愿接下来的代码容易理解。如今，我建议你写一些除了默认的Hello World以外的文章并享受这个结果。

分页器

在本篇文章中，咱们最后须要处理的是首页的分页器。
在index.ejs文件中增长一个分页器的partial：

// layout/index.ejs

<% page.posts.each(function(item){ %>
    <%- partial('_partial/article-excerpt', {item: item}) %>
<% }); %>
<%- partial('_partial/pagination') %>

以后开始建立分页器的内容，layout/_partial/pagination.ejs:

// layout/_partial/pagination.ejs

<nav>
    <ul class="pager">
        <% if (page.prev){ %>
            <li><a href="<%- config.root %><%- page.prev_link %>">Previous</a></li>
        <% } %>
        <% if (page.next){ %>
            <li><a href="<%- config.root %><%- page.next_link %>">Next</a></li>
        <% } %>
    </ul>
</nav>
  • page.prev：上一页的页码。若是当前页是第一页，则为0
  • page.next：下一页的页码。若是当前页是最后一页，则为0
  • page.next_link和page.prev_link是什么就不用多说了。

若是你没有足够的文章用来查看分页器的工做效果，能够在主配置文件中（per_page属性）调整每一页的文章数。

这就是今天的内容，在下一篇教程中，咱们将完成博客剩下的全部页面。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程