Preparation, knowledge gathering

A template engine

Some common template engines are Swig, EJS, Haml, or PUG.

1.Swig

SWIG is an interface compiler used to connect C/C++ programs with scripting languages such as Perl, Python, Ruby, and Tcl. It works by taking declarations of C/C++ header files and using them to generate a scripting language that can access the underlying C/C++ code. In addition, SWIG offers a number of customization features that allow you to customize the packaging process to use your application.

SWIG makes it fairly easy to connect scripting languages to C/C++ code. The specific primer

2.EJS

What does “E” stand for? It can mean Embedded, Effective, Elegant, or Easy. EJS is a simple templating language that helps you generate HTML pages using ordinary JavaScript code. EJS has no dogma on how to organize content; There is no new iteration and control flow syntax; It’s just plain old JavaScript code.

3.Haml

Haml is a concise and elegant template language, which can be applied to Web development platforms such as Ruby on Rails and PHP. It can greatly reduce template code, reduce redundancy, and improve readability. And Haml is a full-fledged templating language without sacrificing any of the features of the current templating language.

Front-end knowledge base

Need some front-end knowledge, HTML, CSS, Javascript, YML. This study aims to imitate and learn step by step. Later have time to further understanding.

Since most of the data template engines collected are based on EJS and the preprocessor is stylus, this is used to imitate. Thank you very much for the reference study guide, this article gives detailed guidance for please click cloud.tencent.com/developer/a…

Body: Officially write the hexo theme from 0

Frame structures,

In the Themes directory, create a theme name you like and create the following directory structure.

Module is introduced

Create the following three in the Layout folder

1. The layout

The “layout.ejs” file is used for layout, and the following two EJS files need to be imported into this file. (Similar to inheritance)

<! 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>Copy the code

2. The home page

Ejs file is used for the home page, which will use the layout template to generate HTML files, including article titles, dates and so on

<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-content"> <%- post.excerpt %> </div> --> <div class="post-meta"> <span class="post-time"><%- date(post.date, "YYYY-MM-DD") %></span> </div> </article> <% }) %> </section>Copy the code

3. The article

Post.ejs is a file for articles. You can import articles in post.ejs and click to jump to them

<%- page.content %>
Copy the code

Theme layout

1. Add the navigation menu to the theme configuration file

Config file _config.yml under theme-example

menu:
  home: /
  archives: /archives
Copy the code

2. Save the HTML head

In this path, create a layout/_partial/ head.ejs file to save the HTML head. CSS is rendered according to style, which will be covered later.

<head> <meta http-equiv="content-type" content="text/html; <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>Copy the code

3. Edit the navigation bar

In this path, create layout/_partial/ Header. ejs and edit the navigation bar.

<header class="header">
    <div class="title">
        <a href="<%= 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="<%- url_for(theme.menu[name]) %>" class="menu-item-link"><%= name %></a>
            </li>
            <% } %>
        </ul>
    </nav>
</header>
Copy the code

4. Edit the footer

Create a layout/_partial/ footer.ejs file and edit the footer.


<footer>
    <p>Theme is a test by Jovi Deng </p>
    <p>Powered by hexo </p>
</footer>
Copy the code

The theme style

Page navigation style

Create /source/ CSS /_partial/header.styl to store page navigation

.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; }}}}Copy the code

The article style

Create /source/ CSS /_partial/post.styl to store article styles

.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; }}Copy the code

Overall basic style

Create style.styl in the folder and write some basic styles to introduce the first two

body { background-color: #F2F2F2; The font - size: 1.25 rem; The line - height: 1.5; } .container { max-width: 960px; margin: 0 auto; } @import "_partial/header"; @import "_partial/post";Copy the code

Once the styles are basically created, we need to add styles to the page (mentioned earlier when CSS came up) by adding a sentence to layout/_partial/head.ejs

    <%- css('css/style.css') %>
Copy the code

conclusion

At present, it is only a very simple interface, a lot of knowledge is not completely understood, hazy, some functions will be added later. Writing this article is mainly for summary, to some entry-level what all don’t understand a little white frame introduction. Thank you very much for this article the author cloud.tencent.com/developer/a…

Here are the results