Ghost 博客中如何使用 Code Injection？图文教程
代码注入（Code Injection）是在 Ghost 站点中添加分析、样式、字体、元标签和脚本的理想工具。通过 Code Injection 页面，可以注入到站点头部和页脚，实现对每个页面的定制。最常见的用例是通过添加 CSS 样式自定义主题外观，或者通过注入 JavaScript 实现特效。
代码注入（Code Injection）提供了一个界面，可以轻松地向 Ghost 站点添加分析、样式、自定义字体、元标签和脚本。它也是在主题中进行微小编辑或使用 JavaScript 添加一些酷炫效果的理想工具。在本教程中，了解如何以及使用 Code Injection 在 Ghost 中的所有必要信息。
什么是 Code Injection？
顾名思义，Code Injection 将代码注入到 Ghost 站点中。从【Settings → Code Injection】访问 Code Injection（每个版本的 Ghost 页面不一样）。
在 Code Injection 页面上，有两个区域：站点头部（Site Header）和站点页脚（Site Footer），Ghost 将输入到这些框中的任何文本注入到站点的每个页面上。
Code Injection 也可通过 Ghost 编辑器的侧边栏按文章进行。它的工作方式与上面解释的相同，但仅添加到该特定文章的页面。
站点头部代码被注入到<head>标签中，站点页脚代码在闭合的</body>标签之前注入，两者都在主题使用的其他样式和脚本之后添加。
<html>
<head>
<title>Page Title</title>
<!-- Code Injection Site Header added here -->
</head>
<body>
<!-- Your beautiful content -->
<!-- Code Injection Site Footer added here -->
</body>
</html>Code Injection 的一个最常见用例是向 Ghost 站点添加 CSS 以自定义主题的外观。
Code Injection 使用
添加 CSS 样式
假设我们有一个关于动物的站点，并使用 Casper 主题。
一切看起来相当不错，但让我们通过使用 Google Fonts 的自定义字体添加一些乐趣。找到你想使用的字体 - 对于我们的动物站点，我们将使用一个名为"Luckiest Guy"的字体。单击选择此样式以选择样式和权重。然后，单击右上角的图标查看所选字体系列。
在所选字体系列侧边栏中，找到在 Web 上使用框。
复制<link>标记并将其粘贴到站点头部。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">接下来，复制 CSS 规则。每当向站点头部添加 CSS 规则时，请将其包装在<style>标记中。我们只想让我们新的古怪字体影响我们的标题，所以我们只会将其应用于它们。而且，由于这种字体只有一个重量，我们也会指定它。
<style>
h1, h2, h3, h4, h5, h6 {
font-family: 'Luckiest Guy', sans-serif;
font-weight: 400;
}
</style>就这样！ Code Injection 已准备好保存。
我们的动物站点也准备好了 - 但现在有了一个时髦的新字体
添加 JS 脚本
Code Injection 的第二个最常见用例是向 Ghost 站点添加 JavaScript，添加 JS 时，请将其添加到站点页脚以确保其正确加载。例如，让我们向我们的动物站点添加一个打字机效果。为了帮助我们，我们将使用开源的 TypewriterJS 库。将主要脚本加载到站点页脚。
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>接下来，配置 TypewriterJS 脚本并在页面上启动它。每当通过 Code Injection 添加 JS 时，请将其包装在<script>标记中。
<script>
const app = document.querySelector('.site-title + p');
const typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.typeString('356 of the best <strong>monkeys</strong>')
.pauseFor(1000)
.deleteChars(7)
.typeString('<strong>parrots</strong>')
.pauseFor(750)
.deleteChars(7)
.typeString('<strong>sharks</strong>')
.pauseFor(500)
.deleteChars(6)
.typeString('<strong>snakes</strong>')
.pauseFor(500)
.deleteChars(7)
.typeString('<strong>animals</strong> on the web')
.pauseFor(1500)
.deleteAll(50)
.start();
</script>一切都准备好了！ 站点页脚 已准备好保存。
总结
代码注入（Code Injection）是在 Ghost 站点中添加分析、样式、字体、元标签和脚本的理想工具。通过 Code Injection 页面，可以注入到站点头部和页脚，实现对每个页面的定制。最常见的用例是通过添加 CSS 样式自定义主题外观，或者通过注入 JavaScript 实现特效。例如，可以通过注入 Google Fonts 和 CSS 规则来改变站点字体，或者通过加载 TypewriterJS 脚本在站点页脚添加打字机效果。 Code Injection 提供了简单而强大的方式来定制 Ghost 站点。
Summer知识扩展：