能否修改Ghost CMS评论样式以适配自定义主题？

方法一：自定义评论iframe及内部样式 #

Ghost自带的评论系统支持直接注入自定义CSS来覆盖默认样式：

• 调整iframe本身的布局：进入Ghost后台「设置」→「代码注入」，在「站点页脚」里添加代码，消除iframe和站点布局的冲突：

iframe[src*="/ghost/comments/"] {
    border: 0;
    width: 100%;
    min-height: 450px;
    margin: 20px 0;
}

• 定制评论区内部样式：到「设置」→「评论」，找到「自定义CSS」输入框，这里的样式会直接作用于iframe内的评论组件，完全匹配你的站点风格。示例代码如下：

.gh-comments {
    font-family: "你的站点字体", sans-serif;
    color: #2d2d2d;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}
.gh-comments-form textarea {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
    font-size: 15px;
    width: 100%;
}
.gh-comments-submit {
    background-color: #你的主题主色值;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 15px;
    cursor: pointer;
}
.gh-comments-submit:hover {
    background-color: #你的主题hover色值;
}

方法二：替换为无iframe的评论系统 #

如果iframe的隔离限制让你没法做到完全匹配，直接换掉自带评论：

• 删掉主题模板（比如post.hbs）里调用Ghost评论的代码，自己写一套评论表单和列表组件，直接用站点的CSS类控制样式，完全和站点风格统一。
• 也可以采用纯前端的评论存储方案（比如结合静态存储），全程避免iframe的限制。

为什么Ghost用iframe加载评论？ #

核心原因是隔离评论系统和站点主题的代码，避免双方的CSS、JS互相冲突；同时Ghost能统一推送评论功能的更新，不用你修改主题代码就能用上新功能。

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