Create a Custom Widget for a Static Page

Themes
1

Hi.

I would like to create a custom widget for a Ghost Theme (https://ruby.ghost.io/) which I am working on.

The purpose of the widget is to display the first 12 words from a static page which I have already created within the site.

I’ve created the widget and it displays on my site, however, the text is hard coded - I would prefer that it pulls the words from the static page, as mentioned above.

This is my widget to date:

<div class="widget widget-tags u-shadow">
<h4 class="widget-title">About Me</h4>

<div>
    <img src="{{asset 'images/myPhoto.png'}}" width="100" height="100" alt="My Photo" longdesc="Photograph of Me" style="display: block; margin-left: auto; margin-right: auto" />
</div>
<div>&nbsp;</div>
<div>
    Hi! My name is Joe Bloggs and I am a professional
    software developer.
</div>

All of my research on this area to date has shown me widgets associated with posts, but not static pages.

Any guidance or advice would be greatly appreciated.

Thanks.

2

When you say “static page” do you mean a page you created in Ghost Admin, or one you created in routes.yaml?

The latter cannot be pulled dynamically as they’re part of the theme, not the content.

The former can be pulled exactly the same way as posts, they’re just called pages:

1 Like
3

Hi Hannah. Cheers for the reply, really useful.

When I say “static page” I mean a page I’ve created in Ghost Admin. I’ve now used the link you provided on the Content API, and was able to create a custom integration to use the API for GET /content/pages/{id}/ . All good.

Now I’m trying to use the Content API JavaScript Client Content API JavaScript Client to read the excerpt of the page.

I’ve got the following code, and I’m trying to assign the excerpt text to a div tag, but I can’t get it working.

<script src="https://unpkg.com/@tryghost/content-api@1.4.1/umd/content-api.min.js"></script>

<script>
    const api = new GhostContentAPI({
        url: 'https://mySite.com',
        key: 'myKey',
        version: "v3"
    });

    api.pages.read({ id: 'pageID' });

    document.getElementById("aboutContent").innerHTML = api.pages.excerpt;// "Hello World";
</script>

I think it might be how I’m assigning the excerpt data into the innerHTML.

Any idea? :slight_smile:

Thanks,
Tony.

4

api.pages.read() returns a Promise… so your code needs to use then & catch as per the “Working Example” on the page you linked to:

api.pages.read({ id: 'pageID' })
    .then((page) => {
            console.log(page.excerpt);
    })
    .catch((err) => {
        console.error(err);
    });
1 Like
5

Thanks, Hannah. Really helpful, yet again :smiley: