Prepare

Today, Ghost does not have any offical mechanism to enable the developers to develop their own custom card. We made a customized distribution to enable this missing feature.

Please install the customized Ghost distribution as described below.

Extension cards for Ghost
The universal extension cards allows us to embed the various content into the post storage

Download

We prepared a starter project in order to ease the life of custom card development.

Just download it and extract the zip file into a new folder.

Build

Preview in vuepress

This starter project use vuepress as the project documentation and test preview environment.

npm install
npm run serve

Build for release

If everything is OK, you can make the release package with command:

npm run build

Serve for local testing

After you generate the release package, you can test it against the local Ghost development environment.

To serve the release js file, you can use PHP or any other webserver:

php -S localhost:8686

Installation

Install a local blog for test

You can install a local blog instance for testing

mkdir ghost-extension-card
cd ghost-extension-card
npm install [email protected] -g
ghost install local

For more information about how to install Ghost, please refer to https://ghost.org/docs/setup/

Register your extension card

Modify the config.development.json as the following:

{
    "enableDeveloperExperiments": true,
    "extCards": [
        {
            "label": "Hello",
            "iconUrl": "http://localhost:8686/hello.svg",
            "matches": ["hello", "test"],
            "type": "card",
            "replaceArg": "extension",
            "payload": {
                "editorComponentName": "ghost-card-starter-editor",
                "editorSrc": "http://localhost:8686/ghost-card-starter.js",
                "editorStyle": "width: 100%; height: 1.25rem;",
                "viewerComponentName": "ghost-card-starter-viewer",
                "viewerSrc": "http://localhost:8686/ghost-card-starter.js",
                "options": {}
            }
        }
    ]
}

Restart Ghost and have fun

Restart your ghost and open the admin-client, you can add the hello card in your post.

ghost restart

Please follow the README file in the package for detail information about how to make your own card.