Ways to feed it with CSS / JS resources¶
There are several possibilities to place a CSS and JS in html page. Each has some advantages. Yawrap helps handling probably all of them.
from yawrap import Yawrap
class PlainPage(Yawrap):
resources = []
doc = PlainPage("/tmp/test.html")
doc.render()
Will create a page that has no style sheet (and no content) defined. It’s just to show the Tabula rasa case, when the resources list is empty.
OK, but of course you would like to use the styles and scripts.
External resources¶
This is how to reference resources hosted on external server.
from yawrap import ExternalCss, ExternalJs
class PageWithExternalCss(Yawrap):
resources = [
ExternalCss.from_url("https://www.w3schools.com/w3css/4/w3.css"),
ExternalJs.from_url("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"),
]
That gives:
Disadvantage of such approach is of course - dependency on other web resource, …but Yawrap doesn’t care it’s your business.
Auto-Linked resources¶
Yawrap can download the sheet or script given by URL (while page build), save it as a local file and manage its relative path calculation.
Just replace ExternalCss
with LinkCss
and ExternalJs
with LinkJs
like this:
from yawrap import LinkCss, LinkJs
class LinkedCssPage(Yawrap):
resources = [
LinkCss.from_url("https://www.w3schools.com/w3css/4/w3.css"),
LinkJs.from_url("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"),
]
With such a result:
See how these link point to local files in resources
directory?
It’s a default location, next to output html file. Yawrap created it while build.
Let’s say it once again Yawrap downloads and saves the files with each run.
If you allways want to get a fresh copy from these urls, it’s ok. But it’s probably eaiser to download it manually, save it close to your yawrap generator code. While each run, yawrap will source its contents from local files, instead of the web. Rest (i.e. saving to target resources dir) is the same as before.
Such a code will source the linked code from given files:
class LocalSources(Yawrap):
resources = [
LinkCss.from_file("path/to/source_of/w3.css"),
LinkJs.from_file("path/to/source_of/jquery.min.js"),
]
Changing default resources path¶
The default resources
output directory can be changed like this:
class LinkCssInMyStyle(LinkCss):
resource_subdir = "the_super_directory"
# for nested structure, do:
# # resource_subdir = os.path.join("the", "super", "directory")
class LinkJsInMyStyle(LinkJs):
resource_subdir = ""
# empty string will same dir, as parent html
class MyStyleOfLinking(Yawrap):
resources = [
LinkCssInMyStyle.from_url("https://www.w3schools.com/w3css/4/w3.css"),
LinkJsInMyStyle.from_url("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"),
]
This code will generate exactly the same HTML, just paths differ.
Note that JS and CSS will go to separate dirs.
Note
Relative path management makes sense when several pages from different paths share same CSS/JS file.
E.g. when NavedYawrap
is in use. Then the resources
directory path is threated as relative to
the top level of output directory structure (relative to root, the first page).
Defining CSS / JS in python code¶
Sometimes you would like to keep definition of the CSS or JS inside a python module. Especially if you use python for generating it (e.g. calculate CSS colors, margin sizes, etc..)
Then there are
If you are interested with getting single-file page (all-in-one, no linked CSS nor JS), where everything is embedded in single html, then use such an pattern:
Replacing a resource sourcer LinkCss
with EmbedCss
as here:
LinkCss.from_url("https://www.w3schools.com/w3css/4/w3.css") # with
EmbedCss.from_url("https://www.w3schools.com/w3css/4/w3.css")
will cause downloading the w3 style sheet and placing it directly to the /html/head/style
section.
The download happens with each call of Yawrap.render()
.
It also embeds additional style for body defined as a python string.
The most useful in my opinion is to
create own class derived from Yawrap
(or NavedYawrap
or whatever from the family).