I'm using Jekyll and setting a cookie as a check whether to serve critical and async loaded CSS to the user so only first time visitors get the critical and async CSS. I'm using Filament Groups Enhance.js which sets the cookie and takes care of loading the CSS async. What I'm trying to do is check whether the cookie exists using Jekyll Liquid but not having much luck, in my main layout I have code like this:
{% if cookie.name == fullcss %}
<link rel="stylesheet" href="/css/style.css">
{% elsif page.section == 1 %}
<style>
{% include critical-css/getting-started.css %}
</style>
<script>
{% include js/enhance.js %}
</script>
<noscript>
<link rel="stylesheet" href="/css/style.css">
</noscript>
{% elsif page.section == 1 %}
...
Basically this is the technique I'm trying to achieve: http://iamsteve.me/blog/entry/using-cookies-to-serve-critical-css-for-first-time-visits but I cannot use PHP as I'm on a Jekyll site hosted with GH Pages.
Related
I started a new project in symfony. I'm very new to it, but I followed all the instructions from symfony's documentation for the installation:
/* assets/styles/app.css */
body {
background-color: rgb(177, 44, 44);
}
h1{
color: red;
}
h2{
color:purple;
border: 1px solid black;
}
{% extends 'base.html.twig' %}
{% block body %}
<h1> Bienvenue à tous </h1>
<h2> Bienvenue 2 </h2>
{% endblock %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{# Run `composer require symfony/webpack-encore-bundle`
and uncomment the following Encore helpers to start using Symfony UX #}
<link rel="stylesheet" href="assets\styles\app.css" type="text/css">
{% block stylesheets %}
{#{{ encore_entry_link_tags('app') }}#}
{% endblock %}
{% block javascripts %}
{#{{ encore_entry_script_tags('app') }}#}
{% endblock %}
</head>
<body>
<div class="container">
{% block body %}{% endblock %}
</div>
</body>
</html>
[enter image description here][1] set up. I downloaded webpack-encore-bundle package with yarn package manager. I think that my () is well placed, but my html file can't find the path to my css.
here are my files
[1]: https://i.stack.imgur.com/RA9FJ.png
my network browser console tell me this "net::ERR_ABORTED 404 (Not Found)"
With Webpack Encore
You should not write your <link>-tag yourself and instead use the commented encore_entry_link_tags instead. The encore_entry_link_tags will make sure it points to the file generated by Webpack Encore (after calling yarn encore dev for example).
When you use Webpack Encore use the webpack.config.yaml to point to your CSS in assets using addEntry('app', ...file..) (or possibly addStyleEntry, but addEntry should be fine). Webpack Encore takes the file under assets/styles/app.css and then puts it in public/ by default public/build. Depending on your configuration it might be, that your file name will not stay the same during that process. The good thing is Webpack Encore usually takes care of everything for you. (If not feel free to open a question for that).
See also: https://symfony.com/doc/current/frontend/encore/simple-example.html
When not using Webpack Encore
You should use forward slashes, e.g. assets/styles/app.css. If you don't use Webpack Encore then you should make sure that you have the file in public/assets/styles/app.css to make it accessible for your browser. You should also wrap this into another helper function called asset. In other words it should look something like (assuming the path is correct):
<link rel="stylesheet" href="{{ path('assets/styles/app.css') }}" type="text/css">
What this will do is make sure that your path is relative to the document root (your public/-directory) instead of relative to the url. This is important, because otherwise your path will not have the same result depending on whether you are for example on https:/example.com vs. https://example.com/blog, because it will look for your css in different places (either public/assets/styles/app.css or public/blog/assets/styles/app.css).
I am starting to learn CSS and after trying to implement an external stylesheet, i found I was unable to change the color of my html document. I am using Visual Studio Code and my html templates are using Djangos inheritance.
I have tried double checking that everything is saved, I have checked spelling for the href, and i even restarted VSC. So far nothing.
Here is the base html sheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% block style %}
{% endblock %}
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Here is an html sheet that should use the styling:
{% extends 'student_view_base.html' %}
{% block title %}
Socrates Home Page
{% endblock %}
{% block style %}
<link rel="stylesheet" type="text/css"
href="css/sidebar.css">
{% endblock %}
{% block content %}
<h1>Socrates Home Page</h1>
<div>
Login
</div>
Admin Login
{% endblock %}
Here is the css sheet:
h1{
color: blue;
}
As you can tell, I am pretty new to Web Dev in general and this was mostly to experiment and make sure I could implement it properly.
As far as I can tell the h1 tags text should be turning blue. Currently it remains black.
EDIT: I can confirm that the href is linked to the proper document, ctrl clicking takes me to the right document.
You are better off placing your html code on templates and your css on static when you use django. Create a templates and static folders on your project as here. enter image description here
Then edit settings.py'DIRS': [os.path.join(BASE_DIR, 'templates')], inside TEMPLATES. Also add the following code to your settings.py :
STATIC_URL = '/static/'
STATIC_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
You should be good to go.
I am trying to set a background image and some CSS style to my page, but every attempt I tried seems to have no effect:
i have a base.hmtl page where I load {% load staticfiles %}
in settings.py I have set up STATIC_URL = '/static/' and STATICFILES_DIR = [os.path.join(BASE_DIR, 'webapp/static')]
In setting.py 'django.contrib.staticfiles' is under installed apps
the CSS folder is located in the main directory under static, and the image is as well under static/img
here is how i am trying to load this page:
{% extends 'base.html' %}
{% block content %}
<h1>Welcome!</h1>
{%load staticfiles%}
<img src="{% static '/img/background.jpg'%}"/>
{% endblock %}
While in my base.html I load my stylesheet in this way:
<link rel="stylesheet" href="{% static 'webapp/CSS/style.css'%}">
and as well in base.html I load statifiles
I attach here my folder structure, maybe I have missed something there:
I noticed Google Chrome was keeping displaying me a cached version of my page, I had to delete Google Chrome cache with settings --> advanced --> clear browsing data.
In my posts, I sometimes include the same HTML pattern.
To do it so, I created pattern.html in _includes/ and include it in my posts with :
{% include pattern.html %}
I would like to add a CSS file (or any other code) in my header if, and only if, pattern.html as been used in my post. To put it in pseudo-code, I would like to get the following layouts/default.html:
<!doctype html>
<html>
<head>
{% if pattern.html is included in the post %} code here {% endif %}
</head>
<body>
{{ content }}
</body>
</html>
I already tried to assign a variable in pattern.html and to test it in my layout, but this assignement occurs too late: the layout is already processed. I know I can pass a variable through YALM, but my objective is to get rid of it. I would prefer not to use plugins to do this.
It seems asking the question helped me to answer it!
You can use the Liquid contains in order to look for a pattern in your post.
For example, if the included pattern.html contains a particular piece of code (<!--pattern--> for instance, or any particular HTML), you can use in your head:
<!doctype html>
<html>
<head>
{% if content contains "<!--pattern-->" %} code here {% endif %}
</head>
<body>
{{ content }}
</body>
</html>
This can be used for any HTML pattern. For example, if you want to call the CSS file producing syntaxic coloration only if there is code in the page, use:
<!doctype html>
<html>
<head>
{% if content contains "<code>" %}
<link rel="stylesheet" href="code.css">
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>
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.