I'm generally really impressed with Bolt and the flexibility it provides me for creating contenttypes with specific fields with minutes. However, I have a template which has common content across the site that I would like to make editable without allowing the user to edit the .twig files directly.
I've considered creating a different contenttype just for each part of the template but this seems inefficient.
For example I would like to make the address editable, and a panel that contains text and three images. Just wondering if there's a sensible way for achieving this.
Thanks
Create resource ContentTypes for this type of stuff, then you can put that into inheritable Twig files that you can then {% include '' %} as required.
Related
I am developing a simple static website with just HTML and CSS. On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
I am aware of doing it via PHP on the server side or via JS on the client side. But as it is a simple static website, there is no need to create it over and over again either on the server side or on the client side. I think it would be the best to somehow generate the finished HTML code once and upload it to the webserver. Just like compiling C code and shipping the ready to use executable.
I can also imagine, that such a compiler is able to remove comments from HTML and CSS, optimize (minimize) the code, or realize variables in CSS (e. g. for colors) etc. There are a lot of similar questions, just to name some:
Make header and footer files to be included in multiple html pages
Need an efficient way to get rid of my duplicate HTML code in multiple HTML files
How to include header/footer in a static website?
But they are all about doing the compiling over and over again by PHP, JS or server side includes, which are wasted resources for a static website.
So I am wondering, is there no such thing as "compiling a website"? How is it done nowadays? What am I missing?
On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
This use case fits very well with template engines, such as Handlebars, Mustache or Pug, just to mention a few. Template engines simplify your development by letting you re-use components across multiple files.
Besides, template engines are (also) good at being complemented with data feeds. This simplifies the process of creating your HTML files even more. Let's look at an example why:
// example taken from Pugjs.org
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
The sample code will render 3 <li> DOM elements from data that can be generated with JavaScript. This allows your website to be dynamic in content. That is exactly the key difference with Static Site Generators.
Static Site Generators (SSGs) can also compile HTML files with reusable components. However, these tools (i.e. Jekyll, Hugo, etc) emphasize more on the "static" compilation of the website, rather than the dynamic data complement. Just to elaborate more on this, Jekyll uses Liquid, which is a template language for HTML. Let's say Jekyll is the engine in charge of the layouts, HTML files, deployment etc. Whereas, Liquid a template language, allows you to do loops similar to Pug (template engine):
{% for post in site.categories.podcasts %}
<li>{{ post.title}}</li>
{% endfor %}
If your website has a lot of static content like blogs with articles, tutorials, images, and even writing documentation or basic text information, SSGs should be your option. For more dynamic content, i.e. fetching from server communication and databases, a template engine is definitely better.
If you want even more robust options, then you have Gatsby which is a framework using React for CMS, and again, a static content generator with more capabilities.
No compiling.
You need a static site generator (SSG). BTW I recommend 11ty, It is the best if you want simplicity & no limitaion on template languages (html, md, nunjucks, liquid, handlebars, etc are supported)
EDIT 1:
If you want to get started quickly then comment below, I have ready to use code to with HTML, CSS, JS minification, concatination
Say I want a web site with about 20 different pages. How should I go about building it so I can have the same content like a navbar and footer across all pages without having to copy and paste edits into each and every html file when something changes?
edit: I'm basically trying to figure out how to do Jade's include without installing Jade
That depends entirely on how you build it. If you are using a content management system (such as WordPress or Joomla) this is the inherent behavior. Header/footer content, and other areas depending on your use of widgets, etc. will automatically display the same content on every page. This content is easy to update site-wide in one location. Content management systems excel in this area.
If you are building the site from static files, and you are using a scripting language of some kind (such as PHP, ASP, etc) the use of includes would be a good option. Simply call the repeated block of code wherever you'd like to insert it on each page.
For example, if using PHP, you have a file that contains your legal text in the footer called footer_legal.php. Anytime you wished to include this content, you simply add the line include('footer_legal.php'); and the insertion happens.
What you're referring to is called templating and bootstrapping. There are various templating engines out there. It also depends on which server-side language you're running, as others said you maybe running PHP, NodeJS, C or something else, depends on your choice. The essential part is that you'll have separate files called templates (eg. .HTML, .EJS, .PHP, etc) for each element that repeats across different pages ( footer, header, content) and then you call that template where you want it.
I have a html template that has multiple pages like home, about us,contact,services,... and I want to convert it to a joomla template.I spent a lot of time for searching a good tutorial in google like this:
http://www.learning.asarayan.com/education-website-design/joomla-training2/334-convert-html-to-joomla-template
but non of them can answer my question: how can I convert ALL pages of html to joomla??I mean that I can convert one page for example home to joomla and define its position but what about other pages?
can anybody introduce me a COMPLETE tutorial???
sorry for my poor english
thanQ
You may start with tutorial posted at below address
http://www.tobacamp.com/tutorial/5-easy-steps-converting-html-template-to-joomla-template/
There is no automatic converter or out of the box solution for this, neither any tutorial to help you.
The best way to sort out the issue is by duplicating the template with the help of Artisteer. You can just recreate the template design and feel with Artisteer. Download link: www.artisteer.com/?p=downloads
You need to change your mindset from that for a static template to that for a dynamic template.
In joomla templates there is a base layout called index.php as you know. But that is very skeletal usually, is just defines some locations on a page, includes your css and javascript that is common to all of your pages. This gives your site a common look and feel and ensures a good user experience.
For your css for the individual pages you would normally just include that in the template.css file or similar.
Within the index file you will see places that say jdoc:inlcude. These are the places that actually include the layouts that provide detailed html for specific blocks on the page, typically there will be one component jdoc (there cannot be more than one) and many modules and module ones as well as some others.
The html for these documents is found in the components/com_componentname/view/viewname/tmpl folders.
To override the core layouts you use the template override system by placing same named files in the html folder of your template. You can look at the included templates to see how this works. There is pretty good documentation of this on the joomla documentation site.
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core will get you started.
Also this may be a point of confusion. In a CMS you strive to separate content from presentation. So if you enter the core information in the cms, i.e enter the contact information in com_contact, and enter most of your current content into individual articles you will start to see how it actually works. I would usually recommend first entering all of your static content into the appropriate places, then work on making the rendered pages look exactly the way you want them to.
There are several different kinds of pages in my Jekyll blog, and I want to design a personalized style for each kind of page.
However, there are not much differences between styles, basically they can be generated from a template with very few modification, such as change of page width, change of background color, etc. If I create every style file in _layout, it would be very difficult to change when I need to modify the common parts of them.
One solution is to use {% include xx %}, but it still requires N+ file for N style with very little differences. What I am looking for is that somehow I could change the parameter passing to a style file and generate style dynamic. Is there something like this in Jekyll or even better solutions exist?
I'm designing a simple website with no dynamic content that I want to be light and portable — no PHP or other server-side scripting needed, or wanted. I'm running into a question that I've had a few times before.
I'd love to be able to write common elements (head, foot, navigation) once and write the individual pages on the site with content only, then run this mysterious utility to compile everything it into a set of HTML files ready for uploading. A page might be written like this:
Title: Our Services
Top Navigation: Yes
Scripts: jquery, lightbox
<p>
Example, Inc. offers a wide range of…
It'd be great if the engine also had logic that lets me include or exclude elements (like Top Navigation above) from each page, and automate tasks like labelling the current page in the navbar:
<a href="/services"{page == 'services' ? ' class="current"' : ""}>Services</a>
Are there any engines out there like this?
I'd head directly towards Template-Toolkit for this. It comes with the ttree utility for building a static site.
You can handle the last part of your question with something like:
[%
INCLUDE 'navbar.tt'
page = 'services'
%]
To be honest, this is where things like PHP come in handy... to include common elements
Option 1: Use a language and enjoy it.
Option 2: Use the language to make the site... but then point a crawler at your site to grab the generated "static" content. e.g. WinHTTPTrack
Webby is fantastic for exactly this.
Another great option is Jekyll.
Adobe Dreamweaver's Templates do what you need if a non free tool is fine for you.
Basically you create a Template page where you define which parts are editable, then you create all your pages based on the template. If you change the template and save it all the associated pages are updates.
The templating system also has the ability to define default attributes and change them in a specific page. You can use this for labeling the current page, though for this IMHO a couple of lines of jquery code are much better.
You could write a program in any language you are familiar with that outputs static html files. You could have a basic structure and then for the customized stuff, you include it from a separate file.