I want to create static web page from Haml, and I did not use Rails or any other frameworks, just pure static HTML. I want to combine Haml parts code into single Haml, but the results were not as I expect. I am fairly new to Haml, so I tried some workarounds I found, but did not work.
First, I created my Haml code for "index" page. The code itself is simple enough, follows official Haml reference page.
index.haml
!!!
%html
%head
= render '.widget/meta.haml'
%title Hello world!
= render '.widget/link.haml'
%body
.container
%nav
= render '.widget/nav.haml'
%header
= render '.widget/header.haml'
%main
Hello world!
%footer
= render '.widget/footer.haml'
Notice that I put "render" in different places. Then, I render it through command-line.
haml render index.haml > index.html
But, turns out the rendered Haml part did not placed in correct order. They were placed all the way on top of the code, shown below.
index.html
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, initial-scale=1' name='viewport'>
<meta content='IE=edge' name='X-UA-Compatible'>
<link href='https://rsms.me/inter/inter.css' rel='stylesheet' type='text/css'>
<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
<!DOCTYPE html>
<html>
<head>
<title>Hello world!</title>
</head>
<body>
<div class='container'>
<nav>
</nav>
<header>
</header>
<main>
Hello world!
</main>
<footer>
</footer>
</div>
</body>
</html>
What I expect is the rendered Haml part are placed in correct order shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, initial-scale=1' name='viewport'>
<meta content='IE=edge' name='X-UA-Compatible'>
<title>Hello world!</title>
<link href='https://rsms.me/inter/inter.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='container'>
<nav>
<div class='test'></div>
</nav>
<header>
<div class='test'></div>
</header>
<main>
Hello world!
</main>
<footer>
<div class='test'></div>
</footer>
</div>
</body>
</html>
So, I tried some workarounds below, but it just throws an error.
render :partial => '.widget/meta.haml'
Haml::Engine.new('.widget/meta.haml').render
Haml::Engine.new(File.read('.widget/meta.haml')).render
From what I have read, Haml 6 does major changes to its code that are less backward-compatible to some solution codes. Am I should downgrade Haml to 5.2.2? If so, please tell me what should I change to my code and my command syntax.
Any answers will be appreciated. Thank you.
Okay, so I just did my last workaround with Haml. First, I downgraded Haml 6 to 5.2.2.
Second, I edited my "index" Haml code as shown below.
index.haml
This is quite different than @parinyasa write. I use direct call method than variables to avoid another error.
Finally, I render Haml thru command-line:
haml index.haml index.htmlTurns out the results was exactly what I expected.
index.html
I edited my "nav", "header", and "footer" code to give a clarity that my "index" is worked correctly.
Conclusion:
As I am newcomer to Haml, I really do not know what was exactly happened to Haml. I do not know if this is version-specific error, cause I also found other devs faced some problems when upgrading Haml 5 to 6. Also, I did not found much Haml 6 tutorials, maybe because it is just released last year. As sticking to old version is not always good idea, I hope next time there will be some Haml 6 migration tutorials to make things easier.