Currently learning basics of Django. I kind of understand the concept of url and views. I've downloaded a bootstrap template and I wanted to set it as main page. I know, that I could redo all the page, making it template and put css files into static folder, then link it with url and it should probably work. I managed to display the page creating a lambda HttpResponse function, but I am unable to link css there. Is such thing possible? Can I somehow drop a webpage with css into folder and link it, or do I have to do it django way?
I know, that django way is less messy and probably better, but this is for test and learning purposes only.
Sorry, if it was already asked, I tried looking for the answer before asking.
Copy your css, and put it in HTML page inside <style> </style> tag.
I'm guessing you're going that route because it seems complex to get the static file serving working. Serving your static files is something that's really easy to do - and once you've pointed your static file at something, you can just use if for testing anything:
https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = ("/Users/you/path/to/static",)
Then you just need to use static in the url for that page.
I use a base.html that is extended by all of my templates. You can either have it {% include %} your css, or simply reference it. So you can change 1 variable (I do it in my master context file) and have all of your templates go along for the ride. E.g.
In base.html:
<html>
<head>
{% if testing %}
<!-- directly include stylesheet in page -->
<style>{% include "my.css" %}<style>
{% else %}
<!-- standard stylesheet link -->
<link rel='stylesheet' type='text/css' href='my.css'>
{% end %}
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>
In your templates:
{% extends "base.html" %}
{% block content %}
Hi, Mom!
{% endblock content %}
BTW, a base.html that has your full site design and makes very liberal use of {% block %} can make the majority of your view templates short and sweet. The template docs are your friend!
Related
I am currently a beginner in html and I have seen this problem many times and I do not know how to solve it. I copied a source code from a video in an attempt to make a social media. The following code is in the file home.html:
{% extends 'base.html' %}
{% block title %}
home
{% endblock title %}
{% block content %}
{{hello}}
<br>
{{user}}
{% endblock content %}
{% block scripts %}
<script>
$(document).ready(function(){
console.log('working')
})
</script>
{% endblock scripts %}
However, in the video the html page seems correct and all buttons and functions are working. On the other side my html page is like this:
...
The guide you have seen concerns Flask, a framework for applications written in Python. The code will not work because there is no preprocessor that can process it. In this case the browser will show you plain text without formatting.
I am trying to use tabbable divs in my django app. The toggle seem to work as expected, the content does show when the next tab is clicked.
But the CSS doesn't seem to be working. When I click on tab2, the focus still is in tab 1. On tab 2, it only grays out the button and when I click on other parts of the page the gray out disappears and even if tab2 details are shown, the focus is on tab 1.
Just to add here are my load scripts for the page
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
On load of the page, I inspected the sources in chrome dev tools. In the sources section, I can see that jquery and bootstrap are loaded.
If your CSS is not working try collecting static files :
python manage.py collectstatic
I was able to make it work. I thought the libraries were not being loaded properly. In a way, because of the way the libraries are imported, they don't seem to work properly.
here's how it looks like at the top of my template
{% load static %}
{% load staticfiles %}
{% static 'static_jquery/js/jquery.js' %}
{% block content %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
What it made work for me was that the bootstrap related libraries must be placed inside the block content. Before, it is placed up top after the load static statements.
And also I had to remove hardcoded script tags at the bottom of my template, then it worked. I had these removed
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
Other things that I did was install django_static_jquery, then performed collectstatic
I'm trying to build a static website using the GRAV CMS. So far, I've been creating *.html.twig files and associating a single page to the individual template.
This is how my pages look:
{% block header%}
{% include 'partials/bhss-default-header.html.twig' %}
{% endblock %}
#CONTENT
{% block footer%}
{% include 'partials/bhss-default-footer.html.twig' %}
{% endblock %}
However, my purpose is to have an editor creating pages from the admin interface and adding HTML blocks similar to the custom fields or shortcodes in WordPress. I want this blocks to be filled with text.
I need to mention that my website is built with Semantic-UI, so I'm not using any theme provided by GRAV.
How can I replicate this behavior and what choices do I have ? The website is small at this time, so I can remake every page.
Thank you!
If you want to use editor, you need to build your header and footer as Grav pages in Markdown, not Grav theme's template file in Twig. Example:
{% block header%}
{{ pages.find('/my-header').content }}
{% endblock %}
#CONTENT
{% block footer%}
{{ pages.find('/my-footer').content }}
{% endblock %}
my-header and my-footer are 2 pages. You can unpublish these pages to hide them from your menu and forbid direct access to them.
I've been playing around with Jekyll for a couple of days, I've got a working site, but on many pages I want to use templates/snippits/shortcuts to make it easy to re-use commonly-typed content.
In MediaWiki, this is what I would have done;
This is a test {{ iconSmileFace }}
Where {{ iconSmileFace }} obviously translates to something like <img src = "resources/images/smile.png" />
I've seen that Jekyll has includes, so I could do {{% include iconSmileFace.html %}} but this syntax seems kinda verbose, and maybe not quite the Jekyll-way of doing things. Is there another better way?
I would create a snippet to hold all of my icons whether they are images or svgs or font icons:
{% case include.icon %}
{% when 'smiley-face' %}
Smiley face
{% when 'heart' %}
Heart
{% when 'close' %}
X
{% when 'next' %}
>
{% endcase %}
Then include it where you need it {% include icon.html icon="smiley-face" %}
A good idea would be to define a liquid tag.
Create the _plugins directory and a file called smile.rb with this content:
module Jekyll
class RenderSmileTag < Liquid::Tag
def render(context)
'<img src = "resources/images/smile.png" />'
end
end
end
Liquid::Template.register_tag('smile', Jekyll::RenderSmileTag)
Then every time you want to render the image just use: {% smile %} and it will generate <img src="resources/images/smile.png" />
If your intent is to output image tags with the shortcut, there's another way with a GitHub Pages supported plugin:
(Though I haven't tested this myself)
From the plugin jemoji's documentation, you can serve custom emojis by pointing to a custom source in your _config.yml:
emoji
src: "/resources/images"
Then reference the emoji in your markdown document:
It's a beautiful day! :smile:
I have a small GAE app that's working fine. I use it to serve a few static files as well like (About page, Privacy and contact page). I put the "about.html" in a /static folder along with the /css, /img and /js. In "app.yaml" I declared the handler:
- url: /static
static_dir: static
It all works fine. Now I've abstracted the common contents (navigations, etc) into "_base.html" like this:
<html>
<head><title> Page title here</title>
<!--Some header files here -->
</head>
<div id="content">
{% block bodycontent %}
{% endblock bodycontent %}
</div>
</body>
</html>
The child file looks like this:
{% extends "_base.html" %}
{% block title %} About {% endblock %}
{% block bodycontent %}
<p>Some contents here...</p>
{% endblock bodycontent %}
Now, problem when it displays, the "_base.html" does not render. In fact the whole jinja code just displays. But when I wrote an handler for "about.html" it renders the base html correctly.
Question is, why do I have to create instances b4 I can display static files like About, Privacy pages just because I want to use template inheritance? Am I doing something wrong?
Templates are not static files, by definition. If you want a completely static HTML file, you can of course have one without any handler code. But templates require rendering, which means they need a handler to do it.