line, is something I don't understand why every website doesn't have. It makes it so mobile users don't have to drag and zoom to look at websites, the content kind of adjusts to the phone width (like most websites do).
I'm not using those variable color values, but I probably will, how nice is it to have variables in css?
Now, as you may have guessed, the .jade and .styl files cannot be displayed directly, and have to be rendered into .html and .css files. When you have a setup like nodejs or django, I'm sure you can do that automatically, but for something like this, I just have to manually compile files when I change them. Here are the basic commands (from cmd) I use to compile the files.
jade site/templates -o "site/views/" -P
stylus styles -o "site/static/css/"
Stationed in the root
homepage/ folder, the first command renders all .jade files from
site/templates into .html files in
site/views. The second command similarly renders all .styl files from
styles/ into
site/static/css.
Now, I also wanted the index.html to be stationed in
site/ and the rest in
views/ except I simply wanted not to render layout.jade (it's never displayed on it's own). So, naturally, I turned to the trusty old batch script! It's fairly simple, so I think I'll just show it here and not explain in detail.
 |
compile.bat
yes you should be sceptical about running .bat files from the internet, but this one's pretty safe |
Wasn't there some mention of php? Exactly. I wasn't going to use php until I needed to, and now I did (well, probably not, but it was an option anyway). I searched for how to nicely include two languages on a website (so the user had a "switch to english" option).
Found a site that had an idea I liked. Of course you want to avoid hardcoding stuff as much as possible, so the idea to have different translations in two .php files with all same variable names and then include the relevant file depending on the lang parameter (through the
?lang=en) was cool (a database would also have worked).
So now I have a new directory,
views/php, which includes
en.php and
is.php containing the translations. And of course, have to add these includes in
layout.jade.
en.php
<?php
$greeting = utf8_encode("HEY hYE");
$title = utf8_encode("a website");
?>
is.php
<?php
$greeting = utf8_encode("Hæ, hvað segirðu?");
$title = utf8_encode("besta síðan");
?>
Yes, that php within the jade is not pretty at all. I did look up some options for jade and php, and there appear to be some software for that, but it all seemed to complex or not for me, and this worked, so I'll just go with it. It's a small site :P
That syntax does give me a render warning about some spaces, but I hope that isn't severe.
Notice the
utf8_decode, this I had to do, along with the
utf8_encode in the language.php files. This is so the browser correctly displays the icelandic (unicode) letters, without it, I got question marks and weird symbols.
I'll just quickly mention, I used wamp to run the now .php (instead of .html) site on localhost. I also use dropbox to backup my files, so I wanted to change the root wamp directory to my working folder, and did so successfully. Thank you
yfastud! (remember to change it in two locations in the httpd.conf file)
We're almost at the finish line! Has anyone noticed the problem with this setup? Well, not only do I have to manually change the .html extensions on all files to .php, each time I render again, I have to delete the old php files and change the extensions again.. now that won't do!
So the solution?
Yes!
Batch script!!
This code is just appended to our old
compile.bat so now, we only need one
compile command to do all we need on a change. Now, this script took a while to make, I had to search online for a lot of stuff. Basically, what it does is this:
- deletes all .php files not in the ignore list (without that, it deleted is.php and en.php, but they're not rendered, so bad thing)
- the for loop on line 30 goes recursively through all folders and each file named something.php. The inner for loop simply loops over our ignores list and sets a flag if we are looking at a file in that list. Then files not flagged are deleted.
- the last for loop simply renames all .html files to .php
Note, in line 38,
if !inIgnores! equ 0
and
if !inIgnores! == 0
didn't work, but
if !inIgnores! lss 1
did for some reason.
Here is a sample output after a single
compile command
C:\Users\mypath\homepage>compile
executing command: jade site/templates/index.jade -o "site" -P
Warning: missing space before text for line 15 of jade file "site\templates\layout.jade"
rendered site\index.html
executing command: jade site/templates -o "site/views/" -P
Warning: missing space before text for line 15 of jade file "site\templates\layout.jade"
Warning: missing space before text for line 15 of jade file "site\templates\layout.jade"
Warning: missing space before text for line 15 of jade file "site\templates\layout.jade"
Warning: missing space before text for line 15 of jade file "site/templates/layout.jade"
rendered site\views\about.html
rendered site\views\index.html
rendered site\views\layout.html
rendered site\views\contact.html
executing command: stylus styles -o "site/static/css/"
compiled site\static\css\style.css
deleting old .php files..
files to ignore:
is.php
en.php
C:\Users\mypath\homepage\site\index.php
C:\Users\mypath\homepage\site\views\about.php
C:\Users\mypath\homepage\site\views\contact.php
ignoring file C:\Users\mypath\homepage\site\views\php\en.php
ignoring file C:\Users\mypath\homepage\site\views\php\is.php
files deleted
renaming .html to .php
C:\Users\mypath\homepage\site\index.html
C:\Users\mypath\homepage\site\views\about.html
C:\Users\mypath\homepage\site\views\contact.html
files renamed
C:\Users\mypath\homepage>
All done? Almost. Let's not forget our favicon! (the pikachu icon in the left corner of the tab). That was not more complicated than using a
favicon generator and then adding this line to the
head of our
layout.jade
link(rel="shortcut icon" href="static/img/favicon.ico")
and of course putting our
favicon.ico in
site/static/img.
So! There you have it, some simple foundations for building a simple site with two spoken (written?) languages using jade, stylus and php. For the next part, there will be some actual content added, but that's just regular html/css/js coding, so maybe I won't even make a post about that.
Fair warning: I actually haven't completed the site, so any problems I run into down the line if any, are not known to me at this point.
Here's a link to a .zip with all the files I used ready to go! (except you have to get nib yourself, or comment out the
import nib and
global-reset() line from style.styl). The final directory structure
homepage\
site\
static\
css\
img\
js\
templates\
views\
php\
styles\
[EDIT 12. may 2015] the site is up!
dmdcb.com! check it out. Hopefully I'll do a post about the making of someday.
The stylus nodejs tutorial:
http://www.clock.co.uk/blog/a-simple-website-in-nodejs-with-express-jade-and-stylus
This site gave me the idea for the correct syntax to include the
<?php ?> in
layout.jade:
http://stackoverflow.com/questions/16404582/writing-pure-html-in-jade
The two language setup:
http://www.nairaland.com/430728/how-make-website-two-different
utf8 with php:
http://www.sitepoint.com/bringing-unicode-to-php-with-portable-utf8/
Changing root dir in wamp:
http://forum.wampserver.com/read.php?2,30847,30860
Loop through and rename file extensions using batch:
http://superuser.com/questions/309818/how-to-loop-through-folders-and-rename-extensions-in-a-batch-file
Print newline in script:
http://stackoverflow.com/questions/132799/how-can-you-echo-a-newline-in-batch-files
Extract name/extension from variable in .bat:
http://stackoverflow.com/questions/15567809/batch-extract-path-and-filename-from-a-variable
Comparison in script:
http://www.robvanderwoude.com/ntif.php
Make the favicon!:
http://www.favicon.co.uk/
