从头开始创建和创建一个简单的Hexo主题

从头开始创建一个简单的博客主题。风格主要参考Hexo主题中的Noise主题。

在开始之前，你必须知道：

本文使用的模板引擎是ejs，使用的CSS预处理器是stylus。这也是hexo项目预装的render插件。如果你想使用其他模板或其他CSS预处理器，可以安装相应的render插件。例如，我的 Even 主题使用 Swig 和 SCSS。

目录结构

主题的目录结构以内置主题宽度为例：

.
├── languages  语言文件，用于国际化
├── layout     页面模板文件
├── scripts    Hexo 脚本
└── source     主题资源文件，包括页面样式，脚本，字体等

我们在文件夹里面新建一个mes，然后在里面 在deme- theme创建一个新的语言、脚本布局、❙、源文件夹。

创建布局模板

在布局中创建文件index.ejs。主页将使用此布局模板生成 HTML 文件。

layout/index.ejs:

Hello Word

编辑站点配置文件中的主题配置，使用我们刚刚创建的主题 - example

  <%- partial('_partial/head') %>
  
    <%- partial('_partial/header') %>
    
      <%- body %>
    
  

Run hexo server --debug 以调试模式打开Hexo本地服务器预览，访问http://localhost:4000/。

添加页面导航

现在我们需要向页面添加导航。由于导航不会只出现在首页，所以我们会在 layout 中创建一个共享布局文件 layout.ejs，同时创建一个 head。保存 HTML 标头并创建文件 _partial/header.ejs 来编写页面的导航部分。

layout/layout.ejs:

  <%- partial('_partial/head') %>
  
    <%- partial('_partial/header') %>
    
      <%- body %>
    
  

layout.ejs文件通过函数partial()包含其他文件请参阅模板 |Hexo详细了解。

layout/_partial/head.ejs:

这里使用了变量config site，它包含站点配置（即中的y‼_ml_ml_ml_y♸根目录配置）。此外，Hexo还提供了很多可以在模板中使用的变量。有关详细信息，请参阅变量 |Hexo。

layout/_partial/header.ejs:

• Home
• ArchiveArchive

中的内容并添加

你好世界

。目录布局自动继承目录布局并补充❀的内容。我们得到一个带有导航菜单的 Hello World 页面。

添加主题配置文件

其实我们需要导航菜单根据我们的需要来显示不同的项目。上面的写法不适合编辑。所以我们将导航菜单的配置添加到主题的配置文件中。在thmem-demo下新建主题配置文件_config.yml，添加需要配置的字段。然后就可以通过变量theme获取配置文件中的配置。

theme-demo/_config.yml:

menu:
  Home: /
  Archives: /archives

所以我们可以在中使用theme.menu进入菜单。将 header.ejs 编辑为：

% %

当需要添加导航链接时，可以直接添加到配置文件中，例如添加Github的链接：

menu:
  Home: /
  Archives: /archives
  Github: https://github.com/ahonn

此外，还可以添加其他需要的配置，例如RSS 、评论等等。

首页添加文章列表

接下来我们将完善首页模板，以显示文章列表。前面提到，Hexo提供了各种有用的变量，这里会用到变量page。 page根据不同的页面会有不同的属性。具体的属性和可以获得的数据可以在这里查看。

所以这里我们使用变量的posts属性来获取文章数据的集合。编辑文件index.ejs：

从page.posts页面获取一篇文章的数据，并获取文章标题、内容等数据填写在模板中。文章创建时间处理使用date()函数，这是Hexo提供的时间处理辅助函数。除非另有说明，本文使用的函数均为Hexo的效用函数。

文章摘录

由于首页在展示文章内容时使用了post.content，即文章的全部内容。这样首页就会显示每篇文章的内容。我们并不是真的想在主页上显示那么多内容，我们只想显示文章的片段。

Hexo提供了属性snippet来获取文章的片段，但这里需要在文章中添加标签。添加此标签后，post.excerpt 将收到该标签之前的内容。如果这样的标签不存在，则 post.excerpt 将为空。所以首页文章内容部分的post.content可以替换为post.excerpt。

添加页面样式

至此我们已经完成了首页的页面结构，但是我们还没有添加样式，所以看起来很丑。我们将在source文件中创建一个文件夹css来存储样式文件。

由于Hexo在创建新项目时安装了hexo-renderer-stylus插件，所以我们不需要任何额外的步骤，只需将样式文件放入css夹紧的文件。Hexo生成页面时，会将源source中的所有文件复制到生成的公共文件中，然后将样式编译为css文件。

在这个文件夹中的css中创建style.style，编写一些基本样式并导入所有样式‼所以最终编译后只会有一个文件style .css。创建_partial/header.styl和_partial/post.style来存储页面导航和文章样式，并在‼️‼️导入 这两个文件。

_partial/header.styl:

.header {
  margin-top: 2em
  display: flex
  align-items: baseline
  justify-content: space-between
  .blog-title .logo {
    color: #AAA;
    font-size: 2em;
    font-family: "Comic Sans MS",cursive,LiSu,sans-serif;
    text-decoration: none;
  }
  .menu {
    margin: 0;
    padding: 0;
    .menu-item {
      display: inline-block;
      margin-right: 10px;
    }
    .menu-item-link {
      color: #AAA;
      text-decoration: none;
      &:hover {
        color: #368CCB;
      }
    }
  }
}

_partial/post.style:,对于我们需要的页面，除其他外， ：这里我们使用另一个辅助函数 css ():

layout/_partial/head.ejs

  
  
  
  <%- css('css/style.css') %>

>

此时我们会看到网站的首页是这样的： ❙

我们的文章是存储在页面的source/_post/目录下。现在我们复制并粘贴原始的hello-world.md 10 次以上，然后显示网站的主页。你会发现首页只显示了10篇文章。

首页显示的文章数量可以通过页面配置文件中的字段on_page来调整，但不可能将所有文章放在一页上，所以现在我们添加分页文章列表。new to .ejs

...

<%- partial('_partial/paginator') %>

<%- partial('_partial/paginator') %>

.archive {
  margin: 1em auto;
  padding: 30px 50px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 2px #ddd;
  .post-archive {
    list-style: none;
    padding: 0;
    .post-item {
      margin: 5px 0;
      .post-date {
        display: inline-block;
        margin-right: 10px;
        color: #BABABA;
      }
      .post-title {
        color: #368CCB;
        text-decoration: none;
      }
    }
  }
}

Menu:
  Home: Home
  Archives: Archives
  Github: Github
Paginator:
  Prev: Prev
  Next: Next

<% if (page.total > 1){ %>

<% } %>

Menu:
  Home: 首页
  Archives: 归档
  Github: 交友
Paginator:
  Prev: 上一页
  Next: 下一页