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.
Related
this seems like a very stupid question, but I really can't figure out how to do my navigation links properly.
I'm using express.js with handlebars as view engine.
My backend.handlebars has a naviation bar and loads in every sub-page of my backend under "/admin". It looks like this:
<nav>
Dashboard
Add Post
Edit Post
Categories
Static Text
</nav>
Now the correct routes are:
[server-adress]/admin/ for the dashboard
[server-adress]/admin/add for adding posts
[server-adress]/admin/edit for the editing posts
etc.
Now the way I've setup my links sometimes works and sometimes doesn't.
Sometimes every link works correctly when I'm in a sub-route like "admin/add" and want to go to "admin/edit".
Sometimes every link works when I'm under the main "admin/" to every sub-page, but not the other way around.
And sometimes everything works as intended, mostly when I delete the dot in front of the slash and then add it back end, restarting both times.
This obviously is too much of a gamble when deployed. As I don't know the absolute adress due to changing servers, I can't use absolute paths.
How do I go about this correctly?
I have a page Index that has two optional parameters: FolderId and OrganisationId.
If I use #page "{OrganisationId:int?}/{FolderId:int?}" at the start of the razorpages page to make nicer URLs then it becomes impossible to remove a parameter from the URL. The behaviour of the URL helpers changes.
For example the browser is at /Index/1/4 and I want to make a link to /Index/1. The code for the link ought to be
<a asp-area="Files" asp-page="/Index" asp-route-OrganisationId="#Model.Organisation.Id">#Model.Organisation.Name</a>
This works for #page, producing the required /Index/.
However, if the razorpages page begins with #page "{OrganisationId:int?}/{FolderId:int?}" then instead this renders /Index/1/4 which is clearly wrong because it is not what was asked for.
I have tried asp-route-FolderId="" and using asp-route-all-data but the unwanted parameter still appears.
Is it possible to get URL helpers to work correctly with the route templates?
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).
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.