https://github.com/cradlecms/component-blog-article
Server side rendered component to Cradle CMS fetching article data in JSON format.
https://github.com/cradlecms/component-blog-article
component liquid server-side-components server-side-rendering
Last synced: 3 months ago
JSON representation
Server side rendered component to Cradle CMS fetching article data in JSON format.
- Host: GitHub
- URL: https://github.com/cradlecms/component-blog-article
- Owner: CradleCMS
- Created: 2024-08-19T08:36:04.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-26T08:43:34.000Z (10 months ago)
- Last Synced: 2025-01-23T06:08:57.305Z (5 months ago)
- Topics: component, liquid, server-side-components, server-side-rendering
- Language: Liquid
- Homepage: https://cradlecms.com
- Size: 20.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Blog article data component
Web component for Cradle CMS fetching article data in JSON format.
## Setup steps
### 1. Add component file
Add the file `article.liquid` to the `components` folder.
### 2. JSON-article template
Add a article template `article.json.liquid` in folder `templates` for JSON output with the following content:
```
{% layout 'none' %}
{{ article | json | unescape }}
```
### 3. Include component code
Include the component code to the site with tag `{% component 'article' %}`.
A good practise to dcrease the payload and utilize the browser cache is to include all the components to the same js-file in `assets` folder and include in the theme with `{{ 'components.js.liquid' | asset_url | script_tag }}` but please note that one should **remove the script tags in the js-component file `article.liquid`**.
### 4. Use component on site
Use the component at the desired place by including `` as html tag and the url article containing the `articles` slug.
```
```
The URL contains the `articles` slug as it adds the article-context to the handle.