I'm working with two students to produce a few HTML pages (a homepage and two secondary page layouts) that will later be implemented into a larger CMS.
I'd like to be able to abstract the shared HTML (head metadata, primary navigation, footer, etc.) into separate files so we only have to update them in a single place, execute a shell command to generate new, complete output. Since these pages are only ever going to become templates for another team, I don't even need to integrate any external data sources.
I know Jade would work for this but our partials/layouts/whatever need to look like HTML. I keep coming back to precompiling Handlebars templates but I'm not having much luck getting them to work.
Since we're using Foundation 5, Ruby and Node are already part of our toolchain. Suggestions?
I really like Middleman for this kind of thing. Layouts and partials and local data, etc. Wonderfully useful for doing front-end prototyping for what will eventually become a Rails application.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm building my own blog and I would have lots of articles, so, copying and pasting the head every time, or an aside, the footer or some repeated parts of the blog would be stupid.
So, I'm looking a way to do it in an easy way. I heared about templating (but don't know what it is) and found this answer: Is it possible to create a web site header without copying and pasting it on every page? but it seems that is not what I'm looking for.
I heared about HAML and Markdown (HTML Preprocessors) and don't know if they are used to do what I need.
The solution I want to find is something like #import in Sass.
I have an #import "head.scss"; and in the compiled file I hadn't repeated manualy the (in this case an "imported module" head.scss)
I might say I'm learning to develop my static blog with Jekyll, just because I want to learn to use this technology, and second I know how to use WordPress, Joomla and learning a new thing would be interesting for me but I don't want to learn PHP so I think a templating language will be easier for this project
If you want to use Jekyll, you can use includes to avoid repeating code.
If You are looking easier ways for managing posts and front matter You should look into Jekyll Bash UI or Octopress.
If You want to learn more about Jekyll and its templating system, I'd recommend You to read the Jeyll.tips web page. It contains well formatted and easy to read how-tos, and also covers advanced topics like data files and collections.
Jekyll Bash UI (requires Bash)
Creating a new post is quite easy process, just this on the command line:
jcli.sh new
Octopress
Octopress uses rake utility which makes using Jekyll easier.
For creating a post You just have to call this:
rake new_post["My new post with Octopress"].
After this You can call rake generate to generate the page or rake preview to run the webserver at localhost on port 4000, so You can preview the changes.
The answer is yes it's possible.
In order for a scss file to work you have to make sure the .scss file (or sass file) is converted to css first. (you can look up the many sass tutorials online. for that, just look for converting sass or scss files into css there are even little simple applications for that like scout) By the way, with less you can do the same thing for css files as with sass in terms of importing.
For html files there are templating engines like you said. You can compare popular ones like moustache, dust.js and handlebars just to name a few.
With these you can import snippets of html code inside your file (so you do not have to repeat code).
In programming languages like JavaScript and php you can also do the same thing.
in PHP you can use for example the include() or require() function to import other bits of code from other files into your current file. And in languages like JavaScript you can even use something like angular for example to create simple custom directives to achieve the same goal.
Pretty much every server side language I've worked with has shared views in some manner or another.
asp.net webforms has master pages, asp.net mvc has shared views, coldfusion has cfinclude, RoR has partials, PHP has shared layout. I don't know about straight up HTML, but when utilizing a server side language this is definitely possible.
I would suggest using a content management system, like WordPress (https://wordpress.com/) , Joomla (http://www.joomla.org/), or Drupal (https://www.drupal.org/). You create a template one time and load it into the CMS. You can then create as many pages as you need without having copy and paste the template. You can also add in different elements as needed. This makes managing a blog much easier.
If you dead set on doing it one page at a time, I would suggest using PHP to pull in the header. Here is a good article to get you started, Creating a PHP header/footer . However, you'll still need to copy and paste a template file to create a new page.
I have a large pile of lecture notes in raw HTML format. I would like to add interactive content to these notes, in particular incorporating online exercises. I have some experience implementing online exercises as cgi-bin executables compiled from Haskell code running on the server, interacting with a student record file and sending suitable HTML back to the browser, using Text.Xhtml to generate the content. Now I plan to integrate the notes and the exercises.
The trouble is that I don't want to spend ages manually transforming my raw HTML into Haskell code to generate exactly the raw HTML I started with. Instead, I'd like to put my Haskell code and my HTML in the same source file, with placeholders in the latter for content generated by the former. A suitable tool should then transform this file into Haskell source code for (e.g.) a cgi-bin executable which generates the corresponding page.
Before I go hacking up such a piece of kit, I thought I'd ask if there's better technology out there already. The fixed points are the large legacy lump of HTML, the need to implement the assessment of the exercises in Haskell, and the need to interact with student records on the server. The handicap is that I need to use the departmental web server and I can't reconfigure it (ok, maybe I could ask nicely): that's one of the reasons I currently use cgi-bin executables, which are just fine on our server already, but I'm open to other possibilities.
My current plan is to write a (I mean adapt an existing) preprocessor to support a special syntax for defining functions of type
Html -> ... -> Html -> Html
that looks a lot like raw HTML with splice points. Then what I do with my existing raw HTML is indent it a bit and mark the holes.
But would that be a waste of time? Please, please tell me that this question is a duplicate!
There are Haskell frameworks like Yesod and Happstack which use templating engines like you describe.
Have you looked at the haskell wiki at http://www.haskell.org/haskellwiki/HSP or
http://www.haskell.org/haskellwiki/Web/Libraries/Templating ?
They may do what you need.
You might find someting to do the job here: Templating packages for Haskell.
And you should probably look into Snap, Yesod or Happstack for serving the content.
I have a large pile of lecture notes in raw HTML format. I would like to add interactive content to these notes, in particular incorporating online exercises.
There is already a system (called "ActiveHs"), written in Haskell, that allows to put lecture notes and interactive exercises in one file.
See:
http://pnyf.inf.elte.hu/fp/UsersGuide_en.xml
http://pnyf.inf.elte.hu/fp/Constructive_en.xml
I can really say that it is very well written code and completely open source!
I have two html files, I used 2 different frameworks to create 2 different web application for smart phones and other devices such as tablets.
now I have to use Velocity Macro, and merge this two html files into a single vm, that generates 2 outputs depending on a configuration.
i have been searching for methods to do this and I found this: http://www.roseindia.net/apachevelocity/macro-wrap-html.shtml
My question is do I need to build a Java fie just like in the link and then make a vm file, or can I just make a single vm file without making any java files?
if my question in unclear let me know I try to explain more.
The Java class shown there is just to demonstrate the template, and all the template does is demonstrate how to use the Velocity #macro directive.
IMO putting both HTML files into a single VM template is a bad idea, because it will be large and difficult to understand, modify, and debug. Instead, consider using the #parse or #include directives.
Alternatively, consider a mechanism at a higher level to serve the appropriate pages directly instead of pushing the template decision-making process into the templates themselves--this is arguably the best solution.
I've been tasked at work to create a 'website' on a CD for a client. I've made a start where basically everything is hardcoded pure html, and god how easily you forget how amazing templates are, so much freakin' boilerplate. So I would prefer to somehow create a set of linked html pages using a template system.
Is there some method of easily producing a set of linked html files (suitable for CD, i.e. no webserver) using something like Django? The project is doable by hand, but there's a lot of overhead.
Would love to hear alternative ideas as well, not set on Django, just what I'm kind of familiar with.
Note: Can't include any software, can't use anything from the internet. Flat html, on the cd.
You might be interested in a static-site generator like Hyde (Python) or Jekyll (Ruby). Essentially lets you create pages in Markdown/Textile/whatever with templates, and then generate static HTML files with a simple shell command. You can deploy it however you want, since it's just files.
I've used Jekyll myself because I heard about it first (despite being a Python guy primarily), but Hyde seems a bit more competent (CSS processors, for example). Jekyll is more widely used, I think.
(Using Django would mean that you'd have to run a Django installation on some server just to create the content and then generate "linked html files"...)
Here is another approach: http://lethain.com/intricate-static-websites-with-django-templates/
Is it possible to reuse HTML tags across multiple files, headers and footers for example? Placing them in separate files adds an extra HTTP request, that I'd like to avoid.
I don't want to replicate minor changes in headers and footers across every html file every time a change request comes along.
HTML is not a programming language - it's a markup language. You don't do object-oriented HTML because it isn't object based. This is the whole purpose of a server-side language, so you can make include files and use them in your server-side application.
If you have Apache however, you can use server-side includes which don't require a programming language such as PHP, but it's less flexible:
<!--#include virtual="/footer.html" -->
First, HTML isn't even a programming language, so it's impossible to have "Object-oriented" HTML.
Placing them in separate files adds an
extra HTTP request, that I'd like to
avoid.
If this is the reason for your "without server side code" requirement, then you are mistaken - the client does not fetch the templates that make up a page separately; the server side code will return a single HTML page to the client.
If, on the other hand, you don't have the option to run any server-side code at all and have to make do with static HTML pages, then there's only two options I can think of: iframes (which do result in separate HTTP requests, of course), or some sort of tool that basically runs the equivalent of server-side code to embed your reused templates everywhere and spits out the result to be uploaded to the server. You can have this effect by running a PHP/Apache-with-SSI/JSP/Whatever server on your development machine and using wget to make a static snapshot of the pages.
What I want to do is this. The files can be scattered during development. But I when I'm ready to release, a toolkit should compile the included files into a single html file.
You can use a template language/engine, such as jinja2.
You can layout files in a certain hierarchy, and have templates inherit from other templates, and include other templates, and define reusable macros (closest thing to what you referred to as "reusable tags").
What I want to do is this. The files can be scattered during development. But I when I'm ready to release, a toolkit should compile the included files into a single html file
I know this is late, but CodeKit's .kit language lets you do exactly what you were saying.
http://incident57.com/codekit/help.php
I think the language you've chosen in your question (object oriented HTML) is actually masking the real issue you have here...
What I want to do is this. The files can be scattered during development. But I when I'm ready to release, a toolkit should compile the included files into a single html file.
This sounds like a job for a preprocessor, I don't believe it has anything to do with your webserver or server side technology, as this is a step which would happen before deployment.
There's a number of text pre-processors available eg M4 - hell you could even use the C compiler pre-processor if you wanted. A quick google reveals that there are specialised pre-processors for HTML as well....
Automatic file inclusion, automatic escaping, and whatnot that can be done with automatically inserted headers and footers, chosen based on path patterns.
Seems to fit the bill?
Sure . But these would have to be separate ajax calls form the client . There are lot of javascript mvc frameworks like that do that .
If you want to have include files during development, then compile them into free-standing HTML files, you could do that by spidering your development server with wget: whatever server-side technology you use will combine the files and return the HTML, which wget will saves as one file.
As everithing is object over the technology but not directly, indirectly interacting with the object that are created at different level as per security implementation.
You can do this.
I just released a mature framework called Hypertag that is, in fact, Object Oriented HTML. It is entirely client-side, in continuous development, and allows for very interesting, yet HTML-compatible, advanced solutions for logic and layout.
See http://hypertag.io for more.