Block Development Skeleton File

The contents of this article may be outdated and no longer applicable to the newest version of Pagestead (version 1.1.0). We’ll keep this article around for a while for those who are using older versions of Pagestead, however the article will be deleted in the near future. For more up to date information on block management, please review the Managing Blocks & Components section.

The next step to get your custom blocks inside the Pagestead page builder is modify the skeleton file (skeleton.html). The skeleton.html file is used by the page builder to turn the blocks on the canvas into a proper and fully functioning web page. To learn more about the skeleton file, please have a look at this KB article.

The skeleton file is copied over from the /assets/ folder to your /elements/ folder during the Webpack build process. Exactly where you place the skeleton.html file within your /assets/ folder is arbitrary, as long as you make sure you let Webpack know where to copy the file from (by editing the webpack.config.js file as instructed later in this article). However, we suggest to follow the same convention as used with the default Pagestead blocks and place the skeleton.html file directly in your elements folder in the /assets/ folder. For example, if your blocks are in /assets/elements_custom/ we suggest the path to your skeleton.html file to be /assets/elements_custom/skeleton.html.

To make sure your custom skeleton.html file is processed during the Webpack build process, locate the following line in webpack.config.js:

{from: skeletonPath, to: __dirname + '/elements/skeleton.html'},

and replace it with

{from: assets/elements_custom, to: __dirname + '/elements/skeleton.html'}

Make sure the from property points to the correct place in the /assets folder where your skeleton.html file is located.

Here is what a skeleton.html file might look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--baseURL-->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--pageMeta-->
    
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
    
    <!--headerIncludes-->
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    
    <div id="page" class="page">
        
    </div><!-- /#page -->
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

The skeleton.html file is to load ALL assets used by your block template files. To that end, you want to make sure you include all external CSS and Javascript files within your skeleton.html file. In addition, the <body> section of the skeleton.html file needs to contain a single <div> with it’s ID attribute matching the value set in your page builder config.js file (/assets/js/modules/config.js > module.exports.pageContainer).

Inside the <head></head> section, you will notice several comment elements:

  • <!–baseURL–> : will be replaced with a BASE tag (<base href=””></a>);
  • <!–pageMeta–> : will be replaced with <meta> tags for the page keywords and page description;
  • <!–headerIncludes–> : will be replaced with other includes provided by the end-user (like analytics code for example)

When the Pagestead page builder is loaded in the browser, it will expect to find the skeleton.html file in the /elements/ folder. Although it’s possible to manually place the file in the /elements/ folder, we suggest having the copying handled by Webpack. To that and, run the Webpack build process to complete this step.

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.