Blogdown（Academic主题）嵌入带图推文样式异常的解决咨询

我明白你在Academic主题里用tweet短代码嵌入推文时，没看到Twitter原生样式的困扰——这确实是Academic主题默认设置的小坑，下面给你两种靠谱的解决办法：

方法一：修复内置tweet短代码的样式问题 #

Academic主题默认可能没有加载Twitter的嵌入脚本，导致短代码只显示简陋的文本内容，而非原生样式。你可以手动添加官方脚本解决：

1. 找到站点根目录下的layouts/partials/footer_custom.html文件，没有的话就新建一个
2. 在文件里添加这段代码：

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

3. 重新运行blogdown::serve_site()生成站点，再看嵌入的推文，应该就能显示Twitter原生的排版和交互样式了。

用官方CDN是最省心的选择，能自动兼容Twitter最新的嵌入规范，不用操心版本更新的问题。

方法二：直接按Twitter开发者规范嵌入HTML代码 #

如果短代码的方式还是达不到预期，直接用Twitter官方生成的嵌入HTML是更稳妥的方案：

1. 打开目标推文页面，点击右上角的「分享」按钮，选择「嵌入推文」选项
2. 复制Twitter生成的完整HTML代码（示例如下）：

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Just setting up my twttr.</p>&mdash; jack (@jack) <a href="https://twitter.com/jack/status/20?ref_src=twsrc%5Etfw">March 21, 2006</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

3. 把这段代码直接粘贴到你的Blogdown Markdown文章里即可。

小提示：如果用这种方式，建议还是按方法一的步骤全局加载widgets.js，避免每嵌入一条推文就重复添加脚本，提升页面加载效率。

额外排查：主题样式冲突 #

要是上面两种方法都试过还是有样式异常，大概率是Academic主题的自定义CSS覆盖了Twitter的嵌入样式。你可以这么处理：

• 打开浏览器开发者工具，检查推文元素的样式属性，定位被覆盖的规则
• 在assets/css/custom.css里添加自定义CSS修复，比如：

.twitter-tweet {
  margin: 1em auto !important;
  max-width: 100% !important;
}

用!important暂时强制覆盖主题样式，或者找到主题内对应的CSS规则修改（不建议直接改动主题核心文件，优先用自定义CSS）。

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