任意修改自己的网站样式模板—— Ghost Code injection
如果我们对 Ghost 的一些样式不满意，比如说想隐藏掉评论区；侧边栏的发布到推特Facebook 等元素，又不想修改主题文件防止未来升级主题导致文件被覆盖，我们可以使用 Ghost 自带的代码注入功能（位于Settings）。它可以注入 CSS 和 JS，任意修改页面样式。你可以为你的网站开启复杂 Markdown 元素比如公式和代码高亮的渲染；也可以引用一个动态看板娘的链接；或者覆盖掉现有主题的背景，换上酷炫的动画。
在浏览器中使用 F12审查元素，选中你想修改或删除的元素，复制代码，把代码粘贴给擅长写代码的AI， 告诉他“生成Ghost CMS 的 code injection的header 或 footer"，来达成你想要的效果。
就以我所使用的liebling (v2.1.7)主题为例，默认状况下，即使没有头图的文章封面也会占据一大片空白，非常不美观。在头部使用 CSS 注入 即可解决样式问题：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css" />
<style>
/* --- 1. 颜色变量：自适应主题 data-theme 属性 --- */
:root {
--c-bg: #f6f8fa; /* 亮色背景 */
--c-text: #24292e; /* 亮色文字 */
--c-border: #e1e4e8; /* 亮色边框 */
--btn-bg: #d1d5da;
--btn-text: #24292e;
--tok-keyword: #d73a49;
--tok-func: #6f42c1;
--tok-str: #032f62;
--tok-comment: #6a737d;
}
/* 当主题切换为深色时 (监听 data-theme 属性) */
html[data-theme="dark"] {
--c-bg: #1e1e1e; /* 暗色背景 */
--c-text: #c9d1d9; /* 暗色文字 */
--c-border: #30363d; /* 暗色边框 */
--btn-bg: #4b5263;
--btn-text: #ffffff;
--tok-keyword: #ff7b72;
--tok-func: #d2a8ff;
--tok-str: #a5d6ff;
--tok-comment: #8b949e;
}
/* --- 2. 代码框主体样式 --- */
div.code-toolbar > pre,
.gh-content pre {
background-color: var(--c-bg) !important;
color: var(--c-text) !important;
border: 1px solid var(--c-border) !important;
border-radius: 6px !important;
padding: 1.5em !important;
margin: 1.5em 0 !important;
font-family: 'Fira Code', Consolas, monospace !important;
line-height: 1.6 !important;
transition: background-color 0.2s ease, color 0.2s ease;
}
div.code-toolbar > pre code {
background: transparent !important;
color: inherit !important;
}
/* --- 3. 语法高亮映射 --- */
.token.comment { color: var(--tok-comment) !important; font-style: italic; }
.token.keyword, .token.operator { color: var(--tok-keyword) !important; }
.token.function { color: var(--tok-func) !important; }
.token.string { color: var(--tok-str) !important; }
.token.punctuation { color: var(--c-text) !important; opacity: 0.7; }
/* --- 4. 复制按钮：强制常驻右上角 --- */
div.code-toolbar {
position: relative !important; /* 确保定位基准 */
}
div.code-toolbar > .toolbar {
position: absolute !important;
top: 10px !important; /* 距离顶部 */
right: 10px !important; /* 距离右侧 */
opacity: 1 !important; /* 强制常驻显示 */
visibility: visible !important;
z-index: 10;
}
div.code-toolbar > .toolbar button {
background: var(--btn-bg) !important;
color: var(--btn-text) !important;
border: none !important;
border-radius: 4px !important;
padding: 4px 10px !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}
/* --- 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>