Using hexo set up a blog knows that hexo there are a number of topics for us to choose, but, if the subject does not have our own want to do, as a front-end developer, this time, of course, is to choose the DIY I here is the ejs template files used, so the following content need to understand the use of some ejs, I will not elaborate on the relevant grammar in the process of the article. I wrote a theme and put it on Github. Now it is constantly updated

Create a custom theme

Under the Themes folder, create a folder for your own theme. I will write it as simp

Theme directory

New directory simp // self-built theme directory ├─ _config.yml // Theme Configuration file ├─ languages // Language configuration file ├─ layout // Main structure of HTML template │ ├─ index.ejs // Home page template │ ├ ─ ─ layout. Ejs / / layout template │ └ ─ ─ post. The ejs / / md after compiled into HTML document template └ ─ ─ the source / / static resource file directory ├ ─ ─ CSS / / CSS style └ ─ ─ js / / JavaScript Script Directory

Configuration Modification

Change theme to simp in the _config.yml file in the root directory

theme: simp
Copy the code

Yml writes to the following configuration in the theme directory. _config.yml does not write to the following configuration

menu:
Copy the code

Run locally

Write something random in layout.ejs

here is layout
Copy the code

Start the server in the SIMP directory using hexo S, as shown below

here is index
Copy the code

post.ejs

here is post
Copy the code

layout.ejs

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0" name="viewport">
    <title>Home</title>
</head>

<body>
    <p>here is layout</p>
    <p><% - include("index.ejs") % ></p>
    <p><% - include("post.ejs") % ></p>
</body>

</html>
Copy the code

Refresh the page and import the figure successfully

Modify the topic configuration file

Here are some of my own configurations. In the template file you can call the value _config.yml using theme.

# nav
nav:
- HOME: /
- ABOUT: /about
- GITHUB: https://github.com/QZEming
- CSDN: https://blog.csdn.net/zemprogram/

# info
title: Front end little black
avatar: /img/assets/logo.png
favicon: /img/assets/favicon.ico
Copy the code

Add each layout template file

Ejs, layout.ejs, and post.ejs. I’m not going to go into detail about the code word process for each file. │ ├─ partial │ ├─ partial │ ├─ partial │ ├─ partial │ ├─ partial │ ├─ partial │ ├─ partial │ ├─ partial │ ├─ ├─ aside. Ejs │ ├─ Aside. Ejs │ ├─ Aside. Ejs │ ├─ Aside │ ├─ ├─ ejs // Main page Template │ ├─ Index.ejs // Main page Template │ ├─ Layout. Ejs // │ ├─ ├─ ├─ ├─ ├─ CSS // ├─ ├─ CSS // JavaScript //

layout.ejs


      
<html>
<% - partial('_partial/head') % >
    <body>
        <% - partial('_partial/header') % >
        <div class="mainContainer">
            <% - partial('_partial/aside') % >
            <% - partial('_partial/main') % >
        </div>
        <% - partial('_partial/footer') % >
    </body>
</html>
Copy the code

nav.ejs

<nav class="topNav"> <! --> <% theme. Nav. forEach(r => {%> <a href=<%= object.values (r)%> class=<%=Object.values(r)=="/"+page.path? "chooseNav": "" %>> <%= Object.keys(r) %> </a> <% }) %> <img src="/img/assets/code.png" alt="avatar"> </nav>Copy the code

aside.ejs

<aside class="aside">
    here is aside
</aside>
Copy the code

head.ejs

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0" name="viewport">
    <! Favicon -->
    <% - favicon_tag(theme.favicon) % >
    <! Style.css -->
    <% - css('css/style') % >
    <title>
        <% = theme.title% >
    </title>
</head>
Copy the code

header.ejs

<header id="header" class="header">
    <div class="avatarContainer">
        <h1 class="blogName">
            <% = theme.title% >
        </h1>
    </div>
    <% - include('nav') % >
</header>
Copy the code

<main class="main">
    here is main
</main>
Copy the code

CSS file to change the style. Here, since I’m using less, I need to use NPM to install hexo-renderer-less to parse it

npm install hexo-renderer-less --save
Copy the code

Sass also has corresponding parsing NPM packages, practices and less

Add sidebar content

I added the author information and label directory here, and added the following template file info.ejs in the _partial folder to store the author information

<div class="info asideContainer"> <div class="imgContainer"> <img SRC =<%=theme. Avatar %> Alt =" author avatar "> </div> <div class="authorInfo"> <p class="authorName"><%=config.author%></p> <p class="subtitle"><%=config.subtitle %></p> <p class="description"><%=config.description%></p> <p class="keywords"> <% config.keywords.forEach(keyword => { %> <span class="keyword"><%=keyword%></span> <% }) %> </p> </div> </div>Copy the code

Ejs is the template file used to hold the tag directory

<div class="tags asideContainer">
    <h3 class="asideTitle">Tags</h3>
    <div class="asideContent">
        <% if (site.tags && site.tags.length) {% >
            <% - list_tags(site.tags, {
              class: 'article-tag'}) % >
        <%} % >
    </div>
</div>
Copy the code

Modify the aside. Ejs template file

<aside class="aside">
    <% - partial('info') % >
    <% - partial('tags') % >
</aside>
Copy the code

Add a list of home page articles

Add a template file in the _partial folder. The template file code is as follows: singledirectory. ejs Article content template file

<div class="singleDirectory"> <h2 class="directoryTitle"> <a href=<%=post.path %>> <%= post.title %> </a> </h2> <div class="directoryLabel"> <span class="directoryDate icon-calendar"><%= post.date.format('YYYY-MM-D') %> </span> <! <div class="directoryTags icon tag"> <% if (post.tags && post.tags. Length){%> <%- list_tags(post.tags, { show_count: false, class: 'articleTag', style: 'none', separator:'' }) %> <% } %> </div> </div> <! <article class=" Directoryplan "> <% -post. plan %> </article>Copy the code

Directory. ejs Template file for the article directory

<div class="singleDirectory">
    <h2 class="directoryTitle">
        <a href=<%=post.path %>>
            <%= post.title %>
        </a>
    </h2>
    <div class="directoryLabel">
        <span class="directoryDate icon-calendar"><%= post.date.format('YYYY-MM-D') %> </span>
        <div class="directoryTags icon-tag">
            <% if (post.tags && post.tags.length){ %>
                <%- list_tags(post.tags, {
                      show_count: false,
                      class: 'articleTag',
                      style: 'none',
                      separator:''
                    }) %>
                    <% } %>
        </div>
    </div>
    <article class="directoryExcerpt">
        <%- post.excerpt %>
    </article>
</div>
Copy the code

Modify the main.ejs template file to write articles directory template files when articles exist

<main class="main">
    <% if (page.posts) { %>
        <% - partial('directory') % >
    <%} % >
</main>
Copy the code

Add article content and article table of contents

Add a template file to the _partial folder. The template file code is as follows: article. Ejs article template file

<article class="articleContainer">
    <h1 class="articleTitle">
        <span><%=page.title%></span>
    </h1>
    <div class="articleContent">
        <% - page.content% >
    </div>
</article>
Copy the code

ArticleDirectory articleDirectory template file

<aside class="articleDirectory">
    <h2 class="asideTitle">directory</h2>
    <div class="asideContainer">
        <% - toc(page.content{}) % >
    </div>
</aside>
Copy the code

Modify the main ejs

<main class="main">
    <% if (page.posts) { %>
        <% - partial('directory') % >
    <% }else{ %>
        <% - partial('article') % >
    <%} %>
</main>
Copy the code

Add back to top button

The “back to top” button only appears when the page is beyond the current height of the page. I control whether it appears by changing the class of the button. First, create a new script.js file in the js folder under the source folder and write

(function(){
    let backTop = document.getElementById('backTop')
    // Listen for scrolling
    window.addEventListener('scroll'.function(){
        if(document.body.scrollTop>document.body.clientHeight&&backTop.className=="backTop icon-arrow-up hideBtn"){
            backTop.className = "backTop icon-arrow-up showBtn";
        }else if(document.body.scrollTop<=document.body.clientHeight&&backTop.className=="backTop icon-arrow-up showBtn"){
            backTop.className = "backTop icon-arrow-up hideBtn"; }})// Bind the click event to the button
    backTop.addEventListener('click'.function(){
        function move(){
            // Jump back to the top when you are 10 away from it
            if(document.body.scrollTop<10) {document.body.scrollTop = 0;
                return false;
            // Otherwise return to 9/10 of the current distance from the top each time
            }else{
                document.body.scrollTop-=document.body.scrollTop/10
                return true; }}// Use requestAnimationFrame to make a buffer back to the top
        requestAnimationFrame(function fn(){
            if(move()){
                console.log(1)
                requestAnimationFrame(fn)
            }   
        })
    })
})()
Copy the code

Insert the About page

Using the command

hexo new page 'about'
Copy the code

Or create an about folder in the _POST directory and write anything to index.md. That way the theme is almost complete, just add some CSS styles. The corresponding code is also on Github, you can check the source code on Github

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Hexo custom theme builder notes

Create a custom theme

Theme directory

Configuration Modification

Run locally

Modify the topic configuration file

Add each layout template file

Add sidebar content

Add a list of home page articles

Add article content and article table of contents

Add back to top button

Insert the About page

Hexo custom theme builder notes

Create a custom theme

Theme directory

Configuration Modification

Run locally

Modify the topic configuration file

Add each layout template file

Add sidebar content

Add a list of home page articles

Add article content and article table of contents

Add back to top button

Insert the About page

Related Posts

A simple front-end CLI tool

First modular development | front-end engineering

Ajax, Es6 interview questions