I'm working on Webpack/Gulp enviroment, and I wanna add function to include HTML partials like header and footer inside other page views.
The best solution for this will be like in PHP, include file and it's fine.
I used html-webpack-plugin, html-loader and gulp-file-include but this not working for me or this build one file from this partials and on development mode on local server i can't look to results because this partial before build not working.
Someone maybe have a solution or think for this?
Related
What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.
So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.
What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.
What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.
What are you testing on?
hugo-coder and(or) hugo-academic
Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.
Do let me know if its possible and worthwhile to pursue this and any references that might help.
So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.
I got something working by doing the following -
I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -
[[menu.main]]
name = "CustomHTML"
url = "CustomHTML/index.html"
weight = 50
hugo serve And it worked.
Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.
EDIT
Looks like the Hugo folks also suggest doing the same way.
I'm designing few pages in HTML using Jade. I've problem while compiling common areas of the pages. Header, Footer, Navs etc. How do I create a template files and include it the files or how do I create a layout to use in all files?
I'm very new to Jade and couldn't find something related to creating a layout or templates to use.
In PHP for example you create header.php, footer.php and nav.php and include those in the files. One change affects all the other files. How to accomplish something like that in Jade?
P.S. I'm not using Node.js or Express.
You should have a look at the extends function in jade, that will allow you to extend the different files. Like include in php.
http://jade-lang.com/reference/extends/
im planning to do something using bootstrap, where i will split the .jsp in 2 divs, the top one is the menubar.jsp and the other is the contentclicked eg:
start.jsp
<div id="menubar"></div>
<div id="content"></div>
when the users get access(after a login) and go to the http://www.localhost.com/restrict/start
it will run this .js
$(document).ready(function(){
$("#menubar").load("restrict/menubar");
});
the /restrict/menubar is because i have a file called menu.jsp that have the bootstrap code of the menubar
and for each link that the client click in the menubar it will do:
$("#content").load("restrict/linkCliked");
and for each link i will have a linkCliked.jsp
it seems to work, BUT i dont know if this is a good way and secure, because if the use write the uri http://www.localhost.com/restrict/linkCliked, he will get just the linkClicked.jsp, but i want it to render the menubar.jsp too without, is there any solution that i dont have to "include" in each .jsp the menubar?
obs: using VRaptor MVC
Your system seems OK. If you are concerned about the HTML URI being pointed to incorrectly, you can keep your templates in a separate folder than your bootstrap. If your setup is like so:
/var
/var/www
/var/www/html <- your web
You can add a new folder:
/var/www/template
And put linkClicked.jsp and menubar.jsp into that folder, calling them. A user will not be able to type in an address to get to those paths and you won't need to do any funky redirection in your server configuration either.
I finished my Ruby on Rails project and I get extra credit for making it "look good." I made an HTML template with some images and css styling on my local machine (not the RoR server). I've tested it out in plain HTML and it looks good.
I can't figure out how to incorporate it into my RoR project though. I thought i'd be able to create a directory in my views, called "images" to hold the images for my template.
Before transferring all of the code for my RoR to the tags for my template, I wanted to make sure the images were in the right location. I added to my index.html.erb file, but it won't display. I tried moving that images directory to a few other directories and tried again, same thing!
I thought it would be easy to incorporate a template haha but now I'm thinking not?
Is there a way to simply do this like an ordinary HTML website?
There are two main options for this...
You can use the asset pipeline and serve up assets from a location like app/assets... So, app/assets/images.
You can put them in public/images and just serve them up that way as well.
If you feel like learning a bit more, I'd dig into the asset pipeline. If you're just ready to be done, public/images for a small project should work just fine. :)
I got a realtive big project for what I have many plain HTML pages. All the pages have the same template, but when I change one value in the template I have to change all the other pages manually.
Is there a way to do it like less for CSS or CoffeeScript for JS?
Lg Knerd
If all you have are plain HTML pages you could use SSI although it is a bit dated and youll need to be running this on a web server like Apache.
http://en.wikipedia.org/wiki/Server_Side_Includes
Personally I would use php so I could just include the files with the php include function