My source code repo: link
contact and create ejs files in views folder are exact copies.
Routing is in index.js
app.get('/contact',(req,res)=>{
res.render('contact')
})
app.get('/posts/new',(req,res)=>{
res.render('create')
})
contact page is loading all styles but create page is not loading the styles and css.
If I change the router from /posts/new to /new then loading.
Please suggest how to fix this.
There is a small mistake in the views/layouts/head.ejs file.
You need to change this line of code from
<link href="css/styles.css" rel="stylesheet" />
to
<link href="/css/styles.css" rel="stylesheet" />
This will load the css for the create page as well.
Related
I have a game project based on Svelte. When the homepage opens, I want other pages to load the files as well. For example, when you go to the lobby creation page from the home page, the images are loaded from scratch.
Anyone have experience with this?
You can add preload link elements to the <head> to preload files, they look like this:
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="script.js" as="script" />
Valid as values can be found e.g. here.
(Should be possible to those via <svelte:head> as well, but I never tried that.)
I am quite new to node and I am trying to wrap my head around how the express.static middleware is working. In my views folder I have some href's like this:
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
My application is able to grab these files form URLS's such as localhost/about, localhost/contact etc. However it will not grab files if the end point is something like localhost/form/new. Is express.static getting these static assets from localhost/somefile and when there is a nested URL it defaults to /form/somefile (which won't work)? I am aware that if you put a '/' before vendor it will work from any level, why is this? Thank you.
app.use(express.static(“public”));
That is a way of saying "hey express, look if any incoming requests (like GET /bundle.css matches a file on that directory, if so, send it!".
Any file on that directory, you should be able to access under /. If you're serving from your localhost and have bundle.css on public folder, you can visit http://localhost/bundle.css.
Any asset you're trying to get from public folder, should start with / meaning look for an absolute path (in this case, the path public folder is serving which is /).
Update
There is another way of doing that using relative path which is not recommendable.
If you're in /about/index.html and you're trying to get /css/bundle.css (under public's folder)
Absolute Path:
<link rel="stylesheet" href="/css/bundle.css">
Relative Path: (not recommendable)
<link rel="stylesheet" href="../css/bundle.css">
The only thing to keep in mind is to make a slash mark before the static file address.
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/css/style.css" type="text/css">
If you do not put this slash before the address, you will have a problem loading styles, images, etc. in the nested addresses.
For example, if you use the following addressing instead of the above operation, you will definitely have problems in the nested URL.
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css" type="text/css">
This is especially useful on page 404.
When my ejs file is linked to a semantic ui, the second .css link doesn't work. Is it possible to change html and body background color using semantic-ui?
I linked these two css files:
<link rel="stylesheet" type="text/css" href="semantic.min.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
In homepage.css, when I type html {background-color:pink} this doesn't have any effect. What am I missing?
Not exactly what your asking for but could be a workaround.
If you were to edit site.variables which is usally located at: semantic/src/site/globals/site.variables
And add an entry #pageBackground: #5CDB95; and change the #5CDB95 to a colour of your choice, that will then be the default background colour of all pages where you include semantic ui.
After your entry dont forget to run gulp build-css
Hope this is of some help... Not sure why your css isnt overriding sematic ui, I know it sounds stupid but check you have included the <html> tags in your file.
I'm using the linkedIn fork of Dust with Node.JS & Express.
My template hierarchy is having:
1 layout template - The base template
1 Page template - This is the template that will be rendered
Optional number of partials - Might be included by the page template
layout.dust (layout template):
<html>
<head>
<script src="/js/layout.js"></script>
<link rel="stylesheet" href="/css/layout.css">
<script src="/js/home.js"></script>
<link rel="stylesheet" href="/css/home.css">
<script src="/js/sidebar.js"></script>
<link rel="stylesheet" href="/css/sidebar.css">
<script src="/js/widget.js"></script>
<link rel="stylesheet" href="/css/widget.css">
</head>
<body>
{+content}{/content}
</body>
</html>
home.dust (page template):
{>layout/}
{<content}
<div>
{>sidebar/}
</div>
<div>
{>widget/}
</div>
{/content}
When the user visits the website homepage, then home.dust will be rendered, and the user will see a page with the sidebar and some widget. The content of sidebar.dust and widget.dust is irrelevant.
As you can see in layout.dust, there are 4 sets of JavaScript and CSS included in the head section, one for each of the templates and partials. My problem is finding a way to automatically include each asset into the layout (without hardcoding). Ideally I would like to be able to just do this:
{#scripts}
<script src="{.}"></script>
{/scripts}
Different pages may require different assets.
How can I push each script source path into the context of layout.dust?
What do other developers do, do they just hardcode them?
I'd be adding all scripts to the head of the layout without pushing any from the pages that extend from this layout. I'm not sure how knowledgeable you are on javascript minification but it's common practice to bundle all (or most) of your javascript assets into one file and serve them up to the user with a single HTTP request. This speeds up your page a lot; checkout what Google has to say about it here.
It's not hard because there are a few tools to do this for you automatically. You could go for an asset manager or Grunt.
ASSET MANAGER:
There are a few on npm. I found one called Express Asset Manager and another called Asset Pipeline.
GRUNT:
Use contrib-uglify and contrib-concat to handle you minification. There are plenty of others that you should find useful. You can do the exact same thing with all of your CSS too.
Obviously in development you don't really want to try to debug minified code so you can do something like the following:
{?production}
<script src="production-minified-script.js"></script>
{:else}
{#scripts}
<script src="{.}"></script>
{/scripts}
{/production}
where production is a variable passed to your template from process.env.NODE_ENV. To avoid manually adding in each script, you could pass them in as an array by
STILL WANT TO ADD FROM OTHER PAGES?
If you still want to add from other pages, add in a block to your head below your main scripts, something like:
{+otherScripts}{/otherScripts}
I am using Icefaces in my web application. I want to override some styles that are defined in xp.css.
Create your own css file, eg. style.css.
Put it into your web pages directory, beside the WEB-INF directory.
Reference your css file in the head tag of your xhtml file(s)
You can reference it the following way:
<link href="style.css" rel="stylesheet" type="text/css" />