跳转至主要内容

Ghost 高阶

通过禁用 Ghost cards assets 降低主题文件大小 提升网站加载速度

说明

Ghost 编辑器中提供的每个内容卡都需要 CSS 和 Javascript 才能正确显示和运行。

这些默认的 CSS 和 Javascript 资源由 Ghost 自动提供,并通过 {{ghost_head}} 在页面中输出为 cards.min.csscards.min.js

你可以通过配置主题的 package.json 以排除特定卡片的资源来覆盖单个卡片的默认样式和行为。这种操作适用于你对 Ghost 网站加载速度有极致追求的时候,就像将 Ghost CDN 文件存放在服务器本地提升加载速度 一样。

操作方法

如果你在电脑本地配置了 Ghost 安装环境可以直接修改并同步到后台主题中,如果没有配置也可以将主题下载下来解压之后修改,改完保存再打包成压缩包上传到后台使用。

为 Ghost 博客创建 GitHub Action 实现修改主题推送自动更新
Ghost 支持创建 GitHub Action,实现在本地修改主题之后推送到云端自动更新 Ghost 后台的在线主题,相当于将本地和在线关联起来。 这个方式比较适合跟 Ghost Local 配合使用。本地安装比较简单,可以直接参照官方文档操作: How To Install Ghost Locally - Ghost Developer DocsFast-track local install for getting Ghost running on your computer or setup for doing theme developmentGhost Developer Docs 如果你对 Git 和 GitHub 比较熟悉,参考本文操作应该非常简单。 如果你对代码不太熟悉,也可以在本地修改主题之后打包手动上传到博客后台。 Ghost 后台

在主题的 package.json 文件中可以看到默认配置是:

"card_assets": true,

可以通过添加 exclude 排除你不需要用到的 assets,例如:

"card_assets": {
      "exclude": [
        "audio",
        "video",
        "gallery",
        "header",
        "nft",
        "product",
        "signup"
      ]
    },

具体每一项代表什么可以查询官方文档。

如果想全部禁用,可以直接将 true 改成 false

"card_assets": false

官方文档

Content - Ghost Developer Docs
The open-source Ghost editor is robust and extensible.