I saw this guy approach into organizing PHP projects http://net.tutsplus.com/tutorials/php/organize-your-next-php-project-the-right-way/comment-page-1/#comments and i liked it, but since the head.php will be the same to all pages how can i put JS scripts only in the pages that need them?
Well, first off, putting JavaScript in the bottom of a page tends to yield the best results, but, to answer your question: if you have scripts that are only relevant to one page, you could save that script with the same name as that PHP page (obviously with a .js extension instead), and then inject the file name into the script reference. I'd also maybe add a flag so that you only look for a JS file when the flag is true:
<?php
$usesJS = true;
$filename = "somerandomname";
if($usesJS){
echo( '<script src="/js/' . $filename . '.js"></script>' );
}
?>
This would print out something like <script src="/js/somerandomname.js"></script>
Another option is to create an include file for each page and code your script tags as normal inside the include, and then reference the include. I did something like that for a simple site I did where each page had a different jQuery setup and only one needed a plugin.
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 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.
I'm a newbie. Here's my problem. I just found that all css and js files generated by rails under app/assets are included in every page. I was considering how I could separate them into local ones(just for this page), and global ones(for all pages).
For example, I would like to put jquery.js in all my pages. But for 3DHelper.js, I hope it only appear in specific pages.
Are there any good ways to do this?
Assets pipeline gives you a good improvements in performance when you avoid using separate css/js files in your APP. And it is strongly recommended to follow this way!
If you would like some js file is executed only on some pages you can do the following:
add controller/action names to data or class attribute to body (in layout)
<body data-controller="<%= controller.controller_name %>" data-action="<%= controller.action_name %>">
add if condition to your js file which should be executed only on specific page. Something like this
if (($('body').data('controller') == 'YourSpecificController') && ($('body').data('action') == 'YourSpecificAction'))
Good day!
Could you help me to figure out how to customize joomla 2.5 template. The problem is that main(index page) shouldn't contain header block, but other pages should. Is there any solution for this (maybe somewhere in administration panel located this option). Sorry for my bad english and pure knowledge of joomla.
It could help if you could show me your site,
but one easy option would be to use following to test for front page in your template:
<?php
$app = JFactory::getApplication();
$menu = $app->getMenu();
if ($menu->getActive() == $menu->getDefault()) {
echo 'This is the front page';
}
?>
another option would be to prevent all header modules from showing on the front page (if your header is made of modules)
You could use two different templates and assign one of them to your front page and make the second one default, so it will be assigned to the rest of your pages. However, you wouldn't normally do that if the only thing that's different is the presence of the header and everything else (like layout, colors, shapes, etc.) is the same.
In your case it makes more sense to implement your header as a module (use "Custom HTML" module type) and set it up to only display on the front page.
Good luck!
удачи!
I am developing a Magento extension and would like to run some jQuery script in the footer of the html template.
I have manually edited page.xml layout file to load my jQuery source and manually edited the footer.phtml template file to test my code, but I now want to package it up into an extension. The question is how to do this within my extension configuration, to tell magento to load the new jQuery source library in the header, and to append code somewhere in the footer (or anywhere) in the magento generated theme html.
Create a custom Magento Module
Use this module to add a customer Package Layout Update XML File
Use this Package Layout Update XML files to add a javascript src link to a (CDN?) jQuery, and add a custom block to the before_body_end block
Use this custom block to output your needed Javascript code
Use Magento Connect System->Magento Connect->Package Extensions to package up your customer Magento Module file, as well as any other files on the system you used (phtml template, jQuery files if not using a CDN, etc) into an Extension.
Wouldn't it be easier to use a static block? This way the client or yourself could update the jQuery right in the admin area without going into code. You could also add logic with multiple blocks if you needed. You can display a static block in a template like so:
<?php echo $this->getChildHtml('staticblockname') ?>
Otherwise you might want to read this tutorial on creating a module (which you call an extension): http://magento4u.wordpress.com/2009/06/08/create-new-module-helloworld-in-magento/