I'm a little bit new, but I was curious about changing the name of my main file in my css folder. I have the css folder, where I am importing my partials.
I initially tried to call this base.css and add the following line in my head.html (in my includes directory).
<link rel="stylesheet" href="{{ site.baseurl }}css/base.css">
However, it still would not load the appropriate main css file. Instead, I had to rename my file to main.css. there has to be a way around this but I wasn't sure and the literature wasn't that helpful.
Thanks so much! I would really appreciate any help.
Starting from Jekyll 3.3, you can use the relative_url filter to avoid adding baseurl, it should be available for GitHub Pages very soon.
<link rel="stylesheet" href={{ "/css/base.css" | relative_url }}>
You can use the prepend option instead:
<link rel="stylesheet" href="{{ "/css/base.css" | prepend: site.baseurl }}">
If you are using Github Pages then ensure that config.yaml includes the base.url variable and it points to your repository name, e.g:
baseurl : '/my-awesome-jekyll-site'
Related
I have the following code in my skeleton layout.
{% if page.customcss%}
<link rel="stylesheet" href="{{page.customcss}}">
{% endif %}
And in pages I mention the customcss in the frontmatter like this:
---
layout: skeleton
customcss:
- 'assets/css/something.css'
---
This works for normal pages but for blog posts, jekyll generates then in a different directory and can't access the css and js files:
_site
-2021/1/1
-blog.html
-assets
-css
-something.css
-js
-x.js
for js files I've solved it with %link in the skeleton.html layout file:
<script src="{% link /assets/js/mirai.js %}"></script>
But it doesn't work for css files:
<link rel="stylesheet" href="{% link {{page.customcss}} %}">
`render': Could not find document 'assets/css/something.css' in tag
'link'. (ArgumentError) Make sure the document exists and the path is
correct.
I assume jekyll doesn't like the nested {{}}.
Is there a way to keep page.customcss while allowing usage in blogposts? I do not want to make a separate skeleton.html for blog posts.
Or am I doing something wrong here?
I found this within literal minutes. Keeping the ques up if it helps somebody:
Jekyll doesn't apply CSS to posts on GitHub Pages
basically, paths are not relative if is starts with /.
Ex:/assets/css/something.css
No need for %url.
I have a CSS file style.css stored in a CSS folder and tried using <link rel="stylesheet" type="text/css" href="style.css"> to link it into the HTML file. I got a 404 not found error from this and am not sure what I am doing wrong.
Below is the code (there is not much at the moment):
{% extends "base.html" %}
{% block body %}
<div class="MainBody">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="w3-container w3-padding-32 w3-hide-small center-align">
<h1>About Us</h1>
</div>
</div>
{% endblock %}
This shows the full path of style.css within the project
Please let me know what is being done incorrectly.
Actually, you answered your own question:
I have a CSS file style.css stored in a CSS folder
Your href attribute should look something like: href="/css/style.css"
The href should should have the path where the file is located along the file name not only the file name.
Example :
<link rel="stylesheet" type="text/css" href="./css/style.css">
we use "./" to search in the current folder.
we use "../" If you want to come back from the current folder.
Try this:
In the href, would you not leave the first / off? I thought that would go to a root folder. Try and eliminate that first slash and see what happens. As was said, the 404 is because it's looking in the wrong place.
I see this is a structure of a Flask app. In Flask, the CSS files and other assets should by default be stored in the static directory which should be directly inside your home directory.
Your file structure should look like this:
TSAWeb_App
|__ templates
|__ index.html
|__ static
|__ CSS
|__ style.css
Then you to access it inside the web app, first import url_for method
from flask import Flask, url_for
Then you can refer to CSS file as:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSS/style.css') }}">
Then when the app is run, the href tag will have the correct value set
UPDATE: If you're using Django, see this doc
Configuring static files
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
In your templates, use the static template tag
to build the URL for the given relative path using the configured
STATICFILES_STORAGE.
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">
Store your static files in a folder called static in your app.
For example my_app/static/my_app/example.jpg.
I have
<link rel="stylesheet" href="/assets/css/my_file.css">
on a simple index page
And this .css file is on _assets/css/my_file.css
But it won't be loaded when I load my page. If I try localhost:4000/assets/css/my_file.css I go to a 404 page.
in jekyll check baseurl in _config.yml
baseurl: "" # the subpath of your site, e.g. /blog
for local development use just empty string like above, then import css like this.
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
for images:
<img src="{{ site.baseurl }}/assets/img/logo.svg" alt="logo" class="logo"/>
You'll need to create the assets/css folders in your root directory and save my_file.css in there.
Now it will show in your generated _site folder and is available at http://localhost:4000/assets/css/my_file.css
To include it in your header use
<link rel="stylesheet" href="{{ "/assets/css/my_file.css" | prepend: site.baseurl }}">
and you are good to go.
I am using Jinja 2 to build my website and in my main template I have something such as this:
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
and every time I run it, it says that
url_for is undefiend
If anyone could point me in the right direction I will appreciate it a lot!
Thanks In Advance.
make sure you are using Jinja. Look at some examples. Anyway, I just do the below, as it doesn't use Jinja.
<link rel="stylesheet" href="./static/css/main.css">
I would like to be able to define the links of my website as relative paths. I think it is more reliable in case the site is moved later for instance.
For the moment, my links are absolute, so I have:
<link rel="stylesheet" href="{{ site.url }}/assets/css/app.css" />
in _includes/header.html called by _layouts/page.html to generate the pages of my website.
A first approach would be to put
<link rel="stylesheet" href="assets/css/app.css" />
but it works only for pages in the root.
Another attempt would be to put
<link rel="stylesheet" href="../assets/css/app.css" />
but it works only for pages in a subfolder the root.
In fact we need to use as many ../ as needed to go back to the root. Would it be possible to automatically count it (maybe based on the page.url variable? I am not sure how to do it nor where to put such a script.
I am aware of the answer of kikito here but it is needed to manually declare the correct path to the root variable of the page in the metadata when creating it. I would like to automate this process.
Did you have issues with the accepted answer to the question you linked to? That solution works for me.
In the head of my layout file I include the code:
{% capture lvl %}{{ page.url | append:'index.html' | split:'/' | size }}{% endcapture %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}
Then my resources can be set up as:
<link rel="stylesheet" href="{{ relative }}assets/css/combined.min.css">
This results in the correct number of ../ parts being added. The "assets" directory in this example is in the root of my site.