依昕辰的技术博客

任意修改自己的网站样式模板—— Ghost Code injection

Mar 20, 2026

如果我们对 Ghost 的一些样式不满意，比如说想隐藏掉评论区；侧边栏的发布到推特Facebook 等元素，又不想修改主题文件防止未来升级主题导致文件被覆盖，我们可以使用 Ghost 自带的代码注入功能（位于Settings）。它可以注入 CSS 和 JS，任意修改页面样式。你可以为你的网站开启复杂 Markdown 元素比如公式和代码高亮的渲染；也可以引用一个动态看板娘的链接；或者覆盖掉现有主题的背景，换上酷炫的动画。

在浏览器中使用 F12审查元素，选中你想修改或删除的元素，复制代码，把代码粘贴给擅长写代码的AI， 告诉他“生成Ghost CMS 的 code injection的header 或 footer"，来达成你想要的效果。

就以我所使用的liebling (v2.1.7)主题为例，默认状况下，即使没有头图的文章封面也会占据一大片空白，非常不美观。在头部使用 CSS 注入 即可解决样式问题：

<style>

/* --- 5. 彻底隐藏页脚 --- */
.gh-foot, 
.site-footer, 
footer, 
.gh-copyright, 
.gh-powered-by { 
    display: none !important; 
}
  
/* 仅隐藏特定主题 Liebling 侧边栏的 Facebook 和 Twitter 分享按钮，保留回到顶部进度圈 */
.m-share__content a[href*="facebook.com"]
,
.m-share__content a[href*="twitter.com"]
{
  display: none !important;
}

/* 彻底隐藏包含 Ghost 评论区的父级容器及节点 */
.m-comments, 
#ghost-comments-root {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 彻底隐藏作者个人链接（地球图标） */
.m-author-links {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 进阶：如果个人链接（地球图标）在移动端有占位高度，强制归零 */
.m-author-links li {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}


/*######################################修复无图封面样式##########################################*/


/* 无图卡片：固定高度 */
.m-article-card.no-picture,
.m-article-card.no-image {
  height: 256px !important;
  min-height: 256px !important;
}

/* 去掉图片区 */
.m-article-card.no-picture .m-article-card__picture,
.m-article-card.no-image .m-article-card__picture {
  display: none !important;
}

/* info 成为主纵向容器 */
.m-article-card.no-picture .m-article-card__info,
.m-article-card.no-image .m-article-card__info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
}

/* tag 固定在最上面 */
.m-article-card.no-picture .m-article-card__tag,
.m-article-card.no-image .m-article-card__tag {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}

/* 没 tag 的卡片也正常 */
.m-article-card.no-picture .m-article-card__info.no-tag,
.m-article-card.no-image .m-article-card__info.no-tag {
  padding-top: 20px !important;
}

/* info-link 吃掉剩余空间 */
.m-article-card.no-picture .m-article-card__info-link,
.m-article-card.no-image .m-article-card__info-link {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 标题容器占据中间可伸缩区域 */
.m-article-card.no-picture .m-article-card__info-link > div:first-child,
.m-article-card.no-image .m-article-card__info-link > div:first-child {
  flex: 1 1 auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

/* 标题 */
.m-article-card.no-picture .m-article-card__title,
.m-article-card.no-image .m-article-card__title,
.m-article-card.no-picture .js-article-card-title-no-image,
.m-article-card.no-image .js-article-card-title-no-image {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* 时间强制压到底部 */
.m-article-card.no-picture .m-article-card__timestamp,
.m-article-card.no-image .m-article-card__timestamp {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 14px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 防止主题干扰 span */
.m-article-card.no-picture .m-article-card__timestamp span,
.m-article-card.no-image .m-article-card__timestamp span {
  display: inline-block !important;
}

/*######################################修复无图封面样式##########################################*/
</style>

Mournight