Working with static data

Themes
1

I’m building a theme to match an existing website. The site currently has a menu with multiple areas on the primary page, linked by hash anchors.

Some of these areas have data that I currently store in JSON files for templating display.

I was wondering what would be the most straightforward (recommended) approach to use these data for rendering “partial” components within the index.hbs page.

Some of the ideas I’ve had so far:

  1. Load static JSON file from assets.
  2. Generate the content via JS script.
  3. Create a set of posts containing formatted data and load them by a specific tag.

I’m just starting with Ghost, thus I appreciate any feedback and additional thoughts.

1 Like
2

Hey! This sounds really interesting. Do you have an example of this? Sorry but I’m just trying to get a better picture in my mind of what you’re trying to do

3
  1. Load static JSON file from assets .

FYI *.json files (except manifest.json) are blacklisted and won’t be served as static assets from the theme - you’d need to store those files externally or give them a different extension.

4

Why are json blacklisted?

5

Kevin, is there an example of how to load static Json file? Ajax?

6

For security. There were instances of private config being exposed unintentionally through build-time config files and package.json contents.

No specific example, any ajax tutorial would work because it’s only possible to use a static file client-side.

7

@Kevin - thank you. I’m not actually asking for an example of writing an AJAX in JS, I am just not sure how to connect it to Ghost specific API/functions and how to feed the data to Handlebars later. I’m trying to do this inside a custom theme template.

So, given this:

<script>
   var records = [
       {name: "Rec 1"},
       {name: "Rec 2"}
   ];
</script>

How do I use data in foreach thus?

<ul>
{{#foreach records}}
  <li>{{name}}</li>
{{/foreach}}
</ul>
8

That’s not possible, if you’re using a static file then it would be accessible at https://yoursite.com/static-file.js (remember .json is blacklisted) and you’d use ajax to download it and generate what you need client-side. There’s no access to the file via handlebars.

1 Like
9

What is it that you’re trying to build out? Could it be done with HTML and JavaScript?

10

I have structured data in JSON format that I need to display in a list on the Home page.

I come from languages like Ruby (on rails), C# (asp.net), and JS (express, etc.) which all allow me to feed the data into template and display however I want using partials.

It looks like Ghost themes support this as well.

All I want to do is take data Array (either as Stringified JSON or JS object) and iterate over it with {{#foreach}} loop, data being NOT one of Ghost standard Contexts.

11

As Kevin said, it’s not possible to upload .json files. But even if you were able to, the Handlebars theme logic is not designed to iterate over arbitrary files. Could this be done static HTML? You could generate the HTML beforehand and then add it to a HTML card within the page content?

The alternative is to switch to an API driven statically generated site, there you could iterate over any files you wish as the code would be running outside of Ghost:

https://ghost.org/docs/api/v2/content/

1 Like
12

Blockquote[quote=“DavidDarnes, post:11, topic:8409”]
As Kevin said, it’s not possible to upload .json files.
[/quote]

I am NOT trying to “UPLOAD” anything. Forget JSON files.

Is there any way to Set a variable to whatever I want and use it inside Handlebars template or not?

13

Expanding on this, Ghost themes are generally used to display content created by the Ghost instance. You can include static pages or hard-coded values, but you can’t pull in data from external sources (including your theme)

To answer your question, no, you cannot just “set a variable” in your handlebars theme. As David mentioned, you can generate the content before hand as part of your build system. If your data changes too much, Ghost also works really well as a headless CMS.

2 Likes
14

@vikaspotluri123 - thank you. I think that clarifies things (and the other answers beging to make more sense to me.) I suppose my wish is to use plugin (or theme) to expand Ghost’s scope and that’s my error. I indeed do appreciate a tool that does one job really well. :slight_smile:

1 Like