不为你的博客挂个喜庆的灯笼吗？

首先先向大家道声“新年快乐”哈😁

想必你已经看到了，我的博客已经悬挂了四个好看的大灯笼，在过年的氛围中显得十分喜庆。

当然，这种灯笼教程网上也有不少，一般来说直接复制粘贴就可以了！

哎~先别急着走哇！

今天我要带来点不一样的东西，那就是可以全自动显示灯笼的前端小插件。

这个插件的优势在于可控显示，而且是全自动的。你只需要三行代码引入插件，以后就再也不用你去操心了。

因为它自己会在过年时间显示，等过年后就会自动关闭显示，完全不影响博客平时的正常结构和运行。

这是不是非常 Nice 呢？

下面简单教学一下这个插件的使用方法。

一、引入插件

这一步非常的简单，你只需要在 <head> 标签里插入一下代码即可一键引入插件：

1	<script src="https://cdn.jsdelivr.net/npm/hexo-lanternjs@1.0.0/lantern.min.js"></script>

当然，你也可以使用 npm 下载到本地引入：

1	npm install hexo-lanternjs

二、提供容器

光有插件可不行，你至少得告诉插件你的灯笼应该挂在哪里吧？

所以你可以在页面合适的地方添加一个容器：

1	<div id="lantern-wrapper" class="lantern-wrapper" no-select></div>

提示：

这个容器的 id 是可以自己写的，你只需要记住它就行，因为后面会用到。
这个 no-select 属性是可以选择的，它会让容器内的文字不可被选中，从而保证用户的浏览体验。

三、创建实例对象

最关键的部分来了，要想让你的灯笼自动化控制你就需要创建一个实例对象。

你只需要在容器位置和插件引入位置的后面参考以下代码创建实例即可（注意第一个参数是前面容器的id;第二个参数可以给一个空对象{},代表全部使用默认配置）：

<script>
    let lantern = new Lantern('lantern-wrapper', {
        date: { // 日期格式：'月-日'
            from: '12-20',  // 开始悬挂灯笼的日期
            to: '1-31'  // 结束悬挂灯笼的日期
        },
        postion: {
            zIndex: 9999, // 整个灯笼的 z-index 属性
            lanternRL: [10, 150, 150, 10],  // 灯笼距离边界的距离：左侧灯笼距离左边的距离，右侧登录距离右侧的距离；页面灯笼从左往右依次设置
            lanternTop: 0 // 灯笼距离顶部的距离。你也可以使用数组从左往右依次设置每个灯笼的距顶距离，例如：[0, 100, 200, 300]
        },
        content: '万事如意' // 灯笼内显示的文字，只会截取前四个字符
    });
</script>