I have been trying to add a link with my index.html page (made from nicepage) in the nav bar as suggest through tutorials {% urls 'homepage' %}
however, it adds to the rest of the link so?
What can I do?
Do I have to create a navbar.html ? is it necessary?
html page with nav bar /
urls.py file in the project
You did not use the {% url … %} template tag. You can work with a leading slash like:
<!-- ↓ leading slash -->
Experience
to define an absolute path instead of a relative path. But it makes more sense to work with the {% url … %} template tag [Django-doc]:
<!-- ↓ url template tag ↓ -->
Experience
You should of course not only change the tag for experience, but for all the links.
where experience is the name=… specified in your path(…).
Related
I am new to web development and I am working on Django framework in VSCode. I have been trying to make a user interface for the web application which has a menu on the left side of the screen and a nav bar on top which says "home page" (the image is below). There I need all the texts and photos to be in the rest part of the page, and when I scroll down I want only that part to move, like in a real web application. But I don't know how to do it, do I have to use JavaScript for that or can I just do it within HTML/CSS?
As you can see in the picture the paragraph covers the nav bar.
Thank you!
What you're looking for is the CSS position: fixed property. For example:
<div class="navbar" style="position: fixed;">
https://www.w3schools.com/howto/howto_css_fixed_menu.asp
You must use a base_generic_page to contain all the aplication pages.
basic_generic_page has the nav_bar or side_bar
<html lang="en">
<head>
{% block title %}<title>Local Library</title>{% endblock %}
</head>
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->{% endblock %}
</body>
</html>
You can heritage the base in application pages and rewrite content block in this way :
{% extends "base_generic.html" %}
{% block content %}
<h1>Local Library Home</h1>
<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
{% endblock %}
Source: https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Home_page
Much like the position:fixed
You could also give position: sticky
Has the added benefit of occupying space
Depend really on how you want the page to flow
I may be searching the wrong terms but I can't seem to find an obvious way to make easy links to page section ids.
Lets say I have a _widgets.md file with a section id=section-1 so I want to generate a link to: /widgets/#section-1
I found this for links:
Jekyll link within page
So an same page link is as simple as [Section 1](#section-1) but I can't seem to find how to add the anchor to links from another page like this [Widgets - Section 1]({% link _docs/widgets.md%}).
You can use the capture tag, see jekyll or shopify
In HTML
{% capture link_with_anchor %}{% link _pages/links.md %}#foobar{% endcapture %}
Links
In Markdown
{% capture link_with_anchor %}{% link _pages/links.md %}#foobar{% endcapture %}
[Links]({{ link_with_anchor }})
You can benefit from the link features (check if page exists) and can add the anchor, e.g. foobar.
One cool way to manage links is to have a central include file that defines the links by name, which is then referenced by each document.
For example you have a file in the _includes directory called "links.md" which defines all the cross-document links in your site:
[Section 1]: {% link widgets/page.md %}#section1
[Section 2]: {% link widgets/page2.md %}#section2
etc
Then in your markdown you can just say:
This is a link to [Section 1] isn't that nice.
... other content
{% include links.md %}
Basically i'm building a jekyll site with a footer containing some SVGs for social icons but the problem is that the first svg(they are saved inside the icons/<socialNames>.html files) will replace all the other SVGs when rendered in the browser. So instead of having a twitter icon, snapchat icon, facebook.icon, etc, four twitter icons are being rendered. The problem is that the first svg is replacing the others, but why? is there an alternative way to import SVG files?
I've tried using firefox, chrome and safari all with the same result. Tried making a seperate svg file and using {% include icons/<fileName>.svg %} but didn't fix it.
Here is my footer.html file:
<nav>
{% include icons/twitterIcon.html %}
{% include icons/snapchatIcon.html %}
{% include icons/facebookIcon.html %}
{% include icons/instagramIcon.html %}
</nav>
imgur link to how chrome displays the footer: https://i.imgur.com/VBYNHqd.png
I expected four different svgs instead the first svg is being rendered four times. Why is this happening? is there a workaround?
First of all, I think you need to try a different approach.
Create a folder in the root of your project called "_data" and create a new file in there called content.yml or whatever you want to call it.
Add the following in the content.yml file: - Note, this can also be .json or .csv.
social:
- name: "Twitter"
link: "http://twitter.com"
icon: "/link/to/image.svg"
- name: "SnapChat"
link: "http://snapchat.com"
icon: "/link/to/image.svg"
- name: "Facebook"
link: "http://facebook.com"
icon: "/link/to/image.svg"
Add the following syntax where you want your Social links to be appear.
<nav>
{% for social in site.data.content.social %}
{{ social.icon }}
{% endfor %}
</nav>
In your _includes/icons folder, save the SVG files as actual SVGs and not as an .HTML file and place it in your images or assets folder.
This way your HTML markup is much cleaner.
Hope this helps.
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!
I would like to make a single-large-page with a menu on the side that links directly to sections inside this single page. Similar to the bootstrap manual pages.
I would like to write the page content in markdown. How can I make jekyll automatically create the navigation menu from the headers in the markdown page? I.e. loop/iterate over the headers to insert menu items?
I believe this can only be done with an extra plugin. Because you are running on GitHub pages, you can't use plugins.
This method is not automatic, but you achieve the same result.
_config.yml
nav:
- page: Header One
permalink: #header-one
- page: Header Two
permalink: #header-two
default.html
{% for n in site.nav %}
<li>{{ n.page }}</li>
{% endfor %}