前期准备，知识搜集

模板引擎

常用的几种模板引擎有：Swig、EJS、Haml 或 pug。

1.Swig

SWIG是一个用来把C/C++程序和Perl，Python，Ruby，Tcl等脚本语言连接起来的接口编译器。它的工作原理是获取C/C++头文件的声明，并使用它们生成可以访问底层C/C++代码的脚本语言。此外，SWIG提供了大量的定制特性，让你可以定制包装过程以使用你的应用。

SWIG使脚本语言与C/C++代码连接起来相当容易。具体入门

2.EJS

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

3.Haml

Haml 是一种简洁优美的模板语言，可以应用于Ruby on Rails、 PHP等Web开发平台，可以大大缩减模板代码，减少冗余，提高可读性。并且Haml是一种完备的模板语言，没有牺牲当前模板语言的任何特性。

前端知识储备

需要一些前端的知识，HTML，CSS，Javascript，YML。本次学习以模仿，走一步学一步为目标。后期有时间后再深入了解。

由于搜集的资料模板引擎大多为EJS为基础，预处理器为stylus，所以借此模仿。
非常感谢此文章给予的参考学习指南，如需详细指导请移步cloud.tencent.com/developer/a…

正文：正式从0开始写hexo主题

框架搭建

在themes这个目录下，创建一个自己喜欢的主题名字，并创建如下的目录结构。

模块介绍

在layout文件夹下创建以下三个

1.布局

「layout.ejs」 这个文件是用于布局的，需要在这个文件中引入下面两个ejs文件。（类似于继承）

<!DOCTYPE html>
<html lang="<%= theme.language %>">
  <head>
    <!--  head  -->
    <%- partial('_partial/head') %>
  </head>
  <body>
    <div class="container">
      <!--  header  -->
      <%- partial('_partial/header') %>
      <!--  index.ejs  -->
      <%- body %>
      <!--  footer  -->
      <%- partial('_partial/footer') %>
    </div>
  </body>
</html>
复制代码

2.主页

「index.ejs」 这个文件是用于主页的，首页将会使用该布局模板生成 HTML 文件，包括一些文章标题，日期之类的

<section class="posts">
  <% page.posts.each(function (post) { %>
  <article class="post">
      <div class="post-title">
          <a class="post-title-link" href="https://juejin.cn/post/<%- url_for(post.path) %>"><%= post.title %></a>
      </div>
      <!-- <div class="post-content">
          <%- post.excerpt %>
      </div> -->
      <div class="post-meta">
          <span class="post-time"><%- date(post.date, "YYYY-MM-DD") %></span>
      </div>
  </article>
  <% }) %>
</section>

复制代码

3.文章

「post.ejs」 这个文件是用于文章的，在 post.ejs 中引入文章，点击后就可以完成跳转

<%- page.content %>
复制代码

主题布局

1.在主题的配置文件中添加导航菜单的配置

在 theme-example 下的配置文件 _config.yml

menu:
  home: /
  archives: /archives
复制代码

2.保存 HTML 的 head

在此路径下，新建layout/_partial/「head.ejs」 文件，保存 HTML 的 head。CSS那是根据style来渲染，后续会提到。

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <title><%= config.title %></title>
  <%- css('css/style.css') %>
</head>

复制代码

3.编辑导航栏

在此路径下，新建layout/_partial/「header.ejs」 文件，编辑导航栏部分。

<header class="header">
    <div class="title">
        <a href="https://juejin.cn/post/<%= url_for() %>" class="logo"><%= config.title %></a>
    </div>
    <nav class="navbar">
        <ul class="menu">
            <% for (name in theme.menu) { %>
            <li class="menu-item">
                <a href="https://juejin.cn/post/<%- url_for(theme.menu[name]) %>" class="menu-item-link"><%= name %></a>
            </li>
            <% } %>
        </ul>
    </nav>
</header>
复制代码

4.编辑页脚

在此路径下，新建layout/_partial/「footer.ejs」 文件，编辑页脚部分。


<footer>
    <p>Theme is a test by Jovi Deng </p>
    <p>Powered by hexo </p>
</footer>
复制代码

主题样式

页面导航样式

创建 /source/css/_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;
            }
        }
    }
}
复制代码

文章样式

创建/source/css/_partial/post.styl 存放文章样式

.post {
    margin: 1em auto;
    padding: 30px 50px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 2px #ddd;
}

.posts  {
    .post:first-child {
        margin-top: 0;
    }

    .post-title {
        font-size: 1.5em;

        .post-title-link {
            color: #368CCB;
            text-decoration: none;
        }
    }

    .post-content {
        a {
            color: #368CCB;
            text-decoration: none;
        }
    }

    .post-meta {
        color: #BABABA;
    }
}
复制代码

整体基本样式

文件夹中创建 style.styl，编写一些基础的样式，引入前面两个

body {
    background-color: #F2F2F2;
    font-size: 1.25rem;
    line-height: 1.5;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

@import "_partial/header";
@import "_partial/post";
复制代码

样式基本创建粗略完成后，我们需要把样式添加到页面中（前面出现CSS的时候提到过）
在layout/_partial/head.ejs中加入一句

    <%- css('css/style.css') %>
复制代码

结语

目前只是一个非常简单的界面，很多知识并不完全弄懂，朦朦胧胧，后续会增加一些功能。写这篇文章主要是为了总结，给一些入门什么都不懂的小白一点框架介绍。非常感谢此文作者cloud.tencent.com/developer/a…

以下是成果展示

文章版权归作者所有，未经允许请勿转载。

THE END

前端

微服务实战Go Micro v3 系列（四）- 事件驱动(Pub/Sub)

全局对象window下找不到const、let声明的变量？？？（第一次发现整个人都。。。）

OpenBSD TCP Stack远程拒绝服务漏洞

Roundcube Webmail SQL注入漏洞

OpenSSL加密问题漏洞

LibreSSL PRNG Entropy 弱加密安全漏洞

Hexo入门，从0到1自写主题（2）

前期准备，知识搜集

模板引擎

前端知识储备

正文：正式从0开始写hexo主题

框架搭建

模块介绍

1.布局

2.主页

3.文章

主题布局

1.在主题的配置文件中添加导航菜单的配置

2.保存 HTML 的 head

3.编辑导航栏

4.编辑页脚

主题样式

页面导航样式

文章样式

整体基本样式

结语

微服务实战Go Micro v3 系列（四）- 事件驱动(Pub/Sub)

全局对象window下找不到const、let声明的变量？？？（第一次发现整个人都。。。）

OpenBSD TCP Stack远程拒绝服务漏洞

Roundcube Webmail SQL注入漏洞

OpenSSL加密问题漏洞

LibreSSL PRNG Entropy 弱加密安全漏洞

Hexo入门，从0到1自写主题 （2）

前期准备，知识搜集

模板引擎

前端知识储备

正文：正式从0开始写hexo主题

框架搭建

模块介绍

1.布局

2.主页

3.文章

主题布局

1.在主题的配置文件中添加导航菜单的配置

2.保存 HTML 的 head

3.编辑导航栏

4.编辑页脚

主题样式

页面导航样式

文章样式

整体基本样式

结语

Hexo入门，从0到1自写主题（2）