加载中...
starm

心向大海,随遇而安

文章6
标签3
分类2
搭建一个Hexo博客,制作主题模板

搭建一个Hexo博客,制作主题模板

hexo建站开始

安装hexo-cli

npm install -g hexo-cli //全局安装hexo-cli
hexo init hexotest //创建一个hexotest 项目
cd hexotest //进入到hexotest
npm install //安装hexo依赖包

到这里我们一个简单的hexo博客就创建完成了
我们可以使用以下命令启动,在浏览器中通过localhost:4000查看

hexo server

创建自己的主题模板

在 themes下创建自己的主题目录 “riseape”

目录 描述
languages 语言
layout 模板布局文件
scripts 脚本文件夹
source 静态资源

自定义页面布局

layout目录下创建test.ejs 模板文件

<div class="riseape-primary">
  <div class="riseape-post">
      <%- page.content %>
  </div>
</div>

然后再在根目录下的 source 中创建一个 test.md 页面文件,设置layout 指向 test 模板

---
title: 自定义页面
layout: test
permalink: test.html
---

配置 _config.yml

theme: riseage //配置自定义主题

配置好主题,我们就开始来启动项目,自定义自己的主题模板吧,我是通过分析默认的模板,如何渲染数据。然后找的网上的一些模板,查看他们开源的github上面的代码,然后自己跟着敲。
最后制作出自己喜欢的风格主题

坚持学习 — 学的不仅是技术,更是梦想!!!

本文作者:starm
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可