Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wenjing-xin/plugin-blog-hao

让博客变得更好！目前计划功能如下：为halo站点的单页面和文章集成 swiper幻灯片、PDF等文件展示功能！
https://github.com/wenjing-xin/plugin-blog-hao

Last synced: 6 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# plugin-blog-hao

**让你的博客变得更好**



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



## 一、目前已经完成的功能

(已兼容含有 pjax 的主题)

- 图片轮播功能（四种风格）

- 哔哩哔哩视频嵌入

- PDF文件嵌入

- 文本复制追加功能

- 全站失色功能

- 中英文符号自动空格，段落首行缩进功能

- 幻灯片展示（依托默认编辑器的HTML编辑快，目前不兼容其他markdown编辑器）



## 二、TODO

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



## 三、使用教程

### 1、PDF文件嵌入

标签语法

```html



```

属性说明

* src 为`必选属性`，它是展示的`PDF文件的路径`

* width `可选属性`，文件的宽度，默认 100%

* height `可选属性`，文件的高度，默认 800 ，单位 px，输入该属性时不需要带单位！



### 2、哔哩哔哩视频嵌入

标签语法

```html



```

属性说明

* bvid 为`必选属性`，自行搜索获取 bvid 的方法

* width `可选属性`，文件的宽度，默认 100%

* height `可选属性`，文件的高度，默认 500 ，单位 px，输入该属性时不需要带单位！



### 3、swiper 图片轮转



标签语法

```html



    


        {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}

    



```

属性说明

* type 为`可选属性`，swiper的类型，目前提供了五种类型的 swiper，分别为：slides、coverflow、card、thumbs、normal，如不填写。则默认为 normal 类型

* width `可选属性`，文件的宽度，默认 98%

* height `可选属性`，文件的高度，默认 300 ，单位 px，输入该属性时不需要带单位！



样式展示：

![](https://api.minio.yyds.pink/bbs/2024-06-26/1719384602-300917-swiper-show1-tuya.webp)

![](https://api.minio.yyds.pink/bbs/2024-06-26/1719384603-193019-swiper-show2-tuya.webp)



### 4、幻灯片

#### 4.1、效果展示：

![](https://api.minio.yyds.pink/bbs/2024-06-26/1719384942-472083-bloghaoslide.gif)

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

#### 4.2、标签语法：

```html



    


        ## 代码片段

        贴一段代码

        


        ## 动画示例

        
淡入


淡出


        
突出顯示紅色


        
先淡入，然後淡出


        
向上滑動同時淡入


        


        ## 数学公式实例 

        $$ J(\theta_0,\theta_1) = \sum_{i=0} $$

    



```

#### 4.3、说明：

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



>当属性为 render 的时候，每一页幻灯片的结尾必须要使用 `
` 进行分割，表明以上的内容单独为一页

当 render 属性为空时，每一页的幻灯片内容必须包裹在 `` 标签内，且不支持markdown语法！



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



#### 4.4、内容语法



##### 4.4.1、markdown编辑



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



##### 4.4.2、HTML编辑

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

```html



    


        水平幻燈片

        

            垂直幻燈片 1

            垂直幻燈片 2

        

    



```

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

```html



    


        

            

                

                    (def lazy-fib

                      (concat

                       [0 1]

                       ((fn rfib [a b]

                            (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))

                

            


        

    



```



## 四、交流

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



  

  




如果你有什么问题或者好的想法可以向我 [留言](https://blog.wenjing.xin/messageWall)



[个人站点](https://blog.wenjing.xin)

 [插件文档](https://blog.wenjing.xin/docs/halo-plugins)