I just deployed a new blog using Hexo and it is failing when it tries to load the style sheet. The generated declaration in the index.html file looks like:
<link rel="stylesheet" href="/css/style.css">
I can solve the issue editing this file manually as follows:
<link rel="stylesheet" href="css/style.css">
Note how the / is removed. Is this a bug that hexo has or is this happening just to me. Here is my repo for reference:
https://github.com/enriquezrene/quarkus
develop branch has the code
master branch has the deployed website
I kinda solved the issue forcing to load the css file editing the head.ejs file as follows:
...
<% if (config.highlight.enable){ %>
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<----- code added ----->
<link rel="stylesheet" href="css/style.css">
<----- code added ----->
<% } %>
<%- css('css/style') %>
</head>
However, this does not solve the issue completely since the generated index.html file now looks like:
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/style.css">
So it will try to load the other file as well.
Related
I am requesting a single EJS file (setting Express, Request).
app.get('/space', function(req, res){
res.render('space.ejs');
});
The file actually renders but only two of three CSS stylesheet link are work when opening the page with my node app. The link that does not work is W3 school. (the only http of all three, could that be the reason?)
However, the all three links work when I open the file directly in browser.
Could someone explain this behavior?
Here is the .ejs file.
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
You might be trying to access an insecure resource over a secure connection, if your site is on https you cannot request an http asset. Try changingnthe w3 link to https. It could also be CORS blocked, do you see any errors in the console?
you have written
app.use(express.static(__dirname + '/public'));
<link rel="stylesheet" href="/css/w3.css"/>
you need to add "static" in link tag
<link rel="stylesheet" href="/static/css/w3.css"/> and it should work for you.
in your case your server.js file in lib dir that is why you should do this
app.use(express.static(process.cwd() + '/public'));
I have a view called homePage.blade.php which is my master page which resides in res/views/ in that file I have this.
<link rel="stylesheet" href="css/coreStyleSheet.css">
<link rel="stylesheet" href="css/animate.css">
<script src="js/coreScripting.js"></script>
<script src="js/moments.js"></script>
<link rel="stylesheet" href="icons/fontAwesome/css/font-awesome.css"> </head>
all is fine?
Now I create a folder called AppCreate who's path is res/views/AppCreate I have a blade file there called something.blade.php now when I use #extends('homePage') I am not able to access the css,js.
my tree looks like this.
-res
-views
homePage.blade.php
-AppCreate
-something.blade.php
I redirect something.blade.php tp public/admin/appcreate
I redirect homePage.blade.php to public/dashBoard.
I hope I have explained it well.
when I access the public /admin/appcreate laravel is not able to find the css and the js because it says this.
GET http://localhost/laravel/public/admin/css/coreStyleSheet.css
appcreate:12 GET http://localhost/laravel/public/admin/js/moments.js
appcreate:11 GET http://localhost/laravel/public/admin/js/coreScripting.js
appcreate:13 GET http://localhost/laravel/public/admin/icons/fontAwesome/css/font-awesome.css
Try using the Helper Functions like this:
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">
<script src="{{ asset('js/coreScripting.js') }}"></script>
assuming you have your css and js folders inside public/assets
I have my CSS and JS in my layout page.
I need to add a param string to the CSS and JS when I do changes and I upload them with these changes.
For example:
<environment names="Production">
<link href="~/dist/mycss.bundle.css" rel="stylesheet"/>
</environment>
To:
<environment names="Production">
<link href="~/dist/mycss.bundle.css?param=withchanges" rel="stylesheet"/>
</environment>
What is the best way to do that? Has new ASP.NET 5 a way to do that?
there is a built in taghelper that is just for this purpose
<link href="~/dist/mycss.bundle.css" rel="stylesheet" asp-append-version="true"/>
by adding the asp-append-version=true, a hash of the file contents will be automatically appended to the url so it will change if the file contents change.
I'm using Django and the static media app, along with Nginx. For some reason the external stylesheet doesn't apply itself. However, when I click on it in the source file, it does indeed load the style.css file.
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/style.css" %}" />
<!-- EVEN THIS DOESN'T LOAD HERE
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/style.css" />
-->
</head>
<body>
<!-- some stuff -->
</body>
</html>
Check the error log of Nginx (error.log). Sometimes it is on the path '/usr/local/nginx/logs/error.log'.
Load the page and then make in command line: "tail -n 20 /usr/local/nginx/logs/error.log". You can see the path on which Nginx tries to load your css file and error message if there is no such file on the path.
The pass and the name of file are both case-sensetive.
If your css file loads normally (you can see it, for example, by using firebug) then it is not a problem of Django. Definitely there is a mistake in HTML and/or in CSS.
In my application I have next problem. I created master page and some content pages, some of which are located in the nested folders. In the master page I added the link to .css file
<link href="default.css" rel="stylesheet" type="text/css" />
But pages are located in the nested folders can't use this .css file. How can I fix this? I want to have one .css file for all pages (:
Thanks!
<link href="~/default.css" rel="stylesheet" type="text/css" />
This problem can be resolved by adding next code in master page
<style type="text/css" runat="server">
#import '<%= ResolveUrl("~/default.css")%>';
</style>
But designer of VS can't process this and you couldn't view your styles in it.
The css shouldnt be relative to the master page but rather it should be relative to the location of the Page instance using the master page. In most cases this will be the same thing but I would always try to use either a fully qualified path or a site relative path
Fully qualified path
<link href="http://some.site.com/mysite/styles/default.css" rel="stylesheet" type="text/css" />
or a relative path (note this might not work if you have a version which can only host one site but many apps such as WinXP)
<link href="/default.css" rel="stylesheet" type="text/css" />
Win xp relative path
<link href="/path/to/application/default.css" rel="stylesheet" type="text/css" />
If you using website under website, change in subfolder masterpage CSS link
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
change with below
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
The way you defined you style sheet means: the style sheet is in the same folder as the page which uses it.
If you want to have one style sheet for all pages you should put in in one place (I prefer /assets/css folder in the application root) and define the path using this folder:
<link href="/assets/css/default.css" rel="stylesheet" type="text/css" />
The other way to archieve this is to use Themes, in this case styles will be added automatically.