I am currently in the process of designing and refining a landing page. Over the time, many things have been added and handling the amount of sections and modals is not as it easy as it used to be.
Coming straight to my question: Is there a simple solution to use templates in your normal web design flow to create static web sites. I do not need the advantages of a static site generator, like also compiling my sass or minifying my js files. Interpolation and a config file are also not needed nor wanted. Do you know any system that only allows me to split my html file into multiple components which will then be saved in different html files?
P.S. I am not looking for a Javascript template engine. The creation should happen once and produce a normal html file.
You can use a template engine like pug with client tool.
Example with pug:
Step 1: Install pug-cli
npm install -g pug-cli
Step 2: Code html using pug syntax (very easy to learn). Ex: Split home page file into multiple components (header, footer in folder template_parts):
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Document
body
include template-parts/header.pug
h1 Home page
include template-parts/footer.pug
Step 3: Run pug-cli to auto convert html code
$ pug -w ./ -o ./html -P
Change ./ after -w by location of pug files, ./html after -o by location of html files after convert.
Without using PHP includes, I'm not sure if this can be accomplished without using some form of JS Templating engine as:
The majority of the web's content has a simple and declarative way to load itself. Not so for HTML
You should check out:
Metalsmith
An extremely simple, pluggable static site generator.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
If you're using GULP/GRUNT in your workflow anyway there are include plugins:
npmjs search for 'gulp include'
npmjs search for 'grunt include'
Best solution for that is to use server side rendering as the previous answare said.
But checkout this attaribute powered by w3schools it might help you.
I know this answare is to late. but it might help others.
Thanks.
Related
I am using Markdown files to create a series of webpages (calling that mess a website would probably be frowned upon). I use a general template to display each page with a similar look: they all have the same header, footer, etc.
I would like to add a navigation menu, in order to have links to the other pages. I can easily generate the menu itself, what I don't know is how to insert it in the page.
What I tried is the following:
options.yml (generated by a Python script):
metadata:
title: My very excellent title
navigation: HomeOther page
standalone: true
template: template.html
template.html:
<!doctype HTML>
<title>$title$</title>
<header>Yeepee, header!</header>
<nav>$navigation$</nav>
<main>$body$</main>
<footer>Best footah evah</footer>
I then run the script: pandoc -d options.yml index.md -o index.html (and same for the other files, in a loop in a Python script)
The result is that the content of my metadata.navigation is escaped before insertion, resulting in something like <a href="index.html">Home</a><a href="other.html">Other page</a>, which is really safe in practice, but doesn't help me there.
What I would like is to have another template, say navigation.html, that contains the navigation menu to be included in my main template when using pandoc.
If this is not possible, I would like to use the same technique as above, but with an "unescaped" navigation parameter (I'm not fond of it, as it would bring a major security issue into the project).
How can I achieve this?
There are two solutions to this:
Use variables instead of metadata in your defaults file. Variables are inserted verbatim, while metadata will be escaped.
To insert the file navigation.html in a template, use ${navigation.html()}. Pandoc uses the doctemplates package for templates, see the docs on "partials" for more details.
I've built a mobile version of an existing website. The site I've built is completely static and relies only on HTML/CSS/JS. This site resides on the same server as the desktop version and is served from under http://example.com/mobile as a subdirectory. As such, I've set the <base> tag to:
<base href="http://example.com/mobile/">
The only access I get to the existing site is via FTP, so I don't have too many options to reconfigure the already existing server. And I don't want to either.
My mobile version is only somewhat functioning - all the <script> and <link> tags inside index.html correctly point to http://example.com/mobile/{js,css,img}, while links used inside js or css files look up to the top domain (e.g - http://example.com/img/image.png instead of http://example.com/mobile/img/image.png).
I can manually copy all the assets for the links to work, but since this is a Grunt project I figured there might be a smarter way to do this.
So, how can I have all internal asset links in js or scss files change when building (grunt build)? Something like:
site.css
// in dev
body {
background: url('/img/image.png') top left no-repeat;
}
// after building
body {
background: url('/mobile/img/image.png') top left no-repeat;
}
Thanks.
See grunt-replace or grunt-string-replace as tools that can help with this.
You could use either of these within your build task to process the changes you need.
The hardest part will be writing an accurate regex, but there are many regex testers/builders online that can help if you aren't expert at that.
Also, while .htaccess is a great idea for Apache based sites, it doesn't help if you are on Windows or on a cloud hosting solution that doesn't honor it.
In my meteor project I can separate the javascript files in the client and server directories. But I cannot find a solution for all the html templates I need to define.
The problem I have now is that I need to embed this svg image in a template too, which is a huge image. So now I have this html file which is now 2 times 'huge' :)
The reason I need to have this svg inline in my html/template is because I need to style it with css. Any suggestions ?
You can put the .html files anywhere! Besides the server directory, of course. The natural place to store them is the client folder, and a good practice is to keep each template in a separate file. The Javascript code related to that template (data helpers, events, callbacks) can then go to a file with the same name and with extension .js instead of .html. These are the basics if you want to keep your project tidy.
I have a fairly big webapp with lot of templates. I am looking to save time by precompilation of these files.
Currently, I use a script wrapper so that I can load it dynamically and package them in html
<script id="all-domain-users-model-template" type="text/html">
<td></td>
<td>{{domain}}</td>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{is_account_owner}}</td>
<td>{{#if is_account_owner}}Delete{{/if}}</td>
</script>
There are many many such files. One file can have more than one definition..
I am looking for ideas for a script to read the name in id, parse html, compile and put it back using id.templates in a js file.
I have seen Using pre-compiled templates with Handlebars.js (jQuery Mobile environment) - the accepted answers mentions that the script tag was removed before copying.. But in reality, its almost impossible..
I use grunt-ember-templates to precommpile my ember handlebars templates.
For a good example of this grunt plugin in use check out this example todos application.
It gives a good example of using grunt for your build process, testing, etc, and includes template precompilation.
we are planing to create a CMS with zf2 and doctrine orm .
actually we are concern about our cms templating
we want our system works with several templates and easily change between themes via admin
and creating a new templates should be easy for end-users developers
we want an advice or suggest for how to build templating system that :
there is a core module and there a lot sub modules with their own phtml
so where to store theme1 phtml and where to store theme2 phtmls ...
any suggest or advice please
thanks
I encourage you to take a look at Twig, its the best template engine I have seen so far :) It does take some time to learn Twig syntax, but its well worthy if you look at what you get :)
I cant yet write comments, so I wrote this as an answare.
Hope this helps. Trust me, the Twig is the way to go. Joust look at his documentation for more specific details how to use it!
EDIT:
The problem you are trying to solve has nothing to do with template engine. You can do that with any template engine. You can do it even with plain PHP if you want.
I built web application where users can register, get their own sub domain, and there they can build their webpage. Change theme, edit text, add pages. Simple CMS functionality.
The easiest way to do this is to have themes folder, where you would store themes, like this:
themes/
- themeBlue
- css/
- images/
- js/
- html or views/
- themeRose
...
Now this is where you would place all your themes, every theme has its own folder with images, css, js files...
And then you would have users, and every user would be able to choose and change theme.
That information would be stored in database. You need to store that user Jack is using themeBlue. You can do that as you want. You can event put this in users table like user_theme column.
Now when someone visits site, you first query database to see what theme is that user or creator of web using. And then you load all that files from current theme folder. And populate html files with data stored in database like in any other CMS.
This is the simplest implementation. You could for example, store css and html files in database :)
Hope this answers your question.
Good luck with that, I almost gone mad building my system :) I ended up with writing my own PHP MVC Framework joust to accomplish what I wanted.
if you activate another module in the application.config.php which has the same views and layouts (same folder structure and filenames) it's viewscripts and layouts will automatically be used when it's loaded after your core module.
so you could simply make your application.config.php dynamic to load the active template module which only contains the view folder. this would be a simple and effective solution without any other libraries.
additionally you can use an asset manager like assetic to also provide images, css etc. inside of your (template-)modules. (have a look at zf2-assetic-module, I wrote my own assetize-module based on assetic to fit my needs...)
Sina,
I do this in my Application->Module.php onBootstrap
$ss = $serviceManager->get('application_settings_service');
$settings = $ss->loadSettings();
$serviceManager->get('translator');
$templatePathResolver = $serviceManager->get('Zend\View\Resolver\TemplatePathStack');
$templatePathResolver->setPaths(array(__DIR__ . '/view/'.$settings['theme'])); // here is your skin name
$viewModel = $application->getMvcEvent()->getViewModel();
$viewModel->themeurl = 'theme/'.$settings['theme'].'/';
In this situation I have this structure in my view folder
view/
default/
application/
error/
layout/
zfcuser/
red/
application/
error/
layout/
zfcuser/
The $viewmodel above injects a variable into the layout for the themeurl in the public_html folder /theme/red/ with all assets for red
Access in layout.phtml -> themeurl;?> in a viewscript layout()->themeurl;?>
I am still working out my Dynamic Views. Right now I have a BaseController and all my ActionControllers extend it. It has a render() function that builds the required views but not sure its going to be scalable hoping to try some placeholder ideas.
application_settings_service is a Settings Service that gets settings for whatever domain was used to call the system and builds an array accessible via any service aware part of the site. Thats a whole different post and it may or may not rub MVC peeps the wrong way
I know your question is marked answered just thought I would share
Eric