前言

在一个网站上发现了一个非常有趣的一句话冷笑话，在每次刷新页面时就会更换一条。像这样：

扒网页内容

编写了一个Python脚本来获取笑话的文字内容，并将其保存到文本文件中。以下是示例脚本：

脚本

import requests
import time
from bs4 import BeautifulSoup

# 设置刷新时间间隔（秒）
refresh_interval = 1

# 设置输出文件路径
output_file = 'out.txt'

# 用于存储已经输出的行
output_lines = set()

# 循环刷新页面并将内容追加到输出文件中
while True:
    try:
        # 发送GET请求获取网页内容
        response = requests.get('https://xiao3.org')
        response.encoding = 'utf-8'

        # 使用BeautifulSoup解析网页内容
        soup = BeautifulSoup(response.text, 'html.parser')

        # 提取网页的中文内容
        chinese_content = soup.get_text()

        # 删除指定内容及其后面的内容
        chinese_content = chinese_content.split('8.210.', 1)[0]

        # 删除特定文本
        chinese_content = chinese_content.replace('人无远虑, 必有蛋挞 | 我是小桑', '')

        # 去除空行和重复行
        chinese_lines = [line.strip() for line in chinese_content.splitlines() if line.strip()]
        chinese_lines = [line for line in chinese_lines if line not in output_lines]

        # 更新已输出的行集合
        output_lines.update(chinese_lines)

        # 写入中文内容到输出文件中（追加模式）
        with open(output_file, 'a', encoding='utf-8') as file:
            file.write('\n'.join(chinese_lines) + '\n')  # 添加换行符

        # 等待指定时间间隔
        time.sleep(refresh_interval)

    except KeyboardInterrupt:
        # 捕获键盘中断（Ctrl+C）以停止脚本执行
        break

结果处理

结果有<200b>特殊字符和空行，用sed替换

sed -i '/^$/d; s/\xe2\x80\x8b//g' out.txt
awk '!seen[$0]++' out.txt > out1.txt
rm -rf out.txt
mv out1.txt out.txt

将内容嵌入博客

将这些内容扒下来后，随机显示一条在自己网站里。
效果如下：

实现方法一（废弃）

网页

在现有的html结构里追加一个元素用于存放笑话内容
可在css里追加伪元素的方式实现

.home-widget.home-last-post .container:nth-child(1)::before  {
  content: "";
  display: block;
  margin-bottom: 2em;
  opacity:0.34;
  text-align:center;
}

通过js读取txt文件并随机展示

写一个js代码读取文本并显示出来：

<script>
  window.addEventListener('DOMContentLoaded', function() {
    fetch('file.txt')
      .then(response => response.text())
      .then(data => {
        var lines = data.split('\n');
        var randomIndex = Math.floor(Math.random() * lines.length);
        var randomContent = lines[randomIndex].trim();

        var styleElement = document.createElement('style');
        styleElement.textContent = '.home-widget.home-last-post .container:nth-child(1)::before { content: "' + randomContent + '"; }';

        document.head.appendChild(styleElement);
      })
      .catch(error => {
        console.error('发生错误:', error);
      });
  });
</script>

实现方法二（推荐）

方法一的方式，每次请求的时候会下载file.txt文件到本地，占用带宽不说，且下载链接会被用户获取导致辛苦获取的所以文件内容泄露。可以将笑话内容写入数据库，每次通过请求数据库来获取内容。

js代码

<script>
fetch('get-joke.php')
  .then(response => response.text())
  .then(data => {
    const jokeElement = document.createElement('span');
    jokeElement.textContent = data;

    const containerElement = document.querySelector('.home-widget.home-last-post .container:nth-child(1)');
    if (containerElement) {
      containerElement.insertBefore(jokeElement, containerElement.firstChild);
    } else {
      console.error('找不到目标容器元素');
    }
  })
  .catch(error => {
    console.error('发生错误:', error);
  });
</script>

php代码

在网站根目录新建一个get-joke.php文件

<?php
// 引入WordPress的配置文件
require_once('wp-config.php');

// 查询随机数据
$sql = "SELECT content FROM jokes ORDER BY RAND() LIMIT 1";
$result = $wpdb->get_results($sql);

if ($result) {
    $joke = $result[0]->content;

    // 发送响应
    header('Content-Type: text/plain');
    echo $joke;
} else {
    echo "未找到数据";
}
?>

这样就可以解决方法一中的不足了