书接上文:Hexo 博客搭建教程 II
1. 目录介绍
介绍一下博客根目录各文件夹/文件的作用,我的主题用的是 EJS,其他如 Pug/Jade 等相差太大的模板引擎请不要参考本篇(我太懒了)
<root>
|---public # 静态网页文件
|---source # 文章(不要和主题文件夹下的source弄混)
|---themes # 主题
|---<theme-name>
|---layout # 布局文件
| |---layout.ejs # 网页的基本布局
|---source # 主题资源文件,里面的内容会生成到静态文件下
2. 添加自定义 JS/CSS
在 <root>\themes\<theme-name>\source
下添加自定义文件(最好把文件放在 js、css…文件夹下分类,不然生成的静态文件会很乱),然后在 layout.ejs 下添加如下内容,如果使用网络上的文件直接在 src/href 中填写路径即可
<file-name>为自定义文件名称
<!--JS-->
<script src="/<file-name>"></script>
<!--CSS-->
<link rel="stylesheet" href="/<file-name>" />
3. 我用的自定义文件
live2d.min.js:Live2D 组件,需要前置 PIXI.js
使用:将https://github.com/imuncle/live2d这里的 Live2D 模型 Clone 到本地,选择一个喜❤欢的模型(必须是 Cubism3 版本的,在
live2d_3
文件夹下)复制到<root>\themes\<theme-name>\source\model
<model-name>为模型名称,参数和我给的 CSS 样式可以更改,以下是我的配置<div id="L2dCanvas"></div> <script src="/js/live2d.min.js"></script> <script src="/css/live2d.css"></script> <script> var v = new Viewer({ width: 240, height: 325, right: "0", bottom: "0", basePath: "/model", role: "<model-name>", mobile: true, }); </script>
下载:
- live2d.min.js
- live2d.css
- live2d.zip(我用的 Live2d 模型)
fireworks.js:鼠标点击特效,需要前置 Anime.js
- 使用:
<canvas id="fireworks" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483647" ></canvas> <script src="/js/fireworks.js"></script>
- 下载:fireworks.js
background.js:流星背景特效
- 使用:
<canvas id="background" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:-1" ></canvas> <script src="/js/background.js"></script>
- 下载:background.js
4. Hexo Markdown 语法补充
Markdown 是支持渲染 HTML 的,所以可以实现各种效果
如果你要不使 HTML 标签被渲染可以在右边的小于号加 \
转义,如 <tag\>
,但还是推荐`tag`
的代码格式
字体
用<font>
来实现字体的样式修改<color>
<size>
<face>
分别是你字体的颜色,大小和字体名称<font color=<color> size=<size> face=<face>>Text...</font>
下载文件
Markdown 下载文件,网上搜到的都是 post_asset_folder 这个参数(也不知道为什么我不能用)
只要把文件放到<root>\theme\<theme-name>\source
下(同样,最好分类一下),在 Markdown 中引用就行
部分文件可能不会下载,在浏览器打开,如果有洁癖可以用第二种方法
<file-name>为文件名[Description...](/file-name) <a href="<file-name>" download>Description...</a>
注释
Markdown 注释和 HTML 一样<!-- Comment... -->
特别的,用
<!-- more -->
可以控制主页预览内容,后面的内容在显示全文时才出现解决部分主题没有块引用的样式
块引用会解析成<blockquote>
标签,添加自定义 CSS 即可
下一篇:Hexo 博客搭建教程 IV