版本型号：Lopwon Firefly
适用程序：Typecho
皮肤类型：插件
插件作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/lopwon-firefly.html
官方演示：插件版，手动版
打开演示页面后稍等两秒见效果
插件说明
插件 Lopwon Firefly 的作用是：让你的 Typecho 博客增添萤火虫氛围效果，纯 CSS 无 JS 加载，可全局使用、可指定任意文章页显示，在暗调页面下效果更优。
另外，也可以不使用插件，通过简单的添加代码实现萤火虫氛围效果，详见 手动版本 。
注意：此插件仅供自用，请勿分发，请勿商用，且不对你在使用中产生的任何问题造成的不良后果，承担责任。
插件更新
2023年08月18日 发布 Lopwon Firefly v1.4 修正已知问题。
2023年08月02日 发布 Lopwon Firefly v1.3 优化功能代码。
2023年04月26日 发布 Lopwon Firefly v1.2 适配 PHP 8 以及修正查看使用萤火虫特效文章链接不正确的问题。
2022年11月09日 发布 Lopwon Firefly v1.1 修正文章中有多个标签时，功能不生效的问题。
2022年11月07日 发布 Lopwon Firefly
使用方法
重要：萤火虫氛围效果，使用了以下样式固定在视窗页面，如果显示异常（如：效果不生效或高于页面内容等），则需要调整层叠关系以适配自己的主题，请自行研究。
.Lopwon_Firefly {
position: fixed;
z-index: -1;
}
A 部署插件
1. 将压缩包里的文件夹 LopwonFirefly 及其内部的所有文件，上传至目录 usr/plugins 中。
2. 后台》控制台》插件，找到 Lopwon Firefly 并启用。
B 添加标签
后台》管理》标签，新增标签，该标签将用于标记使用萤火虫氛围特效的文章。
1. 标签名称，必须填入“萤火虫”，乱填无效！
C 标记文章
后台》管理》文章，打开或新建你需要使用萤火虫氛围特效的文章。
1. 在标签栏里，添加标签“萤火虫”。
D 配置插件
后台》控制台》插件，找到 Lopwon Firefly 并设置，依喜好设置即可。
手动版本
A 引入 CSS
右键保存样式文件 lopwon.firefly.css
B 引入 JS
<style>.circle-container {position: fixed;top: 0;left: 0;z-index: 1;}</style>
<script>
var firefly = "";
for (var i = 1; i <= 100; i++) {
firefly = '<div class="circle-container"><div class="circle"></div></div>';
document.writeln(firefly);
}
</script>
C 示例
在缩略名（slug）为 about-me 的独立页面添加萤火虫效果，操作如下：
1. 在主题文件 page.php 适当位置，或者！如果 page.php 有引入 footer.php 的话，也可以在 footer.php 适当位置，添加以下代码。
<?php if ($this->is('page','about-me')): //仅 about-me 显示萤火虫效果 ?>
<link rel="stylesheet" href="<?php $this->options->themeUrl('css/lopwon.firefly.css'); //样式路径 ?>" />
<style>.circle-container {position: fixed;top: 0;left: 0;z-index: 1}</style>
<script>
var firefly = "";
for (var i = 1; i <= 100; i++) {
firefly = '<div class="circle-container"><div class="circle"></div></div>';
document.writeln(firefly);
}
</script>
<?php endif; ?>
2. 将以上代码中的 about-me 和样式路径（css/lopwon.firefly.css）替换为自己的，如果不显示萤火虫效果，可尝试修改 style 中的 z-index 层叠值（如：9）。
3. 如果想在多个独立页面同时使用萤火虫效果，可以将以上代码中的 if 语句修改为：
<?php if ($this->is('page','about-me') or $this->is('page','test')): //将 about-me 和 test 同时显示萤火虫效果 ?>
参考来源
手气爆棚
试试手气~~哈哈
感谢分享！
技术就是要东西
这个评论试手气插件不错
你好，请问独立页面可以使用吗？
哈，我搞错了，插件也可以在独立页面起作用，但需要开启全局，如果想指定某些独立页面的话，就按照使用文档中（C 示例）操作。
插件版只能在文章页使用，因为要添加标签，独立页的话需要手动版直接添加，稍等我更新下使用文档，把操作写具体些。