Your First Screen


A screen is where you design the layout. Think of it like a canvas for your web pages.

Each viewable resource within your site must have a screen attached. All resources can share the same screen or each resource can have a unique screen. The architecture is up to your use case.

For instance, say you have a podcast app and you would like to create some screens for it. First off, you would most likely create two screens. One called something like Podcast Loop and one called Podcast Player.

The Podcast Loop screen would hold the list of all available episodes. Think of it as the index of the audios. It would only need one resource, something like: /episodes/

The Podcast Player screen would be much more dynamic. Each episode would have its own resource (URL), possibly: /episodes/name-of-episode/

For full reference of screen variables, see the dynamic documentation in the Sitecast Builder.


Accessing Your Screen Through Code

Generally, the basic way you will access each screen from the application.html file is with the following snippet:

{{ current_screen.body }}

Another cool aspect of screens is the ability to add custom code to the <head> or </body> of the index.html file. Access the form by visiting the settings form of each screen.

An example of why you would add custom code to a screen is as follows.

Imagine you are building an event calendar for a site. The calendar needs a JavaScript library and some additional CSS for styling. You do not want to load this additional JavaScript thoughout the site. Just the events screen.

Typically, you would add the JS and CSS to the main bundle. Which may be the best if the code is widely used throughout the site. But if this extra code is large or rarely used, it is unneccesary to have all website visitors download the code.

So instead, click the settings button of the screen inside of the Sitecast Editor. From the settings form, you will be able to add the custom JS and CSS.

To output the code in the index.html file, simply use the snippets:

{{ current_screen.head }}

and

{{ current_screen.foot }}

Adding blocks to the screen

You can attach any block to the screen using the following code:

{{ blocks.block_name.body }}

To learn more about adding blocks to the screen, visit the block section of these docs.