Phantom template

Create posts

To create a post just go to the posts.json file, there you will find the posts organized as follows:

"post_id": {
    "title": "Jamstack adventages",
    "thumbnail": "url_from_an_amazing_image",
    "description": "The easiest way to create jamstack sites",
    "page": "post_file.html"

Keyword	Description
post_id	Replace it with a unique id/name for your post.
title	Title of your post, this will appear in the post thumbnail and in the main title.
thumbnail	Thumbnail image of the post. The recommended image size is 350x350 pixels.
description	Short description of the post, it will appear in the thumbnail below the title (title).
page	Post html file.

NOTE: FOR NOW, the post files must be at the same level of the index.html file, NOT inside some folder, we plan to fix this issue.

Sidebar

The sidebar elements, located in the info.json file have the following structure:

"index": {
    "page": "index.html",
    "title": "Home"

Keyword	Descripción
index	Replace it with a unique id/name for the element.
page	Address to which the element will lead to, this can be an existing html page or a URL.
title	Title of the item in the sidebar.

Other elements

🏷️ Meta-tags

If you know html you will know the meta tags, jamstack has default meta tags in the info.json file:

"metatags": {
    "description": "Webpage description",
    "keywords": "jamstack, python, html5up",
    "author": "Jhon Doe",
    "copyright": "Jhon Doe"
},

To add a new meta tag you only have to use the EXACT NAME of the tag and its value, we will take the robots tag as an example:

"robots": "follow"

The metatags section would read as follows:

"metatags": {
    "description": "Webpage description",
    "keywords": "jamstack, python, html5up",
    "author": "Jhon Doe",
    "copyright": "Jhon Doe",
    "robots": "follow"
},

The structure for generating metatags is as follows:

<meta name="<tag_name>" content="<tag_content>">

Keep this in mind when adding new meta tags.

📱 Social networks

This template has default social networks, feel free to remove the ones you want. The social networks are organized as follows:

"twitter": {
    "url": "https://twitter.com/yourusername",
    "title": "Twitter",
    "icon-type": "brands"
},

The url and title points are quite intuitive, the important thing here is the name of the social network and icon-type.

This template uses the font-awesome library in its free version for all the icons you will see.

The name of the social network, in this case twitter, corresponds to the name of the icon in the font-awesome library, i.e. the full code of the twitter icon is:

<i class="fa fa-twitter"></i>

icon-type corresponds to the icon type. Brand icons must be brands and the rest must be solid. As we can see in the phone number icon.

"phone": {
    "url": "0000",
    "title": "Phone",
    "icon-type": "solid"
},

🌐 Site name

This template gives you the facility to set the name of your page without having to manipulate the html files.

"pagename: "Phantom",

This name will appear both in the tab titles and in the header of the pages.

🖼️ Site logo.

You can set your page logo with:

"logo":"https://html5up.net/uploads/demos/phantom/images/logo.svg"

You can use either a direct link to an image from the internet or the relative path to a local file.