I'm learning HAML. If I create a basic HAML file like so:
%h2 Hello World
This is a test
and run HAML on the command line:
haml somehaml.haml someout.html
the resulting html file doesn't have <head> or <body> tags:
<h2>Hello World</h2>
This is a test
What am I missing? According to the documentation, html5 should be the default output.
You still need to add the tags. html 5 or not is mostly a case of what is in the document type header and that is html 5 by default. Try this:
%html
%head
%body
%h2 Hello World
This is a test
Related
Vue.js is ideal library for my case, but I use it on non-SPA page.
Is there a way to bypass syntax v-bind:click? I would like the attributes starts from data-v-* and don't contains :.
My solution (based on accepted answer):
It looks like Vue.js will not pass the exam here.
Knockout proved to be the ideal library for friendly SEO html syntax without compilation templates.
You can use script templates to "hide" your Vue-HTML from the validator. The following validates as HTML5.
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<body>
<script id="some-template" type="text/template">
<div v-model="foo" v-bind:click="dontCare">Whatever</div>
</script>
<some-template id="app"></some-template>
</body>
</html>
This is not as much of a cheat as it might seem, since Vue-HTML is not HTML, but is in fact a template used for generating HTML (or, I think more accurately, for generating the DOM). But it is a complete cheat in the sense that the generated HTML is never subjected to the validator. :)
Alternatively, you could look at using Knockout, which uses pure HTML5 (what you write is what is delivered to the browser). It is not as performant as Vue, but it is an MVVM framework.
Short answer is: No.
I don't think there is a way to change the templating of Vue. The generated HTML shipped to user will be valid, because modifiers (v-for, v-bind, etc.) will be stripped of your HTML. Framework like Angular, for example, does not strip the multiple "ng-*" properties. For instance, you could write:
<div v-if="model.length" />
The resulting html will be:
<div />
Which is valid and compatible with any W3C validator.
I'm trying to create an inline code block. I'm a little new to haml.
How does one create a inline code block like this:
HTML
<code>
<article>
<header class="article-header">Example</header>
</article>
</code>
How does one do this in haml?
What i've tried:
%p
%code
<:article
<header class="article-header">Example</header>
</article>
As per this article from Chris Eppstein. I've quickly learned that haml isn't very good for inline content.
When I say content, I mean the meat of a web page. The stuff that is
left after you take away the header, footer, sidebar, ads, etc. The
stuff the user is there to read. Don’t use Haml for adding markup to
your inline content.
- Chris Eppstein
It is ideal to pass this through via a haml plain filter or even a markdown filter:
%p
:plain
<article>
<header class="article-header">Example</header>
</article>
%article
%header.article-header Example
I'm not sure what white space you're trying to preserve. HAML can render this in "pretty" mode, giving you pretty formatting with indentation and spacing, or "ugly" mode, with no indentation.
I know that this is a very non-standard use case, but I'm chaining HAML, Markdown, and Handlebars (in SproutCore 2.0), and I'm 1 step away from 'beautiful' code. Intermingling HAML, Markdown, and Javascript is less ideal than it could be. If I wanted to add a post-filter to the entire output of HAML, replacing {{text}} with <script>{{text}}</script>, what would be the best way to do it?
I could just hack on a post-build step after haml, but I'd like to turn it into something that I can give back to the SproutCore community.
I want to replace
%body
javascript:
{{handlebars}}
With
%body
{{handlebars}}
Which would give me
<body>
<script>{{handlebars}}</script>
</body>
However, I also want this to work when embedded within markdown. For example,
%body
markdown:
# Hello, {{handlebars}}
Currently, the only way to get this is
%body
markdown:
# Hello, <script>{{handlebars}}</script>
Which would product
<body>
<h1>Hello, <script>{{handlebars}}</script></h1>
</body>
Revisiting the same issue much, much later, it appears that there's not a good solution for this with HAML. However, Jade does just about everything that I want.
http://jade-lang.com/
Input
html
script(type='text/x-handlebars')
:markdown
*Hello, {{handlebars}}!*
Output
<html>
<script type="text/x-handlebars"><p><em>Hello, {{handlebars}}!</em></p>
</script>
</html>
I am using the no configuration option and have taken the following steps:
put the js files into root/public/javascripts
put the image files into root/public/images
put the demo css files into root/public/stylesheets
put css call in the head section of my layout file
<%= stylesheet_link_tag "demo_table", :media => "all" %>
put the initialization script in the head section of my layout file:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script >
first line of my table layout is:
<table width="100%" style="border-collapse:collapse; " id="example">
I restarted my server. Nothing happens. What am i missing?
The zero config relies on having a properly formatted table, which your example isn't showing. It must also have <thead> and <tbody> elements to render properly. Ensure that's properly setup first.
Second, open the page in Chrome or Firefox, view source. Click on the links to the Datatables.js and Datatables.css files as well as Jquery.js (or whatever each of these files is named) Do they open? If not, there's your problem.
Javascript is essentially platform independent. Sure, you get information TO the script in different manners in Rails, PHP, .net, etc, but there's no reason that this doesn't work in any of the major scripting language.
I have been using the RailsDatatables plugin in my rails apps without any problem. Maybe give that a try?
do you know how can i modify the <BODY> tag of the rendered htmls files of my app's views?
I mean, i can manually edit the html, but the <BODY> tag is added automatic in run time...
And i'd like to do something like
<body bgcolor="#0000FF">
Thanks!
You need to edit the application.html.erb in the layouts subfolder of views in your application.
Of course, you'd be much better of doing this in a stylesheet rather than the markup directly :)