爱好其实是一种惩罚
纪念我的放肆-消失的那么快
当前位置：首页 > 教学教程 > 正文

emlog pro 插入下载链接管理模块

作者：冲灵 发布时间：2025-09-08 21:35 分类： 教学教程 浏览：65 评论：0

导读：emlog pro 插入下载链接管理模块 一、模块概述 本模块是本站长使用 EMLOG 博客系统文章编辑页面中独立的「插入下载链接」功能组件，支持多网盘链接解析、自动填充、Mar...

emlog pro 插入下载链接管理模块

PixPin_2025-09-12_23-34-45.jpg

一、模块概述

本模块是本站长使用 EMLOG 博客系统文章编辑页面中独立的「插入下载链接」功能组件，支持多网盘链接解析、自动填充、Markdown 格式插入等核心能力，旨在简化文章编辑时的下载链接管理流程。

二、核心功能清单

功能分类 具体能力 实现方式
交互体验 模态框拖拽 基于原生 JS 监听鼠标事件，限制拖拽范围在视窗内
  自动读取剪贴板 调用navigator.clipboard.readText()API，兼容主流浏览器
链接解析 多网盘识别 内置 8 种网盘正则规则（百度 / 蓝奏云 / 迅雷等），支持链接 + 提取码自动拆分
  手动粘贴解析 提供文本域支持批量粘贴多链接，自动去重并填充到对应输入框
输入管理 输入框自动去空格 实时监听输入，链接 / 提取码自动去所有空格，备注自动合并空格
  一键清空内容 强制清空所有输入框及提示状态，避免残留数据
链接插入 Markdown 格式生成 按「网盘名称 + 链接 + 提取码 + 备注」格式生成标准 Markdown
  编辑器兼容 同时支持Editor对象（editormd 编辑器）和原生 textarea 输入框

前台显示效果如下：

PixPin_2025-09-08_21-37-29.jpg

老版本后台文章发布页显示效果：

PixPin_2025-09-08_21-38-37.jpg

新版本版本后台文章发布页显示效果：【需要新版本代码可留言】

PixPin_2025-09-12_23-19-38.jpg

前台显示源码：打开模板文件，找到类似这样的代码：

<div class="tx-text f-16 mb15" style="position: relative;">
    <?= make_clickable($log_content) ?>
    <?php doAction('log_related', $logData) ?>
</div>

替换为下面代码

<div class="tx-text f-16 mb15" style="position: relative;">
    <?php
    // 1. 原有逻辑：过滤网盘链接并渲染普通内容（保留不变）
    $filtered_content = preg_replace(
        '/\[(百度网盘|蓝奏云盘|天翼网盘|阿里云盘|夸克网盘|迅雷云盘|123网盘|其他下载)链接\]\((.*?)\)(?:\s*提取码：\s*([^\s<]+))?(?:\s*备注：\s*([^<\n]+))?/i',
        '',
        $log_content
    );
    echo make_clickable($filtered_content);
    doAction('log_related', $logData);

    // 2. 关键：调用独立的网盘链接渲染文件（路径需根据实际目录调整）
    // 传递必要参数：$log_content（提取链接）、$BLOG_URL（背景图路径）、$logid（标签函数用）
    $BLOG_URL = BLOG_URL; // 原页面的BLOG_URL常量转为变量，供独立文件使用
    include 'render_download_links.php'; // 若文件在子目录，需写全路径，如：include './view/render_download_links.php';
    ?>
</div>

新建render_download_links.php文件，放在同目录下。代码如下：

<?php
/**
 * 独立的网盘链接渲染文件
 * 接收参数：$log_content（文章内容，用于提取网盘链接）、$BLOG_URL（博客根URL，用于背景图）
 */
if (!defined('EMLOG_ROOT')) { // 防止直接访问该文件
    exit('error!');
}

// 1. 网盘链接提取与渲染核心逻辑
?>

<!-- 网盘下载链接区域 -->
<div class="download-links-container" style="
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
">
    <h3 style="
        margin-top: 0;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        font-size: 18px;
        color: #333;
    ">资源下载</h3>

    <div class="download-buttons" style="
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    ">
        <?php
        // 提取文章中的网盘链接（支持多平台+提取码+备注）
        preg_match_all(
            '/\[(百度网盘|蓝奏云盘|天翼网盘|阿里云盘|夸克网盘|迅雷云盘|123网盘|其他下载)链接\]\((.*?)\)(?:\s*提取码：\s*([^\s<]+))?(?:\s*备注：\s*([^<\n]+))?/i',
            $log_content,
            $matches,
            PREG_SET_ORDER
        );

        if (!empty($matches)) {
            foreach ($matches as $match) {
                $platform = $match[1];
                $url = $match[2];
                $code = isset($match[3]) ? trim($match[3]) : '';
                $note = isset($match[4]) ? trim($match[4]) : '';

                // 根据平台设置按钮样式（颜色+图标）
                $styleConfig = [
                    '百度网盘' => ['color' => '#3385ff', 'icon' => 'fa-cloud-download'],
                    '蓝奏云盘' => ['color' => '#1e88e5', 'icon' => 'fa-link'],
                    '天翼网盘' => ['color' => '#ff5722', 'icon' => 'fa-bolt'],
                    '阿里云盘' => ['color' => '#00bcd4', 'icon' => 'fa-hdd-o'],
                    '夸克网盘' => ['color' => '#FF6D00', 'icon' => 'fa-rocket'],
                    '迅雷云盘' => ['color' => '#FF5722', 'icon' => 'fa-bolt'],
                    '123网盘' => ['color' => '#4CAF50', 'icon' => 'fa-hdd-o'],
                    '其他下载' => ['color' => '#9c27b0', 'icon' => 'fa-download'],
                ];
                $btnColor = $styleConfig[$platform]['color'];
                $btnIcon = $styleConfig[$platform]['icon'];

                // 渲染下载按钮
                echo '<div class="download-button" style="
                    flex: 1;
                    min-width: 200px;
                    max-width: 100%;
                ">
                    <a href="'.htmlspecialchars($url).'" target="_blank" rel="nofollow" style="
                        display: block;
                        padding: 12px 20px;
                        background: '.$btnColor.';
                        color: white;
                        text-decoration: none;
                        border-radius: 6px;
                        text-align: center;
                        transition: all 0.3s;
                        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                    " onmouseover="this.style.transform=\'translateY(-2px)\'; this.style.boxShadow=\'0 4px 8px rgba(0,0,0,0.15)\'" 
                    onmouseout="this.style.transform=\'none\'; this.style.boxShadow=\'0 2px 5px rgba(0,0,0,0.1)\'">
                        <i class="fa '.$btnIcon.'" style="margin-right: 8px;"></i>
                        '.htmlspecialchars($platform).'
                    </a>';

                // 渲染备注（去除HTML标签，防止注入）
                if ($note) {
                    $cleanNote = strip_tags($note);
                    echo '<div class="download-note" style="
                        margin-top: 8px;
                        padding: 8px;
                        background: #fff;
                        border-radius: 4px;
                        text-align: center;
                        border: 1px dashed #ddd;
                        font-size: 14px;
                        color: #666;
                    ">
                        <i class="fa fa-info-circle" style="margin-right: 5px;"></i>
                        '.htmlspecialchars($cleanNote).'
                    </div>';
                }

                // 渲染提取码+复制按钮
                if ($code) {
                    echo '<div class="download-code" style="
                        margin-top: 8px;
                        padding: 8px;
                        background: #fff;
                        border-radius: 4px;
                        text-align: center;
                        border: 1px dashed #ddd;
                        font-size: 14px;
                    ">
                        <span style="color: #666;">提取码：</span>
                        <span style="
                            font-weight: bold;
                            color: '.$btnColor.';
                            letter-spacing: 2px;
                        ">'.htmlspecialchars($code).'</span>
                        <button onclick="copyToClipboard(\''.htmlspecialchars($code, ENT_QUOTES).'\')" style="
                            margin-left: 8px;
                            padding: 2px 6px;
                            background: transparent;
                            border: 1px solid '.$btnColor.';
                            border-radius: 3px;
                            color: '.$btnColor.';
                            font-size: 12px;
                            cursor: pointer;
                        ">复制</button>
                    </div>';
                }

                echo '</div>';
            }
        } else {
            echo '<p style="color: #666; text-align: center;">暂无下载资源</p>';
        }
        ?>
    </div>
</div>

<!-- 复制功能脚本（独立文件内自带，避免重复引入） -->
<script>
function copyToClipboard(text) {
    var input = document.createElement('input');
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy'); // 兼容大部分浏览器，若需更优方案可替换为Clipboard API
    document.body.removeChild(input);

    // 复制成功提示
    var msg = document.createElement('div');
    msg.textContent = '已复制：' + text;
    msg.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 10px 15px;
        background: #4CAF50;
        color: white;
        border-radius: 4px;
        z-index: 9999;
    `;
    document.body.appendChild(msg);

    // 2秒后移除提示
    setTimeout(() => document.body.removeChild(msg), 2000);
}
</script>

<!-- 标签容器背景图样式（若原页面需要，可保留在此；若仅页面用，可移回原文件） -->
<div class="tag-container" style="
    position: relative;
    padding: 25px 15px;
    margin: 20px 0;
    min-height: 120px;
    overflow: hidden;
">
    <div class="tag-bg-image" style="
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: url('<?php echo $BLOG_URL; ?>content/uploadfile/bg-decoration.png') right center/contain no-repeat;
        opacity: 0.5;
        z-index: 0;
        transition: opacity 0.3s ease;
    "></div>
    <div style="position: relative; z-index: 1; width: 50%;">
        <?php blog_tag($logid) ?> <!-- 标签函数若依赖原页面变量，需确保$logid已传递 -->
    </div>
</div>

<style>
    /* 标签容器悬停效果 */
    .tag-container:hover .tag-bg-image {
        opacity: 1 !important;
    }
</style>

后台源码：1.

​插入位置​：找到标题输入框的HTML代码，它通常是一个<input type="text">元素，类名为form-control，ID为title。

<div style="display: flex; align-items: center; gap: 8px;">
    <input type="text" name="title" id="title" value="<?= $title ?>" class="form-control" maxlength="512" placeholder="标题" autofocus required />
    <!-- 添加下载链接按钮 -->
    <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#downloadLinksModal">插入下载链接</button>
</div>

<!-- 下载链接模态框 -->
<div class="modal fade" id="downloadLinksModal" tabindex="-1" role="dialog" aria-labelledby="downloadLinksModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="downloadLinksModalLabel">插入下载链接</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="downloadLinksForm">
                    <!-- 百度网盘 -->
                    <div class="form-group">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa fa-cloud mr-2" style="color: #3385ff; font-size: 1.2rem;"></i>
                            <h6 class="mb-0" style="color: #3385ff;">百度网盘</h6>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control mb-2" id="baidu_link" placeholder="链接">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control mb-2" id="baidu_code" placeholder="提取码">
                            </div>
                            <div class="col-md-5">
                                <input type="text" class="form-control mb-2" id="baidu_note" placeholder="备注(选填)">
                            </div>
                        </div>
                    </div>

                    <!-- 蓝奏云盘 -->
                    <div class="form-group">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa fa-link mr-2" style="color: #1e88e5; font-size: 1.2rem;"></i>
                            <h6 class="mb-0" style="color: #1e88e5;">蓝奏云盘</h6>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control mb-2" id="lanzou_link" placeholder="链接">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control mb-2" id="lanzou_code" placeholder="密码">
                            </div>
                            <div class="col-md-5">
                                <input type="text" class="form-control mb-2" id="lanzou_note" placeholder="备注(选填)">
                            </div>
                        </div>
                    </div>

                    <!-- 天翼网盘 -->
                    <div class="form-group">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa fa-bolt mr-2" style="color: #ff5722; font-size: 1.2rem;"></i>
                            <h6 class="mb-0" style="color: #ff5722;">天翼网盘</h6>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control mb-2" id="tianyi_link" placeholder="链接">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control mb-2" id="tianyi_code" placeholder="提取码">
                            </div>
                            <div class="col-md-5">
                                <input type="text" class="form-control mb-2" id="tianyi_note" placeholder="备注(选填)">
                            </div>
                        </div>
                    </div>

                    <!-- 阿里云盘 -->
                    <div class="form-group">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa fa-hdd-o mr-2" style="color: #00bcd4; font-size: 1.2rem;"></i>
                            <h6 class="mb-0" style="color: #00bcd4;">阿里云盘</h6>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control mb-2" id="aliyun_link" placeholder="链接">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control mb-2" id="aliyun_code" placeholder="提取码">
                            </div>
                            <div class="col-md-5">
                                <input type="text" class="form-control mb-2" id="aliyun_note" placeholder="备注(选填)">
                            </div>
                        </div>
                    </div>

                    <!-- 夸克网盘 -->
                    <div class="form-group">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa fa-rocket mr-2" style="color: #FF6D00; font-size: 1.2rem;"></i>
                            <h6 class="mb-0" style="color: #FF6D00;">夸克网盘</h6>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control mb-2" id="quark_link" placeholder="链接">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control mb-2" id="quark_code" placeholder="提取码">
                            </div>
                            <div class="col-md-5">
                                <input type="text" class="form-control mb-2" id="quark_note" placeholder="备注(选填)">
                            </div>
                        </div>
                    </div>

                    <!-- 迅雷云盘 -->
                    <div class="form-group">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa fa-bolt mr-2" style="color: #FF5722; font-size: 1.2rem;"></i>
                            <h6 class="mb-0" style="color: #FF5722;">迅雷云盘</h6>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control mb-2" id="xunlei_link" placeholder="链接">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control mb-2" id="xunlei_code" placeholder="提取码">
                            </div>
                            <div class="col-md-5">
                                <input type="text" class="form-control mb-2" id="xunlei_note" placeholder="备注(选填)">
                            </div>
                        </div>
                    </div>

                    <!-- 其他下载 -->
                    <div class="form-group">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa fa-download mr-2" style="color: #9c27b0; font-size: 1.2rem;"></i>
                            <h6 class="mb-0" style="color: #9c27b0;">其他下载</h6>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control mb-2" id="other_link" placeholder="链接">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control mb-2" id="other_code" placeholder="密码">
                            </div>
                            <div class="col-md-5">
                                <input type="text" class="form-control mb-2" id="other_note" placeholder="备注(选填)">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="insertAllDownloadLinks()">插入所有已填写的链接</button>
            </div>
        </div>
    </div>
</div>

<script>
// 插入单个下载链接到编辑器
function insertDownloadLink(type) {
    let link, code, note, prefix;

    switch(type) {
        case 'baidu':
            link = $('#baidu_link').val();
            code = $('#baidu_code').val();
            note = $('#baidu_note').val();
            prefix = '百度网盘';
            break;
        case 'lanzou':
            link = $('#lanzou_link').val();
            code = $('#lanzou_code').val();
            note = $('#lanzou_note').val();
            prefix = '蓝奏云盘';
            break;
        case 'tianyi':
            link = $('#tianyi_link').val();
            code = $('#tianyi_code').val();
            note = $('#tianyi_note').val();
            prefix = '天翼网盘';
            break;
        case 'aliyun':
            link = $('#aliyun_link').val();
            code = $('#aliyun_code').val();
            note = $('#aliyun_note').val();
            prefix = '阿里云盘';
            break;
        case 'quark':
            link = $('#quark_link').val();
            code = $('#quark_code').val();
            note = $('#quark_note').val();
            prefix = '夸克网盘';
            break;
        case 'xunlei':
            link = $('#xunlei_link').val();
            code = $('#xunlei_code').val();
            note = $('#xunlei_note').val();
            prefix = '迅雷云盘';
            break;
        case 'other':
            link = $('#other_link').val();
            code = $('#other_code').val();
            note = $('#other_note').val();
            prefix = '其他下载';
            break;
    }

    if (!link) {
        alert('请输入链接地址');
        return;
    }

    return formatDownloadLink(prefix, link, code, note);
}

// 格式化下载链接
function formatDownloadLink(prefix, link, code, note) {
    let markdownText = `[${prefix}链接](${link})`;

    if (code) {
        markdownText += ` 提取码: ${code}`;
    }
    if (note) {
        markdownText += ` 备注: ${note}`;
    }

    return markdownText;
}

// 插入所有已填写的下载链接
function insertAllDownloadLinks() {
    let allLinks = [];
    const platforms = ['baidu', 'lanzou', 'tianyi', 'aliyun', 'quark', 'xunlei', 'other'];

    // 收集所有已填写的链接
    platforms.forEach(platform => {
        const link = $(`#${platform}_link`).val();
        if (link) {
            const code = $(`#${platform}_code`).val();
            const note = $(`#${platform}_note`).val();
            let prefix;

            switch(platform) {
                case 'baidu': prefix = '百度网盘'; break;
                case 'lanzou': prefix = '蓝奏云盘'; break;
                case 'tianyi': prefix = '天翼网盘'; break;
                case 'aliyun': prefix = '阿里云盘'; break;
                case 'quark': prefix = '夸克网盘'; break;
                case 'xunlei': prefix = '迅雷云盘'; break;
                case 'other': prefix = '其他下载'; break;
            }

            allLinks.push(formatDownloadLink(prefix, link, code, note));
        }
    });

    if (allLinks.length === 0) {
        alert('请至少填写一个网盘的链接');
        return;
    }

    // 插入到编辑器
    const markdownText = allLinks.join('\n\n');
    if (typeof Editor !== 'undefined' && Editor.insertValue) {
        Editor.insertValue(markdownText);
    } else {
        // 备用方法，直接插入到textarea
        let textarea = $("textarea[name=logcontent]");
        let currentVal = textarea.val();
        textarea.val(currentVal + '\n\n' + markdownText + '\n');
    }

    // 关闭模态框
    $('#downloadLinksModal').modal('hide');

    // 清空表单
    $('#downloadLinksForm')[0].reset();
}
</script>

以上代码也可以存为另一文件，命名为download-link-insert.php，引入代码：

<?php include 'download-link-insert.php'; ?>
×

如果觉得文章对您有用，请随意打赏。
您的支持是我们继续创作的动力！

微信打赏

微信扫一扫

支付宝打赏

支付宝扫一扫

手机扫码阅读

资源下载

暂无下载资源

标签：

相关文章

发表评论:

教学教程排行

个人资料

冲灵的头像
冲灵

跳动时间

搜索

最新文章

热门文章

最新评论

powered by emlog pro，Theme By 天兴工作室

© 2025 灵狐的窝. All rights reserved.