Developer Tutorial | Recreate an Existing HTML Template in Jahia (1 of 3)
Visit https://www.jahia.com/developer-guides to learn more about development on Jahia's Digital Experience Platform.
In this tutorial, we take a look at how easy it to take a pre-existing HTML template and recreate it as a Jahia CMS template.
Transcript:
"At Jahia, we want to make it simple for you to get up & running with elegant, yet robust digital experiences.
That’s why we’ve made it really easy to craft & deploy different web templates across your platform.
In this tutorial, we’re going to show you how to transform static HTML code into a fully fledged Jahia template. Let’s get started!
I’m currently sitting on a free HTML templating site, with some easily accessible web-page source code.
First things first, I’m going to open the index.html file & have a look at the page structure. Having done that, i’m going to copy the HTML code we want to transform into a jahia template.
As you can see, it’s plain old HTML.
Now that I've got what I need, I’m going to switch over to my blank jahia template with my choice of IDE - a developer tool that makes it convenient to edit code.
Jahia templates are structured as apache maven projects, similar to most java projects if you look at the file structure here.
I’m going to replace the template.jsp file which can be found in the HTML resources folder of our template project, with the HTML code from our free template. It’s going to break all the links but let’s still take a look at it without any CSS.
As you can see, it’s a bare bones page - to rectify this, we’re going to modify the code so that the Jahia platform provides the assets needed to make the page come alive.
(3:40) Jahia has a syntax called url.currentmodule, which tells the web project where our desired assets are stored. We’re going to use the search and replace feature of our IDE to feed our HTML file the paths for all the images, javascripts and CSS using this syntax. In production, you’d spend more time perfecting everything but in this tutorial, 5 minutes is plenty - so we’re going to bulk replace these references.
CSS code can also reference CSS and Javascript URLs, so we’re going to have to ensure the path of the static assets are also correct.
(4:47) Here i’m missing the actual JS and assets from the website, so when i’m done I’m going to copy & paste the HTML, CSS & JS of the original project assets under the resource folder within Jahia.
My IDE is going to take a few seconds to process everything and scan for dependencies.
(5:40) I’m missing one final file - my style.CSS - so i’m going to add it now; it’s a specific file that contains the JS and image references - i’m just going to modify the path here too.
I have references to Images that are going to be broken, so I'm fixing the path.
Now i’ve done that, I’m going to rebuild my module for deployment by running the same command as before - maven clean install - this provides my changes to Jahia. Let’s see if the sites look better!
I’d say it’s looking a lot better! In just a few short minutes we’ve taken an pre-existing html template and replicated it on the Jahia platform.
We’re not done yet though - this template is still referencing quite a lot of static content. Tune in to my next video where we’ll create some new content types and display them on our site.
Thanks for watching - if you have any questions, we’d love to hear from you at [email protected]"
For more on Jahia:
Website: http://jahia.com
Twitter: / jahia
LinkedIn: / jahia-solutions