如何通过Gist Markdown嵌入Google-CSE并在Medium显示搜索栏？

首先得明确核心限制：Medium和Gist都有严格的内容安全策略（CSP），会阻止第三方脚本、跨域iframe以及未授权的嵌入代码运行，这就是你之前所有尝试失败的原因——Gist里的<script>、<iframe>等标签都会被过滤或禁用，直接在Medium里嵌Google CSE也不符合它的嵌入规则。

下面给你几个实际可行的方向：

方案1：托管独立页面后用Medium Embed嵌入 #

这是最接近你需求的方案，步骤如下：

• 第一步：创建一个简单的静态HTML页面，把Google CSE的完整嵌入代码放进去，比如：

  <!DOCTYPE html>
  <html>
  <head>
    <title>自定义搜索</title>
  </head>
  <body>
    <script>
      (function() {
        var cx = '你的CSE ID'; // 替换成你自己的CSE ID
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
      })();
    </script>
    <gcse:search></gcse:search>
  </body>
  </html>
  

• 第二步：把这个页面托管到支持静态页面的平台（比如GitHub Pages、Netlify等），确保页面能正常访问，且Google CSE搜索栏在页面里可以正常工作。
• 第三步：在Medium文章中，使用「Embed」工具，输入你托管页面的URL。Medium会自动尝试嵌入这个页面的iframe（只要你的托管平台在Medium的嵌入白名单内，大部分主流静态托管平台都符合要求），这样就能在Medium文章里显示完整的搜索栏了。

方案2：引导用户到独立搜索页面（退而求其次） #

如果Embed嵌入遇到问题（比如Medium对某些域名有限制），可以换个思路：

• 在Medium文章里添加醒目的引导内容，比如：*需要搜索相关内容？点击[这里打开自定义搜索页面]*，把链接指向你托管的Google CSE页面。
• 这种方式虽然不能在Medium内直接显示搜索栏，但能保证用户顺利使用搜索功能，实现成本也更低。

方案3：使用静态搜索表单（无脚本版本） #

如果不想依赖脚本，可以创建一个静态表单，提交到Google CSE的搜索结果页面，步骤如下：

• 编写静态HTML表单：

  <form action="https://cse.google.com/cse" method="get" target="_blank">
    <input type="hidden" name="cx" value="你的CSE ID">
    <input type="text" name="q" placeholder="输入关键词搜索..." style="padding: 8px; width: 250px;">
    <button type="submit" style="padding: 8px 16px;">搜索</button>
  </form>
  

• 同样把这个表单放到托管页面，再用Medium Embed嵌入，或者直接把表单截图+链接放到Medium文章里（不过截图不能交互，还是托管后嵌入更好）。

为什么之前的Gist方法行不通？ #

Gist的Markdown渲染器会过滤掉所有脚本标签，同时它的CSP策略会阻止跨域iframe加载外部内容，所以你在Gist里尝试的<iframe>、<script>、<object>等代码都不会生效，更别说嵌入到Medium后了——Medium嵌入Gist时只会渲染静态内容，不会执行任何动态代码。

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