默认阻止特定区块加载，仅点击指定div时加载的实现方案

要满足初始页面渲染时不输出.blog-content区块的HTML内容（避免搜索引擎抓取到非预期内容，适配SEO/索引需求），同时点击.product-blog-block-item.col后加载完整内容，可通过「后端接口+前端异步请求」的方式实现，具体步骤如下：

1. 后端编写内容获取接口 #

首先需要创建一个PHP接口，用于根据文章ID返回对应的完整内容。示例代码如下（假设你已有文章查询的基础逻辑）：

<?php
// 初始化项目环境（如加载框架、数据库连接等，根据你的项目实际情况补充）

// 获取请求中的文章ID
$postId = $_GET['post_id'] ?? null;

if (empty($postId)) {
    http_response_code(400);
    echo json_encode(['error' => '缺少必要的文章ID参数']);
    exit;
}

// 根据ID获取文章对象，替换为你项目中实际的文章查询方法
$post = get_post_instance($postId);
if (!$post) {
    http_response_code(404);
    echo json_encode(['error' => '未找到对应文章']);
    exit;
}

// 输出文章的完整HTML内容
echo $post->getFullContent();
?>

将上述代码保存为get-post-content.php（可根据你的路由规则调整文件名或路径）。

2. 修改前端HTML结构 #

把原本直接输出内容的.blog-content改为空容器，同时给触发点击的元素添加data-post-id属性，用于传递文章ID：

<div class="product-blog-block-item col" data-post-id="你的文章ID">
    <span>Show blog</span>
</div>

<div class="blog-content"></div> <!-- 初始为空，不渲染任何内容 -->

3. 前端实现点击加载逻辑 #

通过JavaScript给触发元素绑定点击事件，发起异步请求获取内容并插入容器，同时处理重复请求、加载状态等细节：

const triggerBtn = document.querySelector('.product-blog-block-item.col');
const contentBox = document.querySelector('.blog-content');
let contentLoaded = false; // 标记内容是否已加载，避免重复请求

triggerBtn.addEventListener('click', async () => {
    if (contentLoaded) return;

    const postId = triggerBtn.dataset.postId;
    if (!postId) return;

    // 显示加载状态（可选，提升用户体验）
    triggerBtn.innerHTML = '<span>Loading...</span>';

    try {
        const res = await fetch(`get-post-content.php?post_id=${postId}`);
        if (!res.ok) throw new Error(`HTTP错误：${res.status}`);

        const contentHtml = await res.text();
        contentBox.innerHTML = contentHtml;
        contentLoaded = true;
        // 恢复按钮文本
        triggerBtn.innerHTML = '<span>Show blog</span>';
    } catch (err) {
        console.error('加载文章内容失败:', err);
        triggerBtn.innerHTML = '<span>加载失败，点击重试</span>';
        contentLoaded = false; // 允许用户重试
    }
});

额外说明 #

• SEO适配：这种实现方式下，初始页面不会包含.blog-content的内容，搜索引擎爬虫不会抓取到这部分内容，完全符合你的需求。如果后续需要让搜索引擎可索引这部分内容，可以给接口页面添加robots.txt规则或结构化数据标记。
• 兼容性处理：如果需要兼容不支持async/await的旧浏览器，可将代码替换为fetch的Promise链式调用，或者使用XMLHttpRequest。
• 样式优化：可以给.blog-content添加占位样式（如灰色背景、加载动画），进一步提升用户体验。

内容的提问来源于stack exchange，提问作者JGeer