AISeo:一款Typecho主题Joe借助AI生成SEO关键词和SEO描述语的插件

一个网页的keywords及description对于网站的SEO是非常重要的，因此，我们在发布文章时，需要针对文章设置一个合理的keywords及description。但是如果每个文章，我们都手工设置keywords及description，势必会浪费我们极大的精力，在这个全名疯狂的AI时代，不利用AI生成一下keywords及description感觉自己不属于这个时代似的。

其实整个实现过程是非常简单的，在发布文章页面，增加一个按钮，按钮点击时，通过http的方式调用对应模型的接口，并要求模型返回对应的keywords及description，使用正则表达式对返回的内容进行拆分，获取keywords及description信息，赋值到对应的字段上。

本文实现是有条件的，当然你可以在本文的基础上自行修改，进行更多的适配。

李森的博客使用的是轻量高效的开源博客程序-Typecho，主题使用的是Joe，因此本文所有介绍的内容都是基于这两个前提的，当然，我们后续的代码会进行说明，方便你在其他地方使用或者使用了Typecho但是不是使用的Joe主题时，也能顺畅的使用。

本着免费的原则，本文使用的AI工具是GPT-API-free。

GPT-API-free是一个提供免费ChatGPT API密钥的开源项目，支持多种模型并允许开发者低成本接入GPT服务。

特点

• 支持Models, Embedding, text-davinci(免费版不支持), GPT-3.5-Turbo, GPT-3.5-Turbo-16K(免费版不支持), GPT-4, DALLE(免费版不支持), Whisper(免费版不支持)。（免费版就可以支持AutoGPT, gpt_academic, langchain等）
• 免费版支持gpt-4，一天3次；支持gpt-4o-mini，和gpt-3.5-turbo共享一天200次。
• 与官方完全一致的接口标准，兼容各种软件/插件。
• 支持流式响应。
• 国内线路使用动态加速，体验远优于使用代理连接官方。
• 无需科学上网，国内环境直接可用。
• 个人完全免费使用。

免费使用

1. 申请领取内测免费API Key，申请地址 https://api.chatanywhere.org/v1/oauth/free/render
2. Host: https://api.chatanywhere.tech (国内中转，延时更低)

下载插件

我已经将需要使用的插件封装好，可以直接下载使用

下载插件后解压，得到AISeo文件夹，将文件夹整体上传到网站的/usr/plugins文件夹内

启用并配置插件

进入网站后台，找到并启用AISeo插件

点击设置按钮，进入设置页面

模型名：gpt-3.5-turbo

API KEY：通过申请领取内测免费API Key介绍的网址免费申请。注意：申请API Key需要Github授权。

输入地址：https://api.chatanywhere.tech

其他保持默认即可，然后保存插件设置。

配置文章编辑页面

到admin目录下，找到write-post.php文件。

在标题下方插入一个按钮

<button type="button" class="generate-seo" onclick="generateSeoKeywords()">生成SEO关键词和描述</button>

然后在最后一个div标签后面，添加以下代码

<script>
function generateSeoKeywords() {
    // 获取标题和内容
    const title = document.querySelector('input[name="title"]').value;
    const text = document.querySelector('textarea[name="text"]').value;

    // 获取插件设置
    const apiUrl = "<?php echo rtrim(Typecho_Widget::widget('Widget_Options')->plugin('AISeo')->apiUrl, '/') . '/v1/chat/completions'; ?>";
    const keyValue = "<?php echo Typecho_Widget::widget('Widget_Options')->plugin('AISeo')->keyValue; ?>";
    const modelName = "<?php echo Typecho_Widget::widget('Widget_Options')->plugin('AISeo')->modelName; ?>";
    const maxLength = "<?php echo Typecho_Widget::widget('Widget_Options')->plugin('AISeo')->maxLength; ?>";
    
    // 获取UUID
    const uuid = "<?php echo AISeo_Plugin::getUuid(); ?>"; // 从插件中获取UUID

    // 发起 AJAX 请求
    fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + keyValue,
            'X-Request-ID': uuid // 添加UUID到请求头
        },
        body: JSON.stringify({
            model: modelName,
            messages: [{
                role: "system",
                content: "请你扮演一个文本SEO关键词和SEO描述生成器，下面是一篇关于 '" + title + "' 的文章，请你根据文章标题生成 " + maxLength + " 字左右的SEO关键词和SEO描述，格式使用SEO关键词：SEO描述：，关键词使用英文逗号分隔，除了你生成的内容，请不要输出其他任何无关内容"
            },
            {
                role: "user",
                content: text
            }],
            temperature: 0
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.choices && data.choices.length > 0) {
            const content = data.choices[0].message.content;

            // 使用特定的分隔符进行分割
            const keywordsMatch = content.match(/SEO关键词：(.*?)SEO描述：(.*)/s);

            if (keywordsMatch && keywordsMatch.length === 3) {
                const keywords = keywordsMatch[1].replace(/\s+/g, ''); // 关键词
                const description = keywordsMatch[2].trim(); // 描述
                const keywordField = document.querySelector('input[name="fields[keywords]"]');
                const descriptionField = document.querySelector('textarea[name="fields[description]"]');

                // 始终覆盖自定义字段
                keywordField.value = keywords;
                descriptionField.value = description;

                // 使用 cocoMessage 显示成功提示
                console.success('SEO关键词和描述生成成功！');
            } else {
                // 使用 cocoMessage 显示失败提示
                console.error('生成失败，请重试。');
            }
        } else {
            // 使用 cocoMessage 显示失败提示
            console.error('生成失败，请重试。');
        }
    })
    .catch(error => {
        // 捕获并处理错误
        console.error('请求失败：' + error.message);
    });
}
</script>

配置按钮样式

找到admin/css/style.css，在任意位置，增加以下样式

.generate-seo {
    padding: 8px 10px; /* 缩小内边距，减少按钮高度 */
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 字体颜色为白色 */
    border: none; /* 去除边框 */
    border-radius: 4px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停时显示为指针 */
    font-size: 14px; /* 字体大小 */
    transition: background-color 0.5s ease; /* 背景颜色渐变效果 */
    margin-top: 0px; /* 仅调整此按钮的顶部外边距 */
}

.generate-seo:hover {
    background-color: #45a049; /* 悬停时更深的绿色 */
}