Skip to content

让博客变得更好!目前计划功能如下:为halo站点的单页面和文章集成 swiper幻灯片、PDF等文件展示功能!

License

Notifications You must be signed in to change notification settings

wenjing-xin/plugin-blog-hao

Repository files navigation

plugin-blog-hao

让你的博客变得更好

为你的博客和站点增加一些更实用的功能,单页面和文章集成 swiper 以及幻灯片、PDF文件、bilibili视频插入等功能!每一个让博客变得更好的需求都会在这里去实现!

一、目前已经完成的功能

(已兼容含有 pjax 的主题)

  • 图片轮播功能(四种风格)
  • 哔哩哔哩视频嵌入
  • PDF文件嵌入
  • 文本复制追加功能
  • 全站失色功能
  • 中英文符号自动空格,段落首行缩进功能
  • 幻灯片展示(依托默认编辑器的HTML编辑快,目前不兼容其他markdown编辑器)

二、TODO

  • 开发专门的幻灯片编辑器

三、使用教程

1、PDF文件嵌入

标签语法

<bloghao-pdf src="https://domain.com/test/pdf" width="100%" height="600"></bloghao-pdf>

属性说明

  • src 为必选属性,它是展示的PDF文件的路径
  • width 可选属性,文件的宽度,默认 100%
  • height 可选属性,文件的高度,默认 800 ,单位 px,输入该属性时不需要带单位!

2、哔哩哔哩视频嵌入

标签语法

<bloghao-bili bvid="" width="100%" height="600"></bloghao-bili>

属性说明

  • bvid 为必选属性,自行搜索获取 bvid 的方法
  • width 可选属性,文件的宽度,默认 100%
  • height 可选属性,文件的高度,默认 500 ,单位 px,输入该属性时不需要带单位!

3、swiper 图片轮转

标签语法

<!-- 注意{}中的图片链接需要用英文逗号分割,且必须包裹在<div class="_img"></div>标签内 -->
<bloghao-img-swiper type="normal" width="100%" height="600">
    <div class="_img">
        {http://localhost:8090/upload/iTab-5g7ew7.jpg,http://localhost:8090/upload/女帝-tuya.webp,http://localhost:8090/upload/iTab-g7319l.png,http://localhost:8090/upload/iTab-28rmkm.jpg}
    </div>
</bloghao-img-swiper>

属性说明

  • type 为可选属性,swiper的类型,目前提供了五种类型的 swiper,分别为:slides、coverflow、card、thumbs、normal,如不填写。则默认为 normal 类型
  • width 可选属性,文件的宽度,默认 98%
  • height 可选属性,文件的高度,默认 300 ,单位 px,输入该属性时不需要带单位!

样式展示:

4、幻灯片

4.1、效果展示:

目前只支持在默认编辑器中借助 HTML/markdown 编辑块进行使用。具体使用方法如下:

4.2、标签语法:

<bloghao-slide render="md">
    <div class="slide-content">
        ## 代码片段
        贴一段代码
        <br>
        ## 动画示例
        <p class="fragment">淡入</p><p class="fragment fade-out">淡出</p>
        <p class="fragment highlight-red">突出顯示紅色</p>
        <p class="fragment fade-in-then-out">先淡入,然後淡出</p>
        <p class="fragment fade-up">向上滑動同時淡入</p>
        <br>
        ## 数学公式实例 
        $$ J(\theta_0,\theta_1) = \sum_{i=0} $$
    </div>
</bloghao-slide>

4.3、说明:

render 属性为可选属性,如果没有该属性,则无法使用markdown语法进行渲染,且同时要在插件配置项开启markdown插件

当属性为 render 的时候,每一页幻灯片的结尾必须要使用 <br> 进行分割,表明以上的内容单独为一页 当 render 属性为空时,每一页的幻灯片内容必须包裹在 <section></section> 标签内,且不支持markdown语法!

注意,使用markdown语法进行内容编辑时,它对缩进(避免混合使用制表符和空格)和换行(避免连续换行)很敏感!

4.4、内容语法

4.4.1、markdown编辑

背景、媒体 、代码 、数学 、片段 、链接 、布局 语法可参考 https://revealjs.com/zh-hant/markup/

4.4.2、HTML编辑

如果你在一个 section 内放置多个 section 元素,它们将被显示为垂直幻灯片。垂直幻灯片的第一个是其他幻灯片的“根”(在顶部),并将包括在水平序列中。

<bloghao-slide render="md">
    <div class="slide-content">
        <section>水平幻燈片</section>
        <section>
            <section>垂直幻燈片 1</section>
            <section>垂直幻燈片 2</section>
        </section>
    </div>
</bloghao-slide>

代码块 :data-trim 属性时,会自动移除代码周围的空白。避免对 HTML 进行转换,可以在 元素上添加 data-noescape 属性。

<bloghao-slide render="md">
    <div class="slide-content">
        <section>
            <pre>
                <code data-trim="" data-noescape="">
                    (def lazy-fib
                      (concat
                       [0 1]
                       ((fn rfib [a b]
                            (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
                </code>
            </pre>
        </section>
    </div>
</bloghao-slide>

四、交流

QQ交流群与QQ频道,加群后管理员自动审核

     

如果你有什么问题或者好的想法可以向我 留言

个人站点 插件文档

About

让博客变得更好!目前计划功能如下:为halo站点的单页面和文章集成 swiper幻灯片、PDF等文件展示功能!

Resources

License

Stars

Watchers

Forks

Packages

No packages published