LOADING...

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

loading

Hexo 博客搭建教程 III

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