Lopwon POP 使用文档

2022年11月04日

demo-lopwon-pop.jpg

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

进入演示站，可见
插件说明

Lopwon POP 是 Typecho 浮层插件，支持使用文本、链接、图片等方式呈现，可用于博客公告、广告等用途。

插件更新

2023年05月27日 发布 Lopwon POP v1.1 优化样式。

2022年11月06日 发布 Lopwon POP
使用方法

A 部署插件

1. 将压缩包里的文件夹 LopwonPOP 及其内部的所有文件，上传至目录 usr/plugins 中。

2. 后台》控制台》插件，找到 Lopwon POP (Free) 并启用。

B 配置插件

后台》控制台》插件，找到 Lopwon POP (Free) 并设置，依喜好设置即可。

提示：在（公告内容）里，不建议插入过多的内容，否则，会有 Y 滚动条出现。最美观的方案是：使用方形透明底 png 图片作为主视觉元素，外加一行文本即可。

C 使用技巧

使用HTML标签和属性，在（公告内容）里可以插入链接和图片等内容，以及自定义样式。其中，有些样式将沿用你的主题，例如：字体等，所以，有可能需要使用以下（示例四）的方法，自行微调样式。

1. 示例一，带链接的图片，如：


    <a href="跳转链接" target="_blank"><img src="图片链接" /></a>


2. 示例二，带链接的文本，如：


    <a href="跳转链接" target="_blank">文本内容</a>


3. 示例三，给文本分段，如：


    <p>文本内容一</p>
    <p>文本内容二</p>


4. 示例四，自定义字号，如：


    <style>.Lopwon_POP-content p {font-size: 18px;}</style>
网页版本

此项为延展使用，源于网友小胖提出的需求：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lopwon POP 网页版</title>
    
    <style>
    .Lopwon_POP-content *,
    .Lopwon_POP-content *::before,
    .Lopwon_POP-content *::after {
        box-sizing: inherit;
    }
    .Lopwon_POP-close {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0 0 0 / 85%);
        z-index: 999999998;
    }
    .Lopwon_POP-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        max-width: 480px;
        max-height: 90vh;
        text-align: center;
        font-size: 100%;
        color: white;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 999999999;
    }
    .Lopwon_POP-content p {
        margin: 0.5em 0;
        padding: 0 1em;
        font-size: 1.2em;
    }
    .Lopwon_POP-content img {
        width: auto;
        height: auto;
        max-width: 480px;
        max-height: calc(90vh - 5em);
        border: none;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .Lopwon_POP-content img:hover {
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -ms-transform: scale(1.02);
        -o-transform: scale(1.02);
        transform: scale(1.02);
    }
    .Lopwon_POP-content a {
        color: orange;
        text-decoration: none;
    }
    .Lopwon_POP-content a:hover {
        color: white;
        outline-width: 0;
    }
    .Lopwon_POP-btn {
        position: absolute;
        top: calc(50% - 90vh / 2 + 2.5em);
        left: calc(50% + 480px / 2 + 2.5em + 0.5em);
        width: 5em;
        height: 5em;
        padding: 0.25em;
        border: 0.25em solid white;
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 3em;
        background-color: rgb(255 255 255 / 25%);
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAgMAAAAog1vUAAAADFBMVEVHcEz///////////8Gn9AKAAAAA3RSTlMAqlW1nzXGAAAAr0lEQVQ4y+2TwRWDIAyG1YuvU3QEV2CUbqKbdQWH6aEXpY8QMITvdQJzIQnke5D8DMNt/+1RnFdNLSGv47em3nte57NkpvjJzjNumhrjkZ01hnJM3bolBQKbC+DydcfCDEoDi9ISi9LIorSmQUnYoqSoRQmsRQnMoRLMoRLMoRLMoRLMoygFhYDvLwFXhQfBs/vmQAuh0TCOfmgwWhAAyKQXE0gOhAnyJZHDV7iN7QdsCYpJsPBiHAAAAABJRU5ErkJggg==");
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        cursor: pointer;
        opacity: .3;
    }
    .Lopwon_POP-btn:hover {
        opacity: 1;
    }
    @media screen and (max-width: 640px) {
        .Lopwon_POP-content {
            justify-content: flex-start;
            top: calc(50% - 50px);
            width: calc(100% - 1em);
            max-height: calc(50vh + 5em);
        }
        .Lopwon_POP-content img {
            max-width: calc(100vw - 2em);
            max-height: 50vh;
        }
        .Lopwon_POP-btn {
            top: calc(50% + (50vh + 5em) / 2);
            left: 50%;
        }
    }
    </style>
    
</head>

<body>

    <div class="Lopwon_POP-content" id="Lopwon_POP-content">
        <!-- 在此处编写 POP 内容 -->
    </div>
    
    <div class="Lopwon_POP-close" id="Lopwon_POP-close" onclick="Close()">
        <span class="Lopwon_POP-btn"></span>
    </div>

    <script>
    function Close() {
        document.getElementById('Lopwon_POP-content').style.display = 'none';
        document.getElementById('Lopwon_POP-close').style.display = 'none';
    }
    </script>

</body>
</html>

This is a message

store