Home About Me

Add Festive Lanterns to Your Blog Without Manually Turning Them On and Off

2026-08-01

Happy New Year 😁

If you want your blog to look a little more festive during the Spring Festival, hanging a few red lanterns on the page is a simple way to create the mood. Four large lanterns at the top of a blog can instantly make the whole site feel much more celebratory.

lanterns on a blog

There are plenty of lantern snippets online, and most of them are the kind you can copy, paste, and use right away. But this one is a little different: it is a small front-end plugin that can show the lanterns automatically.

The main advantage is that the display is controllable and fully automatic. Once you add the plugin with just a few lines of code, you do not have to remember to enable or remove it every year.

It will display the lanterns during the configured New Year period, then hide them automatically after the holiday. That means it will not interfere with the normal structure or everyday operation of your blog.

Here is how to use it.

1. Import the plugin

The simplest way is to add the following script inside the <head> tag:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lantern.min.js"></script>

You can also install it locally with npm:

npm install hexo-lanternjs

2. Add a container

Importing the plugin alone is not enough. You also need to tell it where the lanterns should be placed.

Add a container somewhere suitable on the page:

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

A couple of notes:

  • The id of this container can be changed. Just remember what you use, because it will be needed when creating the instance.
  • The no-select attribute is optional. It prevents the text inside the container from being selected, which helps keep the browsing experience smoother.

3. Create the instance

This is the key step. To let the lanterns be controlled automatically, create a Lantern instance after both the container and the plugin have been added.

The first parameter is the id of the container from the previous step. The second parameter can be an empty object {} if you want to use all default settings.

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

After that, regenerate and deploy your blog. The lanterns should appear automatically during the configured date range, giving the page a festive New Year look without requiring you to manually adjust it later 😋

Related Posts