I am learning html, css and content management by building my own personal site, but I have very little experience in any of these areas. One thing that has bothered me is the amount I have to repeat a segment of "html code". For example, on my site I may have a block that looks like:
<div class="talk">
<a href="link">
title
<div class="info">
subtext
</div>
</a>
</div>
where link, title and subtext are the only elements that change. As a programmer, this looks like a function with three arguments: talk(link, title, subtext) and I would implement this by keeping a separate text file or database with all the entries and a program to "compile" the data and the HTML formatting into a final product. In fact, this is what I do now with a simple python script and BeautifulSoup. I have a feeling though, that there are tools out there for exactly this sort of thing, but there are so many options and systems I not even sure what I'm looking for exactly (Grunt, bower, Ruby on Rails, SASS, HMAL, handlebars, ...). This is not a request for recommendations, an acceptable answer could involve any framework, but I prefer simplicity over power.
What is canonical/standard way to do this? What is a minimal working example using my code block above?
Since you asked for a live example, here is one in PHP:
news_print.php
function output_some_news ($link, $title, $subtext)
{
echo
"<div class='talk'>
<a href='$link'>
$title
<div class='info'>
$subtext
</div>
</a>
</div>";
}
// this is just for show. Usually the data come from a database or data file
$topics = array (
array ("http://celebslife.com", "Breaking news", "Justin Bieber just grew a second neuron"),
array ("http://nerds.org" , "New CSS draft available", "We won't be forced to use idiotic lists to implement menus in a foreseeable future"));
function output_news ($topics)
{
foreach ($topics as $topic)
{
output_some_news ($topic[0], $topic[1], $topic[2]);
}
}
And from within your HTML page:
news.php
<?php include 'news_print.php'; ?>
<div class='news'>
<?php output_news($topics); ?>
</div>
As for using PHP as a preprocessor, it is pretty straightforward:
C:\dev\php\news> php news.php > news.html
will produce pure HTML from your PHP script.
The PHP engine will be invoked from the command line instead of a web server, and its output will be stored in a file instead of being sent back to a browser, that's all.
Of course you will have some differences. For instance, all the web-specific informations like caller URL, cookies, etc. will not be available if you use PHP offline. On the other hand, you will be able to use command line arguments and environment variables.
Related
Problem
I have a collection of images with linked captions on a page. I want them each to have identical HTML.
Typically, i copy and paste the HTML over and over for each item. The problem is, if i want to tweak the HTML, i have to do it for all of them. It's time-consuming, and there's risk of mistakes.
Quick and Dirty Templating
I'd like to write just one copy of the HTML, list the content items as plain text, and on page-render the HTML would get automatically repeated for each content-item.
HTML
<p><img src=IMAGE-URL>
<br>
<a target='_blank' href=LINK-URL>CAPTION</a></p>
Content List
IMAGE-URL, LINK-URL, CAPTION
/data/khang.jpg, https://khangssite.com, Khang Le
/data/sam.jpg, https://samssite.com, Sam Smith
/data/joy.jpg, https://joyssite.com, Joy Jones
/data/sue.jpg, https://suessite.com, Sue Sneed
/data/dog.jpg, https://dogssite.com, Brown Dog
/data/cat.jpg, https://catssite.com, Black Cat
Single Item
Ideally, i could put the plain-text content for a single item anywhere on a page, with some kind of identifier to indicate which HTML template to use (similar to classes with CSS).
TEMPLATE=MyTemplate1, IMAGE-URL=khang.jpg, LINK-URL=https://khangssite.com, CAPTION=Khang Le
Implementation
Templating systems are widely used, like Django and Smarty on the server side, and Mustache on the client side. This question seeks a simple, single-file template solution, without using external libs.
I want to achieve this without a framework, library, etc. I'd like to put the HTML and content-list in the same .html file.
Definitely no database. It should be quick and simple to set it up within a page, without installing or configuring additional services.
Ideally, i'd like to do this without javascript, but that's not a strict requirement. If there's javascript, it should be ignorant of the fieldnames. Ideally, very short and simple. No jquery please.
you mean Template literals (Template strings) ?
const arrData =
[ { img: '/data/khang.jpg', link: 'https://khangssite.com', txt: 'Khang Le' }
, { img: '/data/sam.jpg', link: 'https://samssite.com', txt: 'Sam Smith' }
, { img: '/data/joy.jpg', link: 'https://joyssite.com', txt: 'Joy Jones' }
, { img: '/data/sue.jpg', link: 'https://suessite.com', txt: 'Sue Sneed' }
, { img: '/data/dog.jpg', link: 'https://dogssite.com', txt: 'Brown Dog' }
, { img: '/data/cat.jpg', link: 'https://catssite.com', txt: 'Black Cat' }
]
const myObj = document.querySelector('#my-div')
arrData.forEach(({ img, link, txt }) =>
{
myObj.innerHTML += `
<p>
<img src="${img}">
<br>
<a target='_blank' href="${link}">${txt}</a>
</p>`
});
<div id="my-div"></div>
This answer is a complete solution. It's exciting to edit the HTML template in codepen and watch the layout of each copy change in real time -- similar to the experience of editing a CSS class and watching the live changes.
Here's the code, followed by explanation.
HTML
<span id="template-container"></span>
<div hidden id="template-data">
IMG,, LINK,, CAPTION
https://www.referenseo.com/wp-content/uploads/2019/03/image-attractive.jpg,, khangssite.com,, Khang Le
https://i.redd.it/jeuusd992wd41.jpg,, suessite.com,, Sue Sneed
https://picsum.photos/536/354,, catssite.com,, Black Cat
</div>
<template id="art-template">
<span class="art-item">
<p>
<a href="${LINK}" target="_blank">
<img src="${IMG}" alt="" />
<br>
${CAPTION}
</a>
</p>
</span>
</template>
Javascript
window.onload = function LoadTemplate() {
// get template data.
let sRawData = document.querySelector("#template-data").innerHTML.trim();
// load header and data into arrays
const headersEnd = sRawData.indexOf("\n");
const headers = sRawData.slice(0, headersEnd).split(",,");
const aRows = sRawData.slice(headersEnd).trim().split("\n");
const data = aRows.map((element) => {
return element.split(",,");
});
// grab template and container
const templateHtml = document.querySelector("template").innerHTML;
const container = document.querySelector("#template-container");
// make html for each record
data.forEach((row) => {
let workingCopy = templateHtml;
// load current record into template
headers.forEach((header, column) => {
let value = row[column].trim();
let placeholder = `\$\{${header.trim()}\}`;
workingCopy = workingCopy.replaceAll(placeholder, value);
});
// append template to page, and loop to next record
container.innerHTML += workingCopy;
});
};
New version on github:
https://github.com/johnaweiss/HTML-Micro-Templating
Requirement
As specified in the question, this solution is intended to optimize the coding experience on the HTML side. That's the whole point of any web templating. Therefore, the JS has to work a little harder to make life easier for the HTML programmer.
The question seeks a reusable solution. Therefore, JS should be ignorant of the template, fields, and data-list. So unlike #MisterJojo's answer, the template and all data are in my HTML, not javascript. The JS code is generic.
Design
My solution is based on the <template> tag, which is intended for precisely this usage. It has various advantages, like the template isn't displayed, processed, or validated by the browser, so it has less impact on performance. Programmer doesn't have to write an explicit display:none style.
https://news.ycombinator.com/item?id=33089975
However, <template> tags are normally only intended for loading content into the layout. That's inadequate. This tool allows template variables anywhere in the HTML, including inside the tags (eg attributes like <img src).
HTML
My HTML has three blocks:
template: The HTML coder develops their desired display-structure of the output, in real HTML (not plain text). Uses <template>
data: The list of records each of which should be rendered using the same template. Uses <span> with a HIDDEN attribute.
container: The place to display all the output blocks. Uses <span>.
Template
My sample template includes 3 placeholders for data:
${LINK}
${IMG}
${CAPTION}
But of course you can use any placeholders, any number of them. I use string-literal delimiting-style (although i'm not actually using them as string-literals -- i just borrowed the delimiter style.)
Data Element
The question specifies data should be stored in HTML. It should require minimal keystrokes.
I didn't want to redundantly retype the fieldnames on every row. I didn't use slotting, JSO, Jason, or XML syntax, because those are all verbose.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
It's a simple delimited list. I eliminated all braces, brackets, equals, parens, colons etc.
I put the fieldname-headers only on the first row. The headers are a visual aid for the HTML developer, and a key for Javascript to know the fieldnames and order.
Record Delimiter: End-of-line
Field Delimiter: Double-commas. Seems safe, and they're easy to type. I don't expect to see double-commas in any actual data. Beware, the developer must enter a space for any empty cells, to prevent unintended double-commas. The programmer can easily use a different delimiter if they prefer, as long as they update the Javascript. You can use single-commas if you're sure there will be no embedded commas within a cell.
The data block is hidden using the hidden attribute. No CSS needed.
It's a span to ensure it takes up no room on the page.
JAVASCRIPT
Data
The data is processed by Javascript with two split statements, first on newline delimiter, then on the double-comma delimiter. That puts the whole thing into a 2D array. My JS uses trims to get rid of extra whitespace as needed.
Place-holder Substitution
Handling multiple entries requires plugging each entry into the template.
i went with simple string-replacement instead of string literals.
Multiple Templates
New version which supports multiple templates, and ability to use same template in multiple locations on same page.
https://github.com/johnaweiss/HTML-Micro-Templating
Future
Inspired by #MisterJojo, an earlier version of my solution used template literals to do the substitution. However, that was a bit more complicated and verbose, and seemed to require use of eval. So i switched to .replaceAll. Yet template-literals seems like a more appropriate method for templates, so maybe i'll revisit that.
A future version may adapt to whatever custom field-delimiter the HTML developer uses for the data block.
The dollar-curly delimiter for placeholders is a bit awkward to type. So i'm interested in finding a less awkward non-alpha delimiter that won't conflict with HTML. Considering double-brackets or braces [[NAME]]
Maybe there are simpler ways to pull the data-table into JS.
I've read components work well with <template>, but i didn't go there.
Imo, the JS committee should develop a variable-placeholder feature for <template> tags, and natively accommodate storing the data in HTML. It would be great if something like this solution was part of the rendering engine.
I'm very new to html and CSS, been learning on the go to update a website.
I understand how you can use CSS to store styles so that you can apply styles to multiple elements/pages with ease, and changing the attributes in a CSS style will automatically change all the html styles it governs across multiple pages.
I was wondering if you are able to do this somehow with actual html content instead of just style attributes.
Example: We have heaps of project pages, at the end of every project page we have a table with a bio of the manager who ran the project. This html code is manually written into every page. Since it is manually written though, if you ever want to change or update the info in bio table, you will have to go through and manually update it on every page. Is there a way to have the info in the bio table stored in something similar to a CSS stylesheet, so it just links to every page, and updating the info in the stylesheet will automatically update the info on every page it is linked in.
Code something like:
CSS
.personAbio {
<table><tr><td>Name</td>
<td>Sales Last Week</td></tr>
<tr><td>John</td>
<td>$100</td></tr>
</table>
}
Html
<table class="personAbio">
</table>
There are several ways to accomplish what you need.
Statically include content
The first way is by using (as already suggested) some server-side language.
Using PHP it's simple as, say we're inside your project_8.php (notice the PHP extension!) you simply place this PHP code where you want the about content to appear:
<?php include "about.html"; ?>
Dynamically include content
There's also a dynamic way to accomplish the same using JavaScript and AJAX.
For sake of simplicity hers's how it's done using the jQuery library:
<div id="hereGoesTheAbout"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$("#hereGoesTheAbout").load("about.html");
</script>
The above two <script> tags are best placed right before the closing </body> tag.
Including content dynamically is crawlable by Googlebot, just, a small penalty is given (over the static implementation) - since the additional requests to retrieve the content.
The difference is that using a server-side technique the content is found and embedded into a page while still on the server.
Using JavaScript and AJAX (like in the example above) the page arrives to your browser and than JavaScript dynamically sends to the server a request for the desired content to include.
Not a good way to insert content is by using <iframe>. It's terribly complicated (and involves lot of JS and messaging techniques) to make it responsive.
Also search engines will not index such content so it's not good for your page SEO.
Winner
Static include. Using the same technique you can split your website architecture into manageable includes.
Say you have some product.php template page, and you have all your products inside a folder products/ as files like 000.html to 999.html.
By just linking to example.com/product.php?pr=233 you can get your 233.html product:
<?php include "header.html"; ?>
<article>
<h2>Product:</h2>
<?php include "products/{$_GET['pr']}.html"; ?>
</article>
<aside>
<?php include "about.html"; ?>
</aside>
<?php include "footer.html"; ?>
with the above what you have:
one product.php file template (for all your products)
only one header.html file
only one footer.html file
only one author file
one products/ folder with all your nnn.html products contents.
You are looking for a back end coding language like PHP.
No you can't.
But you can use JavaScript instead to store your data and then bind them into the table.
For exemple:
html:
<table class="personaBio">
<thead>
<tr>Name<\tr>
<tr>Sale of the last week</tr>
</thead>
<tbody></tbody>
</table>
JavaScript/JQuery
var persons = [{name:'John', saleLastWeek:'100'}];
persons.forEach(function(person) {
$('tbody').append(`<tr><td>${person.name}</td><td>${person.saleLastWeek}</td></tr>`);
}
This is an exemple, I am on my phone, I didn't try this code.
You need to learn JavaScript or Jquery.
As already mentioned, you can do it server-side, using a number of approaches:
Server-side includes
Any server-side language/frameworks: PHP, Ruby, Python, Java, etc.
You can, however, also do it on the client side:
With <iframe>: <iframe src="managers/john.html">
With Javascript:
Put all manager bios into, say, manager-bios.js:
var managerBios = {
"john" : { "fullName": "John Doe", "projects": ["a", "b", "c"] ...}
"jane" : ....
}
Reference it in the html: <script src="manager-bios.js"
Reference corresponding manager on the page: <div id="responsibleManager" data-manager="john">
On page load, populate manager's data (I'm using jQuery here):
$(document).load(function() {
var managerId = $("#responsibleManager").data("manager");
$("#responsibleManager").html("<div>" + managerBios[managerId].fullName + "</div> Projects: " + managerBios[managerId].projects.join(","));
}
Load data from external source with Javascript (again, using jQuery here, assuming same html as above):
$("#responsibleManager").load("managers/" + $("#responsibleManager").data("manager") + ".html");
I am trying to display chunks of HTML from a DB, and sometimes it is a portion of the entire HTML page, so may be invalid, since I may be returning the first 500 chars. I may get:
<h1>test</h1><div id="
At present this corrupts the containing page.
Can this be wrapped up in someway, by some tags, such that it does not corrupt the containing HTML.
My initial idea was something like:
<div>
<h1>test</h1><div id="
</div>
However this does not work.
Also it would be ideal if any valid HTML did work as expected, so the above would look like:
Test
It may not be possible, but I thought I would ask.
I am not aware of what Server Side/Client Side language you are using, but I assume you are using PHP, you need to use strip_tags() to strip all the HTML text first, and than try echoing it..
<p class="static_wrapper">
<?php echo substr(strip_tags($fetched_row['column_name']),0,100).'...'; ?>
</p>
First a bit of background information. I create HTML emails at my work place and the whole process is very tedious. It goes a little little like this...
Code markup for HTML using tables and some CSS
Parse HTML and CSS using Premailer so all CSS is inline
Test HTML works in all email clients
Create a copy of the inline version of HTML and start adding in proprietary variables to email tool used for sending emails, ie <%=constant.first_name%>, <%=unsubscribe_link%>
Test in email client to see if it works and client is happy. If not repeat steps 1 through 5 again.
So as you can see it gets really tedious after a while.
What I would like to do is create a command line script similar to Premailer which allows me to parse a HTML file with variables stored in it without destroying the example text already in the HTML. That way when you are previewing the HTML it all looks dandy.
For example...
Store the first name function as a variable for own use.
$first_name = "<%=constant.first_name%>
Then tell the parser what word(s) to replace with the appropriate variable.
<p>My name is <!-- $first_name -->Gavin<!-- /$first_name --></p>
So that the final output looks something like:
<p>My name is <%=constat.first_name%></p>
Would such a thing be possible? Is there a better syntax I could, a custom tag like <first_name>Gavin</first_name>, if the browser can handle it.
Any advice is helpful. :)
I've seen this done before using a syntax like:
{assign_variable:first_name="Jesse"}
Then, you could use it like:
{first_name}
The way you'd parse this (provided you're using PHP) would be something like:
<?php
// Our Template Code
$strHTML = <<<EOT
{assign_variable:first_name="Jesse"}
{assign_variable:last_name="Bunch"}
Hello, {first_name}!
EOT;
// Get all the variables
$arrMatches = array();
preg_match_all('/\{assign\_variable\:([a-zA-Z\_\-]*)\=\"([a-zA-Z0-9]+)\"\}/', $strHTML, $arrMatches);
// Remove the assign_variable tags
$strHTML = preg_replace('/\{assign\_variable\:([a-zA-Z\_\-]*)\=\"([a-zA-Z0-9]+)\"\}/', '', $strHTML);
// Combine them into key/values
$arrVariables = array_combine($arrMatches[1], $arrMatches[2]);
foreach($arrVariables as $key=>$value) {
// Replace the variable occurrences
$strHTML = str_replace('{' . $key . '}', $value, $strHTML);
}
// Send the parsed template
echo $strHTML;
Which outputs:
Hello, Jesse!
Note, this is a very basic example. Here are some improvements to make on this code before using it in production:
Edit the regex to allow the right characters.
Maybe implement a better replacement method than a loop
Check for parse errors
Benchmark performance
All in all, I think you get the idea. Hope this points you in the right direction.
I have a similar situation
I have created a "format template" like this:
<?php // section1 $var1/$var2 ?>
<head>
<title>$var1</title>
<meta name="description" content="$var2">
</head>
<?php // section2 $var1/$var2 ?>
<body>
hello: <p>$var1</p>
news for you: <p>$var2</p>
</body>
it is valid php code and valid html code, so you can edit it with dreamwaver or similar, and you can host it also.
then a php script replaces all ocurrences of vars in all sections.
I do a lot of slicing in Photoshop, and it's tedious to manually write an <img /> tag for each of them -- writing in the filename, checking height and width, writing the alt tags, etc.
I can use Photoshop to generate the HTML, but they usually muck it up by not producing XHTML, or by wrapping it in tables, and so forth. I'm trying to make my life easier than that.
So I'm wondering if anyone uses a script that automatically generates img tags based on the directory? Or if some IDE that I don't know about does this? I just want it to generate a bunch of tags like so:
<img src="{filename}" alt="" width="{width}" height="{height}" />
First I want to commend you on having width and height information in an image. It's very good that you do this, everyone should do this. You could use any scripting language such as Python or PHP to do this with an image library such as imagemagick or gd. Without knowing what language or tools you're using to run your site I can't really provide an example.
In Python, using a template system you might do something like this:
<div>
<% addImg("/images/myImage.png") %>
</div>
Which would generate the right image tag:
<div>
<img src="/images/myImage.png" alt="MyImage" width="200" height="100" />
</div>
Somewhere in your python you define:
def addImg(imgPath):
#do image processing here
If Photoshop does a decent job of this, it may be easiest to just process the output from there, using a regex or something to fix the problems in it. This would probably be simpler than trying to reimplement that functionality from scratch.
If you can post a sample of Photoshop's HTML output, I can supply a regex search/replace that'd convert it to what you're looking for.
Made php script:
<?php
$images = scandir('images');
$txt = '';
$tmpl = '<img id="{{id}}" src="images/{{name}}">';
foreach($images as $image) {
$tag = $tmpl;
$tag = str_replace('{{id}}', explode('.', $image)[0], $tag);
$tag = str_replace('{{name}}', $image, $tag);
$txt .= $tag . "\n";
}
file_put_contents('tags.txt', $txt);
Create a php file and run it:
php script.php
Php script has to be in same directory as images folder.
You will get your image tas in tags.txt file.