|
本文用到的工具有（点击进官网下载）：
vscode（当然任意能够编写html的编辑器都可以）、git、hexo文档手册
参考博客地址（大佬的博客比较详细给了我很多的帮助）：
﹏猴子请来的救兵
此文前提是在大家已经安装好hexo博客和框架并且已经在github或者码云之类的 网站搭建好自己的博客页面的情况下，如果没有请移步到这里安装。
因为官网的一些主题不符合个人胃口，所以折腾了一天搞搞自己的主题。
我的博客主题是从WordPress中找到的免费并且好看的资源复刻过来的。（没有打广告的嫌疑。。。）
先上我的博客预览图：
地址在这里
GiteeJilei
好了，废话到此为止，接下来就是正餐了。
一、先看安装好的hexo框架目录
| 名称 | 作用 |
|---|
| node_modules | NodeJs 所依赖的包 | | public | 我们执行hexo g之后，source中的 Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。 | | scaffolds | 模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo的模板是指在新建的文章文件中默认填充的内容。
例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。 | | source | 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。 | | themes | 顾名思义就是主题文件夹也是我们这回操作的主要文件夹 | | _config.yml | 网站的 配置 信息。 | | package.json | 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。 | | package-lock.json | package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。 |
二、在我们的_config.yml 中查看或者修改我们当前的主题
当前我的主题名是“white”，默认的主题应该是 “landscape”
我们进入到themes文件夹中新建一个文件夹“themesName”（此处可自定义，下文将此自定义主题名通通称为“themesName”），每一个主题文件夹中有三个必要文件
| 文件名 | 类型 |
|---|
| layout | 文件夹（存放布局文件） | | source | 文件夹（存放资源文件） | | _config.yml | 配置信息文件 |
在官方手册中还有两个文件夹分别是
| 文件名 | 类型 |
|---|
| languages | 语言文件夹。 | | scripts | 脚本文件夹。 |
三、layout文件夹内容
在layout文件夹中新建三个文件分别是
index.ejs，layout.ejs，post.ejs
其中layout.ejs就是我们访问博客首先渲染的页面。
做个小测试：
在layout.ejs中写一段html代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
这是测试文字111222333
</body>
</html>
使用hexo s 命令启动本地博客，在浏览器访问localhost:4000即可看到页面
index.ejs是用于主页的
post.ejs是用于文章的
我们可以使用 <%- include(“index.ejs”) %> 和 <%- include(“post.ejs”) %> 两个命令来将index.ejs和post.ejs中的页面渲染到layout.ejs中
所以，到这里肯定就已经有小伙伴有大胆的想法了。
EJS的语法可以在EJS文档中查看
然后另外一个就是hexo的变量api了：
详细hexo变量api在这里
四、source文件夹内容
| 文件 | 类型 |
|---|
| css | 文件夹（存放css文件） | | img | 文件夹（存放img图片） | | js | 文件夹（存放js文件） |
如何在.ejs文件中调用这些呢？
<%- body %> 同时引入 post.ejs 和 index.ejs
<%- css(path, …) %> 引入 css 文件
<%- js(path, …) %> 引入 js 文件
五、选择一个满足自己心意的网站
右键下载保存此网址，即可将此网站的html+css+js代码保存，之后我们就可以自定义这个网站变成博客啦。
|
