Ghost 博客中如何使用 Code Injection?图文教程

代码注入(Code Injection)是在 Ghost 站点中添加分析、样式、字体、元标签和脚本的理想工具。通过 Code Injection 页面,可以注入到站点头部和页脚,实现对每个页面的定制。最常见的用例是通过添加 CSS 样式自定义主题外观,或者通过注入 JavaScript 实现特效。

主页 > 博客 > Ghost 博客中如何使用 Code Injection?图文教程

代码注入(Code Injection)提供了一个界面,可以轻松地向 Ghost 站点添加分析、样式、自定义字体、元标签和脚本。它也是在主题中进行微小编辑或使用 JavaScript 添加一些酷炫效果的理想工具。在本教程中,了解如何以及使用 Code Injection 在 Ghost 中的所有必要信息。

什么是 Code Injection?

顾名思义,Code Injection 将代码注入到 Ghost 站点中。从【Settings → Code Injection】访问 Code Injection(每个版本的 Ghost 页面不一样)。

Ghost 博客使用 Code Injection

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 主题。

Ghost 博客使用 Code Injection

一切看起来相当不错,但让我们通过使用 Google Fonts 的自定义字体添加一些乐趣。找到你想使用的字体 - 对于我们的动物站点,我们将使用一个名为"Luckiest Guy"的字体。单击选择此样式以选择样式和权重。然后,单击右上角的图标查看所选字体系列。

Ghost 博客使用 Code Injection

所选字体系列侧边栏中,找到在 Web 上使用框。

Ghost 博客使用 Code Injection

复制<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 已准备好保存。

Ghost 博客使用 Code Injection

我们的动物站点也准备好了 - 但现在有了一个时髦的新字体

Ghost 博客使用 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>

一切都准备好了! 站点页脚 已准备好保存。

Ghost 博客使用 Code Injection

总结

代码注入(Code Injection)是在 Ghost 站点中添加分析、样式、字体、元标签和脚本的理想工具。通过 Code Injection 页面,可以注入到站点头部和页脚,实现对每个页面的定制。最常见的用例是通过添加 CSS 样式自定义主题外观,或者通过注入 JavaScript 实现特效。例如,可以通过注入 Google Fonts 和 CSS 规则来改变站点字体,或者通过加载 TypewriterJS 脚本在站点页脚添加打字机效果。 Code Injection 提供了简单而强大的方式来定制 Ghost 站点。

Ghost 博客中如何使用 Code Injection?图文教程
代码注入(Code Injection)是在 Ghost 站点中添加分析、样式、字体、元标签和脚本的理想工具。通过 Code Injection 页面,可以注入到站点头部和页脚,实现对每个页面的定制。最常见的用例是通过添加 CSS 样式自定义主题外观,或者通过注入 JavaScript 实现特效。

知识扩展: