I'm building a simple personal static webpage. It'll be 4-5 pages (maybe more later) that all share a nav bar and header design at the top of the page.
I don't want to repeat the HTML and CSS for the navbar/header at the top of every page - ideally I'd like it all in one place.
If I were creating this using a web framework like Django, Sinatra, Rails, etc... I could use templates and partials to build the page using shared components like the navbar/header.
But I'm trying to keep things as simple as possible since it's a small set of static pages.
Is there a way to keep all the HTML in one file and reference it from the other files?
If not, is there a simple tool that will let me leverage the functionality that partials and templates provide, and just "compile" the final product into a series of HTML pages?
Thanks!
Use a one main Html file with all navigation bars, footer, menu and etc.
Keep a blank place, for example a blank div in the main page.
Keep other html pages in a separate place.
Load the contents dynamically to the blank div in the main page using javascripts.
Related
I'm creating a new website and I will have different pages on it. However, instead of creating new HTML files for each page and an anchor for each, I want all my pages contained in one HTML file. Is it possible in any way?
You can try Vue js or React js or many js frameworks ... which contain components.
Using HTML
You can control HTML page section how tabs working in HTML, take a look in Bootstrap Tabs, or you can hide/show sections using CSS or using JS, you may store HTML for each page in array of js and load that HTML to Body based on URL you create
Using Server Side Language
Also if you need single page application with multiple pages you need a Server Side language, where Database contains your website configurations and you can load based on the URL each page's layout or text like heading forms etc...
I'm using Django to handle my templates. From the picture I am trying to explain what I want in the web page. For convenience I have given the number for the blocks in the picture. I have created blocks 3,4 5,6, and 7 in one .html file.
I actually want navbar1 and navbar2 to display in every page of my project, and that's why I have to create one separate .html file for each. The problem is that I'm not able to apply two navbars in one html file. I also tried with the sidebar (for navbar2), but have faced some issues.
Dropdown button doesn't work on the sidebar and,
When I reload the page, the menu of the side bar will display first and then the sidebar will overwrite the menu and then visualize properly.
Please suggest to me how I can design the page for navbar1 and navbar2 in one html file.
Creating a base.html template that all other templates inherit/extend from should do the trick. Here's a website post going in depth upon how to accomplish this: https://tutorial.djangogirls.org/en/template_extending/
I'm looking for a way to get media wiki articles/pages into my main website. Our "documentation" is all on a separate website using MediaWiki, we want to embed the pages into our current website's template so it looks like it's apart of our website, as much as possible.
This means not having the navigation, headers & footers, etc. that normally come with a MediaWiki website. As well as possibly skinning it to look like the main site.
It might be worth mentioning the main website is running on Node.js
You could setup a template on your main site. Within the content area of this template you can use the jQuery load function to load the content part (#mw-content-text) of the MediaWiki page.
The code would look like this:
<div id="some-id"></div>
<script>
$('#some-id').load('URL-to-your-MediaWiki-page #mw-content-text');
</script>
I'm working on a company site that's hosted on a separate server from the main site. So, for example, I'm working on guest.company.com, and the main company website is www.company.com, and the two sites are hosted on different servers (and different development solutions).
The project I'm working on has a copy of the css from the main site, and has a shared layout with html copied from the main site. This shared layout is used for the top and bottom (header and footer) of the site I'm working on. However, I don't want to use a copy of that layout and html -- I want to actually pull in the layout & css from www.company.com so that when a change is made to that content on www.company.com, it's reflected on guest.company.com.
So, for example, the bottom "footer" area of www.company.com is contained in a footer html tag, and I want to display that content on guest.company.com.
How can this be done in MVC4 EF?
There is no quick fool-proof way to do this.
The quick way to get the HTML is making a webrequest call from your code and get the html and take what you need from it (i.e. header and footer). Have a look at this msdn link for an example of how to perform this. With that, you don't need "the other side" to do anything.
Having said that, it's potentially more complicated than that. As mentioned in the comments, css path should be made absolute. But there could be images (both within html and css). Also, if header and footer run any javascript, they need to be included in the page as well. You could of course include every single JS file that is referenced in the www.company.com page but there are sometimes JS run on the page. Your webrequest call wouldn't run the JS. In order to make sure all the javascript is run and the FINAL HTML is produced, you can use PhantomJS.
As you have probably noted, it could turn into a lot of work depending on what's on the header/footer. In my experience, a potential solution would be to have an FTP location that www.company.com copies the header/footer and their assets in. You can pull it from there every 24 hours or something.
I have made a homepage in Joomla 2.5, and I need my front page to be different then the page made in Joomla.
My best solution then, is to make the front page in pure HMTL, and then redirect to the site made in Joomla. Is this possible? or is there an easier way to do it? for example with a plugin or something?
Create a custom html page and create it an article and then assign this article to front page. In this way you can display your custom html page to hope page of joomla.
Further if you want to remove even the headers and footers of the joomla page for home page this can be done in various ways
Make module positions and display the header and footer in it an
then in admin do not publish these modules for home page
We have
variable in template index.php which give us flags weather this is
home page you can use this flag and put a condition like if this is
home page dont display the header and footer.
Hope it will help you.
I can't really understand your question. If you want to load HTML only use custom HTML module rendered in your homepage
What are you trying to achieve? Without knowing more, I have two thoughts.
a. Joomla uses index.php. A lot of the time web servers look for index.html first. So if you create an index.html file and upload it to your root folder, it will display that first and not read your Joomla! site. If that doesn't work, check your web server to see the order that it looks for your start page. That is a setting that can be changed. (Depending on your hosting situation)
or b. You can set different templates for a single Joomla! site. you could set a different template for the homepage compared to the rest of the site. (I just need to know more on what you are trying to accomplish)
Have a great one.