LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

Hexo 博客搭建教程 III

2022/4/17 教程 Hexo

书接上文：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>

  • 下载：

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
img_show