Enter image description here
It's OK that I can get files in directory public when get localhost:3000/movies, but if I add / to the end of URL, that is localhost:3000/movies/, something goes wrong, the CSS file in public cannot be get. How do I solve this problem if I want to visit localhost:3000/movies/moive with CSS style?
When you are at localhost:3000/movies, think of being in "folder" / and viewing "page" movies. If you are in localhost:3000/movies/blah or in localhost:3000/movies/ then you are viewing pages blah (or / respectively) in the movies location.
The above is true regardless those "pages" exist or not; most likely you just have express route handlers and jade templates structures differently -- but the rationale works for the browser and the requests to absolute URLs it will be performing.
So I cannot say what is wrong without looking at your pages code, but make sure all relative paths (e.g. linking to a CSS file foo/bar.css) are valid from all locations, or alternatively use absolute locations (e.g. /foo/bar.css).
Related
In modern Website usually hidden path.
use this
https://google.com/main
instance of this
https://google.com/main.html
but I want to ask why they chose to hidden the file path.
I know that Initial web was use this file path.
But if they chose to cover up it, I think there was some reason.
Because of they just think it doesn't look good?
Or is there a security issue when using a file root?
in tranditional website.all content on the page is static and write in html file.so we can fetch and show the page directly by browser.
in modern internet,the content we browse is dynamic,for example we browse a news page,the content changed every second,so the server handle our request by some function not handle by a static html file,the function always print out latest news,so it is dynamic,not a unchanged static html file.
I am using pug as the view engine of a nodejs application. I have a layout that every other current view extends, that contains a navbar with links to common urls across the app.
For example, a link to the signin url would look like :
a(href='/auth/signin')`
This works fine from the root url ('/'), correctly leads to '/auth/signin'.
Within the '/auth' module which contains the routes for '/auth/signin', '/auth/signup' and '/auth/signout', the behavior is different. Instead, the route is concatenated with the current module's name. So for example, within the '/auth/signin' route, the link is actually a link to '/auth/auth/signin'. Clicking on it naturally leads to a 404, but on that page the link to signin is a link to '/auth/auth/auth/signin'.
And so on and so forth.
I don't fully understand what is going on here and how to prevent it. Is there away to link to my routes in absolute terms in pug without straight up typing the full url (which is unpractical for a variety of reasons), the same way you'd use a route helper in Ruby on Rails ?
Solution from the comments:
If you start your href's with a slash then these are interpreted as absolute url's. Then it does not matter in which folder your pug file is located. Please check that your href's start with / always.
I'm using Bootstrap files within my application and I want to enable "Use runtime optimized JavaScript and CSS resources".
the problem I have is once enabled; glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg and glyphicons-halflings-regular.woff cannot be found:
I know for Bootstrap 2.3 we could use a Theme that loads a .CSS file that changes relative locations as described here http://www.bootstrap4xpages.com/bs4xp/site.nsf/article.xsp?documentId=F435B6DC54486B67C1257B6B002E5A6C&action=openDocument
So, what should I do to handle relative locations with Bootstrap 3?
You have to tweak the path to the web font resoureces in the Bootstrap CSS files.
Delete the part with "../" and replace it with the relative path to the font files within your project structure, e.g.
bootstrap/fonts/...
Then aggregation will load the fonts correctly.
This does not answer your question but if you want to use Bootstrap 3 you'd be MUCH better off using the Boostrap4Xpages project on OpenNTF.org. It will perform better and the resource aggregation will work better. It's easy to install and use but it is a plugin on the sever so that needs to be done. It's not self contained to the NSF. Try and move to this if at all possible.
Regarding the actual question. I'm not sure I know the answer specifically. I do know that using relative links can sometimes be a problem if the browser's URL doesn't have the page.xsp portion. So it works on the page.xsp and NOT the default launch XPage where the URL ends with the database.nsf. What I've done in the past there is set the application to launch to something like "start.xsp" and in that page in beforePageLoad to a redirect to "home.xsp". This forces the browser url to always show the page name and made life a little easier when dealing with adding projects to WebContent.
I've got an express.js app currently using ejs (using jade for newer projects) and I'm trying to solve a problem in a clean and appropriate manner.
I've got a layout.ejs file with my header and footer in it. Most of my site so far has been one layer deep http://innovationbound.com/about or /services or /amy and so on....
I'm beginning to created online courses at http://innovationbound.com/courses/course-name and the issue I'm having is that these course pages can't reference the images the same way. <img src="images/linknedin.png" alt="LinkedIn Icon"> for instance.
From the course-name page it tries <img src="courses/images/LinkedIn.png" alt="LinkedIn Icon"> and obviously can't grab the image there.
Is there a setting in express, or something obvious I'm missing? I hope I don't have to use absolute urls, that just makes developing on the local machine insane.
Just use site root–relative paths. For example <img src="/images/linknedin.png" alt="LinkedIn Icon">. Note the / makes the difference.
There are three types of link paths:
Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
Document-relative paths (such as dreamweaver/contents.html).
Site root–relative paths (such as /support/dreamweaver/contents.html).
From Adobe.
You might consider it, but you can use "../images/link(n?)edin.png". However, I'd recommend to use absolute path, because images should be stored in /public (in general jade setup) and your path depth could be varied by your route rule.
As a tip, if you lost in relative path of image, right click on broken image and see a URL in properties on web browser. It'll give you a hint of where the image is.
i updated the code from my website to a 'better' veersion i think,
it works fine but when i try to implement the friendly URL and load it, works, but with no CSS, Javascript or images,
but if i corret the routes for the css to http://website/css/style.css (instead of ./css/style.css) it i do see the CSS properly loaded,
any idea why?
Example: http://keepyourlinks.com/link1.php?id=25 VS http://keepyourlinks.com/keep/25/series-yonkis
(i updated the route of the CSS, but the Javascript is missing an the images asweell)
I really would like not to have to correct al routes :(
./ means the current directory, which isn't where the file is, so it doesn't work.
Your best bet is to start using paths relative to the root of your site from now on, every time you write a link to a stylesheet or javascript or image, on every site. It always works and saves you from problems like this.
/css/style.css points to the same URL no matter what directory the current page is in.