阅读 528

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

这是我参与更文挑战的第1天,活动详情查看: 更文挑战

在使用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上面的代码,然后自己跟着敲。
最后制作出自己喜欢的风格主题

四、编辑文章

在source>_posts目录下添加md文件发布自己的文章。

文章的头部内容部分设置

---title: 封装一个axiosexcerpt: '简单封装一个axios公共库,平常项目可以直接引用,减少axios的一些基础配置,方便项目能够简单快速的利用axios请求后端数据,处理一些错误信息'toc: truetag: ['axios']category: ['vue']cover: https://cn.vuejs.org/images/logo.png---
复制代码

五、打包发布到github

通过hexo generate 打包

打包成功后,把Public 目录文件上传到github仓库  

5.1 创建github仓库

  • 创建一个***.github.io的仓库名,后续可以通过这个地址直接访问自己的博客

  • 复制仓库地址,然后再本地public初始化git

git init 

git remote add origin 仓库地址

git add .

git commit -m '备注'

git push origin master

六、总结

到这里,我们就完成了使用hexo 自定义模板,搭建自己的博客论坛,网上有很多博主开发好的模板,可以直接安装使用,但是有时候,别人的不一定完全适合自己,自己想要制作一套自己独一无二的模板,就可以自行开发模板然后进行安装。

文章分类
前端
文章标签