I have Rails application with documentation which is static html pages in the /public folder.
The tree of my public folder:
-public
-docs
-intro
introduction.html
-css
some.css
index.html
Index.html file is:
<link rel="stylesheet" href="css/some.css" type="text/css" />
Some of the text
<li>href="intro/introduction.html"><em>Introduction</em></a></li>
When I open index page css isn't loaded, and when I try to click on link it says routing error. As I understood static pages don't know where to look for css and other html pages.
I just want static pages without any routes and controllers, nginx.
Any ideas?
All the public folder content is accessible via "/"
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
You can use high_voltage gem to generate static_pages
Its perfectly valid to serve static files (pages or not) via the public directory. As Kirka121 said rails is not really built for this purpose but can still work with it.
In development environment it should just work to serve whatever files you have in public, for production environment you might need to configure whatever server you use to serve them - but this should be covered by its normal setup anyway, if not its set up wrong.
So by default the rails public folder can directly by accessed at the root of the project.
As far as your code goes the relative links/urls seem to be the issue. Its generally better to use absolute paths for everything not to confuse anything, which leads to very hard to find bugs.
With your folder structure and example this would be:
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
Some of the text
<li><em>Introduction</em></li>
Related
I have two folders. One called app, which contains index.html, sass, img. And second build with folders: css, js. What path should I type in index.html to access the style.css file, which is in build/css/style.css ? I tried this, but it doesn't work.
<link rel="stylesheet" type="text/css" href"build/css/style.css">
Your css and js folders should be in same directory as the app where index.html is then try css/style.css
<link href="css/style.css" rel="stylesheet">
So app, which contains index.html, sass, img , should now also contain js and css folder. Then it should definitely work.
If keeping the file directory as is, you should understand.
*Starting with / returns to the root directory and starts there then ../ moves one directory backwards and starts there and so on ../../. In that case
<link href="../build/css/style.css" rel="stylesheet"> should work.
Include this in your html file:-
<link rel="stylesheet" type="text/css" href="../css/style.css">
If your both folder 'app' and 'build' are siblings then use this
<link rel="stylesheet" type="text/css" href="../build/css/style.css">
You should change it become
<link rel="stylesheet" type="text/css" href"../build/css/style.css">
Your index.html is on "app" folder and the css is on "another folder" which have the same path with "app" folder. So you need to get out from the "app" folder first with "../" then redirect it into your destination folder. If you need to get out from current folder you're in twice it'll be like "../../your/destination/folder" and coulde be more.
<img src="picture.jpg">
picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg">
picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg">
picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg">
picture.jpg is located in the folder one level up from the current folder
Relative path is relative to the file where you put the reference. Here in your case, style.css is in build/ folder which is next to app folder that covers index.html. So if you want to make a reference to style.css from within index.html, usually you should use the relative path ../build/css/style.css.
But make sure the css file is really reachable. It depends on whether you are using a web server, what web server you are using, and what is the starting point from which you run your project.
If you simply open index.html by clicking the file from file explorer, then you can use this to make style.css work:
<link rel="stylesheet" href="../build/css/style.css">
However the above method is not recommended. Normally you will want to make use of a web server to serve such static files like js, css.
I would recommend you to try lite-server which is a light weighted web server let allow you to do local development and checkout what you've been done immediately by visiting something like http://localhost:8000.
When you are using a web server to serve static files, make sure you start running it with a starting point that already covers app and build folders (such that all of the files you want are reachable), for instance, with the parent folder of those 2 folders. If so, when you want to open index.html, you are going to visit something like http://localhost:8000/app/index.html (Because index.html lies under app/ folder, you need to add the "app/"). When this layout is applied, you have at lease 2 ways to insert the css lines:
<link rel="stylesheet" type="text/css" href="../build/css/style.css">
or
<link rel="stylesheet" type="text/css" href="/build/css/style.css">
What if you don't want to add the "app/" while visiting index.html? Then you could move index.html out of app folder, right into the project starting point. That way whenever you go to http://localhost:8000, usually index.html is assumed to be served. (Just like visiting http://localhost:8000/index.html). When you are using that method to run your project, the reference to style.css is just the way you were doing, which is:
<link rel="stylesheet" type="text/css" href="build/css/style.css">
By the way, this is also perfectly fine in that case, with an absolute path:
<link rel="stylesheet" type="text/css" href="/build/css/style.css">
Things will go different if you are using other mechanisms to serve static files like css, js. But the core principle is that simple: make sure files you want can be reached, and the relative path you are using really reveals the path relation between the reference point and the target referenced file.
I am just starting with Express and express-ejs-layouts. I have a layout.ejs file that has the common parts of my web app. This works great for pages that are at http://localhost/path1/path2, but I would also like to use this for the root index page of my app (i.e.: http://localhost/
The problem is the links for the CSS and JS files:
<link href="../../stylesheets/main.css" rel="stylesheet" type="text/css">
This doesn't work for http://localhost/
Should I break this out and add it to each view template with the correct pathing? How have people done this in the past?
You can use absolute URLs for static files (eg. href="/public/css/" ) to avoid this issue.
For Node.js/Express.js web applications, it's convenient to create a public folder at the root, where you put all your static files.
Im trying to convert an html template to ASP.Net MVC 4 project. Bbut i have run in an problem. Then opening the localHost:11062/ site everything looks prefect. But if i try same address just calling the controller and action direct localHost:11062/StartMenu/Index, which should be the same, but it's not. For me it looks like the css file isent loaded correct. But if it wasent the start site should not look different?
I suspect that you have hardcoded the url to some of your CSS files, just like this:
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
instead of using an url helper:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
Of course the same is true for all static resources such as javascript, images, ...
You should never hardcode urls in an ASP.NET MVC application. Always use url helpers when dealing with urls.
Also if you are referencing some static resources (such as images) in your CSS file, don't forget that they should be relative to the location of the CSS file.
You might easily see this in the Net tab of a javascript debugging tool such as FireBug where you would get 404 errors for the corresponding resource.
I am using ibm websphere and creating a Dynamic web project. All of my JSP files are in my WEB-INF folder and i use servlet mapping in my web.xml file to make them accessible. This has worked fine so far. however i have problem with my CSS. as always, my CSS file is located in WebContent in a folder named css. heres my link for my jsp
<link rel="stylesheet" href = "css/styles.css">
I'm having no luck getting my css to show...
what am i missing?
The relative URLs in the generated HTML output are by the browser interpreted relative to the request URL (as you see in browser's address bar), not to their physical location in the server's disk file system. It's namely the webbrowser who has got to download them by a HTTP request, it's not the webserver who has got to include them from disk somehow.
One of the ways is to use a domain-relative path for those resources, i.e. start with /. You can use ${pageContext.request.contextPath} to dynamically inline the current webapp's context path.
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
This will end up in the generated HTML output as follows:
<link rel="stylesheet" href="/yourContextPath/css/styles.css">
This way the browser will be able to download them properly.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
I think you need to see it from the browser's perspective, how it is the URL of the page, the context path and the current path.
If your app context path is for example "myApp" then you can do something like this to make it work:
<link rel="stylesheet" href = "/myApp/css/styles.css">
If you want to make it relative so it does not depend on the context path, then if your url looks like http://localhost:8080/myApp/myservlet/file.jsp
Then your link tag would be
<link rel="stylesheet" href = "../css/styles.css">
Firebug or the chrome console may be really helpful to understand what the browser is trying to fetch.
Hope this helps!
We are using static HTML files as theme for our Plone 4 site with collective.xdv.
The static HTML files themselves are openable in a web browser making the theming process easy for the theme authors.
However, theme files use a file system resource directores which are referred in HTML like
<link rel="stylesheet" type="text/css" href="../css/jquery/accordion.css"/>
How it could be possible to rewrite these to be absolute URL when served through Plone, with a custom prefix? (Can it be done in rules.xml??
E.g. translate
../images/logo.gif
To
http://portal_url/images/logo.gif
If you use the "absolute_prefix" setting
<registry>
<record interface="collective.xdv.interfaces.ITransformSettings" field="absolute_prefix">
<value>/++resource++example.sitetheme</value>
</record>
</registry>
and manage your static files via the resource registries with the "applyPrefix=True" option you can use both relative and absolute urls inside your theme html file (preserving the possibility for theme authors to simply use the static directory independent from Plone) and use
<drop theme="/html/head/style" />
<append theme="/html/head" content="/html/head/style " />
to remove them from the theme template and pull all static resources back in from the resource registries (with the additional benefit of having them merged for production use). See collective.xdv for details.
Note: though Nginx is very fast at serving static files we got better overall performance from utilizing the resource registries for our theme`s static files in combination with the usual caching proxy (Varnish) in front.
Register the static directory as a resource. Keep the directories containing the rules and the media files separate.
To register a resource directory inside your package, named 'my.package', use the following in your configure.zcml
<browser:resourceDirectory
name="my.package.media"
directory="static"
/>
In your template, you will now be able to access a resource using '++resource++my.package.media/name-of-resource', i.e.
<link rel="stylesheet" type="text/css" href="++resource++my.package.media/css/jquery/accordion.css"/>
This should now work as intended even after a url rewrite.
Avoid using absolute paths when defining the locations of your XDV rules and templates. Instead, simply use Python :) For example, we have placed our template files (.html) and our rules files (.xml) in a directory called xdvstuff, inside our package:
python://my.package/xdvstuff/theme.html
python://my.package/xdvstuff/theme.xml