I created a page with octopress using octopress new page 100-days-of-code-log which created a 100-days-of-code-log.html. I added an .md file of the same name. I then created a directory called _pages in the root of my project folder and copied those files into that directory.
I added the YAML front matter:
---
layout: default
title: 100 Days of Code Log
tags: [100 days of code, challenges]
modified:
permalink: "/100-Days-Of-Code-Log/"
comments: true
image:
feature: Panorama.jpg
credit: Divine Mayhem Photography
creditlink: http://www.divinemayhem.com/
---
I then ran jekyll build and pushed the changes to GitHub.
The content on the page is not there. I added the page to _navigation.yml and it is in the navigation bar. However there is no content on the page.
I am using a theme by this guy and I have followed the documentation. But the content does not appear.
Here is the code for the page.html for the _layout directory:
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>
{% include _head.html %}
</head>
<body class="page">
{% include _browser-upgrade.html %}
{% include _navigation.html %}
{% if page.image.feature %}
<div class="image-wrap">
<img src=
{% if page.image.feature contains 'http' %}
"{{ page.image.feature }}"
{% else %}
"{{ site.url }}/images/{{ page.image.feature }}"
{% endif %}
alt="{{ page.title }} feature image">
{% if page.image.credit %}
<span class="image-credit">Photo Credit: {{ page.image.credit }}</span>
{% endif %}
</div><!-- /.image-wrap -->
{% endif %}
<div id="main" role="main">
<div class="article-author-side">
{% include _author-bio.html %}
</div>
<article class="page">
<h1>{{ page.title }}</h1>
<div class="article-wrap">
{{ content }}
{% if page.share != false %}
<hr />
{% include _social-share.html %}
{% endif %}
</div><!-- /.article-wrap -->
{% if site.owner.disqus-shortname and page.comments == true %}
<section id="disqus_thread"></section><!-- /#disqus_thread -->
{% endif %}
</article>
</div><!-- /#index -->
<div class="footer-wrap">
<footer>
{% include _footer.html %}
</footer>
</div><!-- /.footer-wrap -->
{% include _scripts.html %}
</body>
</html>
I have looked all over the web, even here in SO and I can't seem to find the issue. I did not build this template. But I thought maybe someone who had more knowledge than I do of Jekyll could be of help.
Related
This is my Directory Tree.
base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
{% include 'weapons/head/head.html' %}
{% include 'weapons/body/body.html' %}
</html>
body.html:
{% load static %}
<body>
{% block content %}{% endblock content %}
</body>
home.html:
{% extends 'weapons/base/base.html' %}
{% block content %}
<span>Hello!</span>
{% endblock content %}
When I visit my home.html, it doesn't appear to be working correctly. I see nothing on my page, however the "Hello!" message is expected to be shown. What is the problem?
Your base {% block content %} must be in base.html else it won't be usable by home.html.
base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
{% include 'weapons/head/head.html' %}
<body>
{% block content %}
{# Leave it empty or add a default content that can be overwritten by other templates #}
{% endblock content %}
</body>
</html>
I am creating an eleventy scaffolding project to learn more about SSG, this is my first time using an SSG so I am new to the templating stuff with nunjucks, etc.
What I am trying to build:
I want to create a template for a landing page/showcase that can be re-used but display different data within a for loop.
What I have:
site.json
{
"showcase": [
{
"title": "explore docs",
"url": "#"
},
{
"title": "visit github repository",
"url": "https://github.com/ExampleUser/ExampleRepo"
}
],
"404showcase": [
{
"title": "return home",
"url": "/"
}
]
}
pageShowcase.njk
Currently, I am just using an if statement to control what data set to
use but if I ever extend this to other layouts and use a third
or fourth set of data this will become really repetitive adding in a
new elseif for every new set of data
{%- set pageTitle %}{% if title %} {{title}} {% else %} {{ site.title }} {% endif %}{% endset -%}
{%- set pageDescription %}{% if description %} {{ description }} {% else %} {{ site.description }} {% endif %}{% endset -%}
<!-- Showcase -->
<div class="container">
<div>
<div>
<h1>{{ pageTitle }}</h1>
<p>{{ pageDescription }}</p>
<div class="navbar" id="navmenu">
<ul class="navbar">
{% if defualt %}
{% for item in site.showcase %}
<li>
{{ item.title}}
</li>
{% endfor %}
{% else %}
{% for item in site.404showcase %}
<li>
{{ item.title}}
</li>
{% endfor %}
{% endif %}
</ul>
</div>
</div>
<!-- <img src="assets/img/#.svg" alt="temp"> -->
</div>
</div>
</section>
index.njk
---
layout: base
defualt: true
---
<!-- include pageShowcase -->
{% include "partials/pageShowcase.njk" %}
<!-- home page content -->
<section>
<div class="container">
<main>
{{content | safe}}
</main>
</div>
</section>
404.njk
---
title: "404: Page Not Found"
description: "It looks like the page doesn not exist"
defualt: false
---
<!DOCTYPE html>
<html lang="{{ lang }}">
<!-- include head -->
{% include "partials/head.njk" %}
<body>
<!-- use pageShowcase for 404 page -->
{% include "partials/pageShowcase.njk" %}
</body>
</html>
This is the best I could come up with on my own, but I feel like there has to be a better way without re-writing the same code over and over.
Appreciate any help I can get on this one.
So far I am trying to set a paginator in my blog posts. I followed the documentation and other sites tutorial but any of these solutions did not work out for me. Considering my issue I think I am missing out on a simple step.
The blog folder sitemap.
Blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu|Roboto'>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/blog.css">
<title>Blog</title>
</head>
<body>
{% include nav.html %}
<main>
{{paginator.posts}}
<!-- post list -->
<h1>Blog Post List</h1>
<div class="post-list post-list_grid">
{% for post in site.posts %}
<!-- Post start -->
<div class="post-list__post post">
<figure class="post__preview-img">
<a href="{{post.url}}"><img src="{{ site.baseurl }}/assets/thumbnail/{{ post.titleimage }}" alt="">
</a>
</figure>
<div class="post__header">
<time datetime="2019-11-09" class="post__time">november 09, 2019</time>
<h2>{{ post.title }}</h2>
</div>
</div>
{% endfor %}
<!-- Post end -->
</div><!-- / .post-list -->
<!--scroller-->
<div id="jsScroll" class="scroll" onclick="scrollToTop();">
<i class="fa fa-angle-up"></i>
</div>
</body>
{% include scroll.html %}
{% include toggle.html %}
</script>
</html>
posts/index.html
---
layout: blog
---
{% if paginator.total_pages > 1 %}
<div class="pagination">
{% if paginator.previous_page %}
« Prev
{% else %}
<span>« Prev</span>
{% endif %}
{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
<em>{{ page }}</em>
{% elsif page == 1 %}
{{ page }}
{% else %}
{{ page }}
{% endif %}
{% endfor %}
{% if paginator.next_page %}
Next »
{% else %}
<span>Next »</span>
{% endif %}
</div>
{% endif %}
blog.md
---
layout: blog
title: Blog
pagination:
enabled: true
---
I even tried with the paginate version 2. But the result was same. It did not show any repsonse.
_config.yaml
email: your-email#example.com
description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll
# Build settings
theme: minima
plugins:
- jekyll-feed
- jekyll-paginate
# Pagination Settings
paginate: 2
paginate_path: /posts/page:num/
I am having hard time adding navbar to the github page.
I downloaded Monophase jekyll theme via this link :
http://jekyllthemes.org/themes/monophase/
I saw a navbar in the demo, but when i applied to the github.io page, I am missing navbar.
Index.markdown:
---
layout: default
---
If I set layout to default, nothing shows up and if I set to home all the posts are displaying but it does not navbar.
And there is no such thing as _data/navigation.yml in the monophase package zip I downloaded.
_site is set to .gitignore from what I received so I did not include the _site folder to the git as it was originally set, but do I need to add _site to git and create _data and navigation.yml inside this folder? to make the navigation bar?
I tried doing this but it did not work out so I'm not sure if I'm doing things right but would be nice if someone can explain what I'm doing wrong ;~;
default.html:
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
{% include head.html %}
<body>
<div class="container">
{% include header.html %}
<div>hello</div>
<main>{{ content }}</main>
{% include footer.html %}
</div>
{% if page.math %} {% include mathjax.html %} {% endif %} {% if
jekyll.environment == 'production' and site.google_analytics %} {% include
google-analytics.html %} {% endif %}
</body>
</html>
Header.html :
<header class="masthead">
<div class="masthead-title">
{{ site.title }}
<small class="tagline">{{ site.tagline }}</small>
</div>
{% if site.data.navigation %}
<nav class="nav">
<ul class="nav-list">
{% for item in site.data.navigation %}
<li class="nav-item">
<a href="{{ item.url | relative_url }}" class="{% if page.url == item.url %}current{% endif %}">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
</header>
Home.html:
---
layout: default
title:home
---
<div class="posts">
{% assign posts = site.posts %} {% if paginator %} {% assign posts =
paginator.posts %} {% endif %} {% for post in posts %}
<div class="post">
<h2 class="post-title">
{{ post.title }}
</h2>
<time datetime="{{ post.date | date_to_xmlschema }}" class="post-meta"
>{{ post.date | date_to_string }}</time
>
<p class="post-excerpt">
{% if post.description %} {{ post.description | strip_html }} {% else %}
{{ post.excerpt | strip_html }} {% endif %}
</p>
</div>
{% endfor %}
</div>
{% if paginator %}
<div class="pagination">
{% if paginator.next_page %}
<a
class="pagination-item older"
href="{{ paginator.next_page_path | relative_url }}"
>Older</a
>
{% else %}
<span class="pagination-item older">Older</span>
{% endif %} {% if paginator.previous_page %}
<a
class="pagination-item newer"
href="{{ paginator.previous_page_path | relative_url }}"
>Newer</a
>
{% else %}
<span class="pagination-item newer">Newer</span>
{% endif %}
</div>
{% endif %}
Yes, or at least it's possible, but unclear given what you've shared.
With Jekyll on your desktop, you are locally building an html directory which would be a static version of your site. This is very likely the _site folder. If this is what you did (successfully), then the contents of that directory are a complete website; *.html files, etc.. Copy the content of this folder to your Git Pages repo, and they should work as-is. _site is in .gitignore because it is a by-product of your code, and in a sense, a duplicate, just in different format.
The advantage of this route is you can view the built html and iterate on your code more quickly, without taking your site down or testing changes live. More to the point, you can open the _site folder and view index.html or similar in your browser to see how things are working. The Demo for this style wasn't working when I tried to access it, and I wasn't able to find the source code for the default implementation (which DID have a nav bar), to be able to tell you how they set it up.
The alternative route is to maintain your Git repo with Jekyll-themed files, and Github will build the site for you. Assuming up-to-date versions, this should be the same as what you did on your desktop.
For this route, I'd suggest reading documentation on how to add a menu/navigation to your _config.yml file. This is usually where the navigation is specified, but you can certainly override it or customize a navigation in supporting css files. This is also something that you'll want to consult documentation for.
I am trying to use more different views in one template via different blocks or include method but I have got stuck. My aim is to implement my different views into one template. I tried to more solution but these haven't worked for me. I show these solution:
My views:
def dashboard_data(request):
# Here I collect data from my PostgreSQL database I push these into
#Objects and I send it to my test_a.html via render like below.
return render(request, 'my_project/test_a.html', send_data)
def chart_data(request):
#In these view my final goal is to collect data from database and create
#charts but for the simplicity I just use a list (a=[1,2,3,4]) and I
#push it to the test_b.html and I render it.
render(request, 'my_project/test_b.html', send_data))
My templates:
1, base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% block title %}<title>My project</title>{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include CSS files -->
{% load static %}
<!-- Include CSS files -->
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-table.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
</head>
<body>
{% block sidebar %}
{% endblock %}
{% block content%}
{% endblock %}
</body>
</html>
1, test_a.html
{% extends "monitor/base.html" %}
{%block content%}
{%for i in table%}
<p> {{i.record}}</p>
{%endfor%}
{%endblock}
2, test b.html
{%for i in a%}
<p> {{i}}</p>
{%endfor}
So my goal would be that the test_b.html's result could appear in the base.html.
My solutions:
A: I tried to put into a block the test_b.html and integrate in the base.html
1, base.html (test1):
{% block conent%}
{% endblock %}
{% block chart%}
{% endblock %}
1, test_b.html (test1):
{% extends "monitor/base.html" %}
{%block chart%}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
B: I tried to use {{ block.super }}
1, base.html (test1):
{% block conent%}
{% endblock %}
1, test_b.html (test1):
{% extends "monitor/base.html" %}
{%block content%}
{{ block.super }}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
C: Finally I used include method too but I didn't work for me as well. Here I tried to use simple html tags like (<p>Hello world</p>) int the test_b.html and worked. So If I do not use variables it works but I have to use my variables from my views.
1, test_a.html
{% extends "monitor/base.html" %}
{%block chart%}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
{% include "my_project/test_b.html" %}
2, test_b.html
{%for i in a%}
<p> {{i}}</p>
{% endfor %}
To include an HTML file from another file just use {% include 'htmlfilename.hml' %}
outside {% block your_block_name %}{% endblock %} if it's a base template.
You can learn more about it here.
<body>
{% include 'header.html' %}
{% block sidebar %}{% endblock %}
{% block content%}{% endblock %}
{% include 'footer.html' %}
</body>
If you want to use some functionality across several templates then use inclusion_tags.
As #alessioferri20 mentioned, you cannot render 2 views at the same time. Basically, one view corresponds to one HTTP request & response.
You can achieve what you want by using custom template tags:
https://docs.djangoproject.com/en/2.0/howto/custom-template-tags/
but I have to use my variables from my views.
For example, chart_data could be an inclusion tag (https://docs.djangoproject.com/en/2.0/howto/custom-template-tags/#inclusion-tags), here is some pseudo-code:
Let's say you want to show a chart for the age_stats from your view:
def your_view(request, ...):
age_stats = {...}
....
return render(request, "template...", {'age_stats': age_stats})
In your template:
{% chart age_stats %}
In your template tags:
#register.inclusion_tag('path-to/chart.html')
def chart(input_data):
# collect data from database & use the input_data coming from your view
data = ...
return {'data': data}
The {% include %} tag is how you insert other templates into blocks. These templates don't need to be registered in views.py or urls.py.
For example:
{% extends 'base.html' %} {% block home %} {% load static %}
<div>
<h1>Some Title</h1>
<p>Some text</p>
</div>
<div>
{% include 'some-other-template.html' %}
</div>
{% endblock %}
For more information: https://docs.djangoproject.com/en/4.1/ref/templates/builtins/