Emlog实战：制作一个打字特效文章摘要插件

引言

在Emlog博客系统中，插件是扩展功能的重要手段。本文将介绍如何制作一个带有打字特效的文章摘要插件，该插件能够在后台指定字数的摘要，并在前台展示时带有打字效果。灵感来源于子比主题的AI摘要插件。捣鼓了一两天简单整理了以下的一些经验。

子比主题效果预览

插件实现步骤

1. 插件基础框架

首先，创建一个基本的插件框架。在Emlog的插件目录中，新建一个文件夹，例如typing_summary，并在其中创建主文件typing_summary.php。在typing_summary.php中，添加以下基础代码：

<?php
/* Plugin Name: 打字特效文章摘要
 * Version: 1.0
 * Description: 在后台编辑文章时自动生成指定字数的摘要，并在前台展示时带有打字效果。
 * Author: Your Name
 * Author URL: Your Website
 */

!defined('EMLOG_ROOT') && exit('access deined!');

function typing_summary_init() {
    // 插件初始化代码
}

addAction('init', 'typing_summary_init');

2. 后台文章摘要生成

为了实现后台编辑文章时自动生成摘要，我们需要添加一个自定义的按钮或功能。这里假设你已经熟悉Emlog的插件开发流程，知道如何添加后台页面和按钮。

在插件的后台处理文件中，添加以下代码来生成摘要：

function generate_summary($content, $length = 100) {
    $summary = mb_substr(strip_tags($content), 0, $length);
    // 确保摘要不会在中间截断一个单词
    if (mb_strlen($summary) < mb_strlen($content)) {
        $last_space_strrpos($summary, ' ');
        , 0, $last_space);
    }
    return $summary;
}

// 假设在文章保存时调用此函数
add_action('save_post', function ($post_id) {
    if (get_post_type($post_id) == 'post') {
        $content = get_post_field('post_content', $post_id);
        $summary = generate_summary($content);
        update_post_meta($post_id, 'typing_summary', $summary);
    }
});

3. 前台打字特效展示

为了在前台展示时带有打字效果，我们需要使用JavaScript和CSS。首先，在插件的目录中创建一个assets文件夹，并在其中创建typing_effect.js和typing_effect.css文件。

在typing_effect.js中，添加以下代码来实现打字效果：

document.addEventListener('DOMContentLoaded', function () {
    const summaryElement = document.querySelector('.typing-summary');
    if (summaryElement) {
        const summaryText = summaryElement.dataset.summary;
        let index = 0;

        function type() {
            if (index < summaryText.length) {
                summaryElement.textContent += summaryText[index];
                index++;
                setTimeout(type, 100); // 调整打字速度
            }
        }

        type();
    }
});

在typing_effect.css中，添加以下代码来美化摘要展示：

.typing-summary {
    font-family: 'Courier New', Courier, monospace; /* 可选：设置字体 */
    color: #333; /* 可选：设置字体颜色 */
    white-space: pre-wrap; /* 保留空白符 */
}

然后，在主题模板的适当位置（如文章详情页）引用这些文件，并输出摘要：

<?php
$summary = get_post_meta(get_the_ID(), 'typing_summary', true);
if ($summary) :
?>
<div class="typing-summary" data-summary="<?php echo esc_attr($summary); ?>"></div>
<link rel" href plugin_dir_url(__FILE__); ?>assets/typing_effect.css">
<script src="<?php echo plugin_dir_url(__FILE__); ?>assets/typing_effect.js"></script>
<?php endif; ?>