How do i add an external css/js to my html template when working with django
i've tried some previously asked questions reply but seem like they're outdated and below is one of the procedure i followed
# after making sure the installed app has contrib.static then i make a file called static/my_apps/my.css
{%loadstatic%}
<link rel='stylesheet' href="{%static 'my_apps/my.css' %}">
# i also tried {%loadstaticfile%} but none work
When creating your project you have a specific django folder hierarchy and where you create your templates folder, at the same place create the folder with the name static and add all your static files (js/css/images) in it. and then while accessing use the static tag to access it in templates. {%static 'path/to/your/static/files'%} this path django engine takes from the static folder.
Related
Set relative path folder in Svelte build
When I build my svelte app with the command npm run build, it's export the links like this:
<script type="module" crossorigin src="/assets/index-54c7d896.js"></script>
<link rel="stylesheet" href="/assets/index-d3d038e5.css">
More accurately it call to the root localhost/assets...
// src="/assets/index-54c7d896.js"
// href="/assets/index-d3d038e5.css"
And I get this:
Error from the navigator
From here:
where I want use the svelte app
And easy solution is using a relative path to:
// from "/assets/..." to "./assets/..."
src="./assets/index-54c7d896.js"
href="./assets/index-d3d038e5.css"
But the thing is I can't do that inside javascript and css files.
These still use an absolute path.
So this is what happens:
when a css file call other files using absolute path
I mean I could dig into a compiled file but it's not efficient
I tried change manually the paths on each file but it's a lot of work each time than I have to compile.
I'm using a hosting with php so I tried using .htaccess but it's hard too.
I am expecting this to be configurable from svelte.
I really love ❤️ this framework, thanks in advance for your help.
i have a question.
Im working on a Project and i finished the Logic Part. So this was my first Project with Django and Web in generell. And my .html files are really really bad! So, now i want to change this. Work with a new Template and rework this a bit.
The first "base.html" was from W3Schools and now i want to use a bootstrap Theme. The Question is, how can i import the Files?
So i know that i have to put css,js Files into my static Folder and then import them into my base.html.
The Thing now is, that i have much Folders and Files. I have a css, img, js, scss and vendor Folder and some Files like package.json, gulpfile.js and stuff like that.
In these Folders are files like .css or .min.css, .js and .min.js, much scss Files and in the Vendor File are even more Folders with Files!
So the question now is, how can i import this good? That i dont destroy anything, which File should be in css, js and ?scss? dont know if i need a file for this in django! And how can i import them correct? Maybe anyone has an Example?
Would be really nice if someone can help me a bit with this!
Thanks!
For now, don't use any of those downloaded files, and use the hosted versions - it will be simpler. From Bootstrap's introduction:
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
And:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Note, you might not need the popper.min.js - read the instructions on that page.
Once you get that working, you could replace them with local files if you want. In the downloaded Bootstrap directory, they'll be in dist/css/ and dist/js/. You'll also need to download jQuery (or keep linking to it remotely).
I am working on a django-cms based web site but having trouble with the static files. As I am going to deploy the site to OpenShift, I have used the django-example to construct the site (https://github.com/openshift/django-example). This way I ended up with the following overall structure of my django project:
root_folder
wsgi
media
static
my_project
my_app
templates
So as you see, it's a bit different from the standard Django dir structure. Django docs (https://docs.djangoproject.com/en/1.8/howto/static-files/) has told me the following:
Include django.contrib.staticfiles in INSTALLED_APPS: Done
Define a static url, e.g. STATIC_URL = '/static/‘: Done
Use static template tag to refer to static files, e.g. {% static "my_app/myexample.jpg" %}: Done
Furthermore, the static root is defined as
STATIC_ROOT = os.path.join(WSGI_DIR, 'static')
where WSGI_DIR points to the folder named wsgi.
I keep getting 404s in my dev environment where I use Debug=True, when I try to refer to the static files from my base template. I have tried to place them in the following locations with no luck:
/wsgi/static/
/wsgi/static/my_app/
/wsgi/my_project/static/
/wsgi/my_project/static/my_app/
/wsgi/my_project/my_app/static/
/wsgi/my_project/my_app/static/my_app/
Where should I place the static files, and have I configured it correctly?
I discovered that my_app was not in the INSTALLED_APPS list (apparently this is not part of the code structure I got from django-example). When I added the app to the list, it worked. The correct location of the static files: /wsgi/my_project/my_app/static/my_app/
I am trying to load a web design into django project on pyCharm. I created the URL in url.py for first page and its corresponding function in the view.py. On running the project index.html file is loaded only without images and css files. I have been searching for the solution but I could not understand any of them. Some of those said, place your static files into 'static' in the root directory of project. But in my html code, I have referenced them as css/main.css. In this case I might have to change all the code. Is there some easiest way to load static files? Please guide me step by step.
Here is the structure of my files in the project:
MyProject/template:
css/"all css files
js/"all java script files"
image/"all images"
fonts/fonts
index.html and other html files![error log:][1]
Follow these steps:
You need to create a static directory in your project root.
Specify the static directory in the django project settings.
Include the static files like css, js, image, fonts inside the static directory.
Change the static file's path in templates -- e.g. from /css/bootstrap.min.css to {% static "css/bootstrap.min.css" %}
I have just started on designing for Opencart. The page here says
OpenCart uses a "default theme fallback system". This means that if you are missing a file in your custom theme folder, it will search the main "default" theme folder for the file.
Now i have created a folder stylesheet inside my template folder with all the files in the default directory. All css files except the stylesheet.css loads from my directory.
What am I missing? I have checked the spelling of stylesheet.css and even re-created it many times but still it loads from default directory.
Can anyone help?
When OpenCart says that it falls back, it literally means the template folder, that is
/catalog/view/theme/your-theme-name/template/
The stylesheet folder is outside of that, so you would need to add that manually to your theme <head> if you want to include the default stylesheet
EDIT
If you want your stylesheet to be loaded, you need to edit the template in
/catalog/view/theme/your-theme-name/template/common/header.tpl
and change the path in there
< link rel="stylesheet" type="text/css"
href="catalog/view/theme/default/stylesheet/stylesheet.css" />
needs to be changed in header.tpl
I had copied it from the default directory