效果展示

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

1. 将以上代码中的 about-me 和样式路径（css/lopwon.firefly.css）替换为自己的，如果不显示萤火虫效果，可尝试修改 style 中的 z-index 层叠值（如：9）。
2. 如果想在多个独立页面同时使用萤火虫效果，可以将以上代码中的 if 语句修改为：

<?php if ($this->is('page','about-me') or $this->is('page','test')): //将 about-me 和 test 同时显示萤火虫效果 ?>