何莹亮的博客-博客搭建之主题制作

第一步：知识准备

EJS

<% ‘脚本’标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 ‘<%’
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

Stylus(可选项)

扩展名

　　默认扩展名为.styl

语法支持

/*支持传统*/
a{
    font-size: 16px;
    color: #333;
}

/*抛弃花括号*/
a
    font-size: 16px;
    color: #333;

/*分号go die*/
a
    font-size: 16px
    color: #333

/*脱个精光*/
a
    font-size 16px
    color #333

变量

/*不能以@符开头*/
mainColor = #333
$border = solid

body
    color mainColor
    border 1px $border #333

函数

shadow(param)
    -webkit-box-shadow: 0 0 param #ccc;
    box-shadow: 0 0 param #ccc;

div
    width 100px
    shadow(4px)

嵌套

nav{
    position relative
    padding 0
    a{
        color #085cdf
    }
}

模块化

/* tips: 导入文件中定义的变量、函数等信息也将被引入，要注意命名冲突 */
@import "1.css"
p
    line-height 1.5

第二步：构建

初始化
1、在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，博主的是tech。

2、在tech文件夹内创建layout、source文件夹和_confi.yml文件

layout 用于存放主题的模板文件
source 用于存放除模板以外的资源文件
_confi.yml 主题配置文件

3、layout文件夹内创建layout.ejs、index.ejs、post.ejs、tag.ejs、archive.ejs、category.ejs、page.ejs文件

layout.ejs 布局文件，页面布局的入口
index.ejs 首页模板文件
post.ejs 文章页模板文件
tag.ejs 标签归档页模板文件
archive.ejs 分类归档页模板文件
category.ejs 归档页模板文件
page.ejs 分页页面模板文件

Tips

　　①以上除layout.ejs、index.ejs外的文件都是可选创建的

　　②文件或文件夹开头名称为 _（下划线）或隐藏的文件会被忽略

知识收集

1、一个页面的结构一般分为head（头部信息）、header(页眉)、content（主体内容）、footer（页脚）,可能还会包含aside（侧边栏）、menu（信息栏）。

2、hexo在进行解析layout文件时，遇到body变量时会在生成不同的页面加不同的模板文件，例如在生成首页时会加载index.ejs，生成标签页时加载tag.ejs。 tips: 加载tag.ejs等模板文件时，如果没有找到，就会加载index.ejs

3、变量

site 网站变量。
page 所写文章内容及 front-matter 设定的变量。
config 网站配置文件_config.yml中设定的变量。
theme 主题配置文件_config.yml中设定的变量.继承了网站配置。

编码

layout.ejs

<!DOCTYPE html>
<html lang="<%- config.language || 'en' %>">
<head>
    <%- partial('_partial/head') %>
</head>
<body>
    <section id="container">
    	<%- partial('_partial/header') %>
        <%- body %>
        <%- partial('_partial/footer') %>
    </section>
    <%- partial('_partial/menu') %>
</body>
</html>

_partial/head.ejs

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="description" content="<%- config.title; %>" />
<meta name="description" content="何莹亮的个人博客，何莹亮的技术作品，何莹亮的技术成长" />
<meta name="keywords" content="<%- page.keywords || theme.keywords; %>" />
<meta name="author" content="<%- config.author; %>" />
<title><%- config.title + (page.title ? '-' + page.title : '') %></title>
<link rel="stylesheet" type="text/css" href="/lib/style/public.css">
<link rel="stylesheet" type="text/css" href="<%= url_for('css/style.css') %>">

_partial/header.ejs

<header class="top">
    <a href="/" class="logo"><%- theme.logo; %></a>
    <nav class="topnav">
    <%
    for(let i in theme.menu){
        let item = theme.menu[i];
    %>
        <a href="<%= item.url %>" class="on"><i class="icons<%= ' icon-' + item.icon %>"></i><span><%= item.title %></span></a>
    <%
    }
    %>
    </nav>
    <span id="mob-more" class="icons icon-more"></span>
</header>

index.ejs

1	<p>何莹亮的首页内容</p>

_partial/footer.ejs

<footer id="footer">
    <div class="footer-copyright">
        © 2018 <a href="<%- config.url %>" target="_blank" title="何莹亮的博客">何处青山</a>
    </div>
</footer>

_config.yml

keywords: 何莹亮,个人博客,个人网站,首页,web前端,JavaScript,css,html
logo: 何处青山

menu:
  home:
    title: 首页
    url: /
    icon: home
  project:
    title: 我的项目
    url: /project/
    icon: project
  share:
    title: 技术分享
    url: /share/
    icon: share
  mark:
    title: 我的足迹
    url: /mark/
    icon: mark
  debug:
    title: Debug
    url: /debug/
    icon: debug 
  about:
    title: 关于我
    url: /about/
    icon: about

何莹亮原创技术文章，转载请注明出处：https://heyingliang.github.io/share/2018/02/19/makeTeme/

第一步：知识准备

第二步： 构建

第二步：构建