不为你的博客挂个喜庆的灯笼吗?
首先先向大家道声“新年快乐”哈😁
想必你已经看到了,我的博客已经悬挂了四个好看的大灯笼,在过年的氛围中显得十分喜庆。
当然,这种灯笼教程网上也有不少,一般来说直接复制粘贴就可以了!
哎~先别急着走哇!
今天我要带来点不一样的东西,那就是可以全自动显示灯笼的前端小插件。
这个插件的优势在于可控显示,而且是全自动的。你只需要三行代码引入插件 ,以后就再也不用你去操心了。
因为它自己会在过年时间显示,等过年后就会自动关闭显示,完全不影响博客平时的正常结构和运行。
这是不是非常 Nice 呢?
下面简单教学一下这个插件的使用方法。
一、引入插件
这一步非常的简单,你只需要在 <head>
标签里插入一下代码即可一键引入插件:
1 |
|
当然,你也可以使用 npm 下载到本地引入:
1 |
|
二、提供容器
光有插件可不行,你至少得告诉插件你的灯笼应该挂在哪里吧?
所以你可以在页面合适的地方添加一个容器:
1 |
|
提示:
- 这个容器的
id
是可以自己写的,你只需要记住它就行,因为后面会用到。 - 这个
no-select
属性是可以选择的,它会让容器内的文字不可被选中,从而保证用户的浏览体验。
三、创建实例对象
最关键的部分来了,要想让你的灯笼自动化控制你就需要创建一个实例对象。
你只需要在容器位置和插件引入位置的后面参考以下代码创建实例即可(注意第一个参数是前面容器的id;第二个参数可以给一个空对象{}
,代表全部使用默认配置):
1 |
|
最后将你的博客重新生成并部署,就可以看到你的博客已经被挂上漂亮的小灯笼了😋
详情可以参考官方手册。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 SeaEpoch!
评论