I have built a website (using GitHub pages) which contains a lot of sub-pages. Almost each one of these pages contains the following same content, e.g. footer part like this:
<footer id="content-info" class="container" role="contentinfo">
...
</footer>
My question is: how to extract this shared same part out to a separate file for reusing? Then I can simply somehow include this file wherever I need to contain the footer part. If this is possible, I can easily edit this part once and all pages that contain it will change automatically.
GitHub Pages supports Jekyll, a static site generator. Jekyll uses Liquid templating under the hood. You should be able to leverage the templating even without the static site generation.
Here is more info on Jekyll: http://jekyllrb.com/docs/home/
To get Jekyll to process with GitHub Pages, you probably need to add a _config.yml file. More info on that here: http://jekyllrb.com/docs/configuration/
Then once Jekyll is processing your .html files, you can use a simple templating syntax to include content form other files.
Example:
<!-- html here -->
{% include footer.html %}
<!-- more html here -->
This will include the contents of _includes/footer.html by default. More info on template includes here: http://jekyllrb.com/docs/templates/#includes
I hope that helps!
You could simply copy the content of the div to a php or html file and call it from each page using
<?php include 'footer.php'; ?>
That way when you change footer.php it'll update across the site.
Your pretty much right on the money, take the code snippets you want to reuse and save them as seperate files.
Then use
<?php include_once ("file location/filename.extension"); ?>
to include that file :D
##### html file
<html>
<head>
<title>Title</title>
</head>
<body>
<p>content here</p>
<?php include_once ("file location/filename.extension"); ?>
</body>
</html>
##### include file
<p>copyright by me<p>
Related
Is it possible to generate let's say, two files (index1.html and
index2.html) from one markdown file (index.md)?
Or can I add HTML, CSS only for viewing the HTML files in my Browser
(don't want to use a browser plugin)?
I want to use Jekyll to generate .html snippets, which can be stored on AWS S3 and included on my website. For that purpose I don't need HTML tags like <DOCTYPE>, <head>, <footer> etc. because they are already on my website. But I require them to view the final .html document in my browser.
Some other ideas I thought about but also couldn't find a solution:
add a second .md file and include index.md, so the content is the
same
duplicate the index.html file and strip head, footer ... with another
program
I couldn't find any solution anywhere, but it can't be, that I'm the only person having this problem. I also couldn't find a Plugin to resolve that issue.
Edit:
At the moment I get this .html when I run bundle exec jekyll serve
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/css/styles.css" />
...
</head>
<body>
my_body_content
<footer>
</footer>
</body>
</html>
but I only want the .html file to contain this:
my_body_content
But of course when I try to view this .html file in my Browser for editing purposes no styling is applied.
But I require a styling to view the file in my Browser verify that content of the .html file is rendered correctly before uploading it to S3 and fetching it on my website where my website styling will be applied.
For my school I have to work 1 month in a company. I'm making a website and one of the requirements is that I only make 1 Navigation that I use on every HTML page.
Obviously I want to do it myself without asking the company to help me, but after looking an hour i didn't really find a good solution.
I rode some stuff about php, but whenever I add it in my HTML it doesn't do anything. Someone that could help me?
One Nav HTML Page for all my HTML Pages so when I edit 1 thing it changes for every HTML Page.
you could maybe get it working with <iframe> i believe i used that back in the day for a site (code was so dirty looking)
I would recommend using php, your directory would look like this
map
|-index.php
|-nav.php
Inside the index.php you want to use include
index.php
<html>
<body>
<?php include 'nav.php'; ?>
<h1>super awesome site</h1>
</body
</html>
nav.php
<nav>
my nav bar
</nav>
Now because you are using php you can't just open the file in your web browser, you will need to run a web server directed to this file or use php -S localhost:8080 to start a local test server in the current directory
if you have any questions don't hesitate to ask
edit: put nav.php in qoutes
You can use PHP
<?php
include 'nav.php';
//body
?>
Get Started with PHP: http://php.net/manual/en/tutorial.php
Install PHP: https://www.cloudways.com/blog/how-to-start-php-programming/
Well you can do you custom nav in a separated HTML file and attached it to every page of your website and for the PHP to work
your file should be .php file and placed on a server which is created to run php files such as Apache server.
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
as you see here the footer is seprated HTML file which u can use at every page of your project :).
<html>
<?require('header.html');?>
<!-- page content -->
<p>Welcome to the home of TLA Consulting.
Please take some time to get to know us.</p>
<p>We specialize in serving your business needs
and hope to hear from you soon.</p>
<?php
require('footer.html');
?>
</html>
This is my code and it can't show the header when i open it in browser.
i had found many ways online still cant solve the problem.
youre missing <?php. it should be like this :
<?php require('header.html');?>
and make sure your page extention is .php
if your use heade.html and footer.html file include in .html file so its not work
because html page doesn't support php code so save your page in .html to .php and run again
and also change
<?require('header.html');?> to <?php require('header.html'); ?>
I have a site with nearly much pages with the same look. the only difference is the content of them. each page is stored in an HTML file.
The problem of the site is that during maintenance (i.e. for changing the site theme and look) the CSS is done very nice (because all the pages are linked to a single CSS file) but changing a small <div> block can be really annoying to apply individually for all of the pages.
Is there any other way to use to avoid this? like a theme for a blog.
My own idea was to place the new page contents (section part) into a bare HTML page and place it in the site's homepage using <iframe> then I will only have one page that is the main page. and posts are loaded into an <iframe> in the section part of the main page.
But this would reduce the site's SEO. because of having only one page.
What else can I do?
I want to do the same thing a separate CSS file does to the page style, to the htmls content. I want the theme to be unique in all the pages. and if changed, the changes applies on all of the pages.
There are a few ways to do this:
1) PHP: Using PHP, you can simply include an html file into another one
<?php include('fileOne.html'); ?>
2) jQuery: Using jQuery, you can load an HTML page dynamically into another (this is kind of hacky in my opinion):
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Source: Include HTML Page via jQuery
3) Framework: Using a framework like Python/Django, you can use {% include %} blocks to create standalone html files that can be reused like blocks.
<html>
{% include 'navbar.html' %}
</html>
My honest recommendation is #2 if you have to stay with just raw html, otherwise, if you are using PHP then includes are a no brainer. The last option is the frameworks, and that is really only if you have other heavy-duty functions you would need.
I would like to be able to use something similar to a stylesheet but with HTML so that I only have to edit one set of code to edit the toolbar's HTML code across multiple pages. Is there a way to use a tag or something to import HTML code into the body section,
You can try to type out your navigation bar / header in a html page, save it has header.php and then in all of your other pages (for example index page), type in
<?php get_header(); ?>
at the beginning to grab the header. Make sure the header.php is in the same folder as your other files (for example index.php)..
Let me know if it does or doesn't work.
Your best bet is to make sure your server has PHP installed, then use include
<html>
<body>
<?php
include "toolbar.html";
?>
</body>
</html>