Lopwon Firefly 使用文档

2022年11月06日

demo-lopwon-firefly.jpg

版本型号：Lopwon Firefly
适用程序：Typecho
皮肤类型：插件
插件作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/lopwon-firefly.html
许可方式：MIT
官方演示：Lopwon Firefly

插件说明

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

从插件文件包里获取 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 同时显示萤火虫效果 ?>
参考来源

Pure CSS Particle Animation

This is a message

store