For my website, I have little code files to download, such as python (.py) files. I have the <a> tags for the downloads, but would like to display the source code before downloading it. On hover, I can display an iframe, but am having trouble getting the code to display.
FYI: I am using github pages for everything, and the files are in the site repo.
Jekyll code for the DL list.
<ul class="dl-display">
<!-- get the folder name that the index..html file is contained in -->
{% assign path_array = page.path | split: '/' %}
{% assign path_array_rev = path_array | reverse %}
{% assign page_dir = path_array_rev[1] | prepend: '/'%}
{% for item in site.static_files %}
{% if item.path contains page_dir %}
{% unless item.path contains 'index.html' %}
{% assign split_path = item.path | split: '/' %}
{% assign filename = split_path.last %}
{% assign rev_split_path = split_path | reverse %}
{% assign dirname = rev_split_path[1] %}
{% unless item.path contains '.txt' %}
<li><a href="{{site.baseurl}}{{item.path}}" download>{{filename}} <iframe id="sourcetooltip" src='{{item.path}}'></iframe></a></li>
{% endunless %}
{% if item.path contains 'description.txt' %}
<iframe src='{{item.path}}' scrolling='no' frameborder='0'></iframe>
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
</ul>
Sorry if the code is a bit messy, as I am still pretty new to web development.
The code that displays the iframe when filename is description works perfectly and displays the text.
In the unless block, the file begins to download. Is there any way to display the .py files like the txt files are displayed instead of downloading them?
Sorry if I'm not clear, its my first time with HTML, CSS, JS, and whatever else is used in web development.
Try using the iframe attribute srcdoc. It's value can be a whole page of HTML without investing time into a separate page.
SNIPPET
<iframe id='ifrm1' name='ifrm1' srcdoc="
<style>
section {
padding:5px;
background: rgba(0,0,0,.6);
}
code {
font:400 12px/.6 Consolas;
background: rgba(0,0,0,.8);
color: lime;
padding:5px;
}
</style>
<section>
<pre><code>
import urllib2
import urllib
import json
url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&'
query = raw_input('What do you want to search for ? >> ')
query = urllib.urlencode( {'q' : query } )
response = urllib2.urlopen (url + query ).read()
data = json.loads ( response )
results = data [ 'responseData' ] [ 'results' ]
for result in results:
title = result['title']
url = result['url']
print ( title + '; ' + url )
</code></pre>
</section>" width='100%' frameborder='0'></iframe>
Related
I am trying to include a template file dynamically, but the variable does not appear to expand in the include declaration. How is this best done?
{% for file in files %}
{% include "{{ file }}.txt" %}
{% endfor %}
The error I am getting is:
jinja2.exceptions.TemplateNotFound: {{ file }}.txt
The below works for me.
I would like to clarify having a "." in jinja2 might create an issue so it would be better to pass the entire filename with extension to jinja2.
The usage of double quotes would not render the variable value so it would remain as it is like {{ file }}
The below works:
from jinja2 import Environment, FileSystemLoader
data = '''
{% for file in files.split(",") %}
{% include file %}
{% endfor %}
'''
template = Environment(loader=FileSystemLoader("templates/")).from_string(data)
msg = template.render(files="1.txt")
print(msg)
Output:
1.txt
I have a collection _colletion. In there is a file _collection/path/topic.md and a folder _collection/path/topic/ that includes lots of .md files with content. The permalinks for these files are /path/topic and /path/topic/file-x - so a parent page with a folder with the same name with multiple random pages in it.
Now I want to output a link to /path/topic in all these .md files with the title of topic.md as link text:
---
title: This is the page title defined in topic.md
---
should become
This is the page title defined in topic.md
How do I do that most easily?
Can I somehow access the folder name topic of the .md files and use this to read topic.md and output it's title and also generate a link to it?
My current manual "solution" (or workaround):
Add a parent entry to the frontmatter of all pages in /topic/ that contains the title and relative URL for the topic.md:
parent: ['Topic Title', '../topic']
In the template of the pages:
{% if page.parent %}
<p>« {{ page.parent[0] }}</p>
{% endif %}
Works, but of course duplicates this information n times and has to be maintained manually.
How about this (option 1)?
{% assign pageurl_array = page.url | split: "/" %}
{% assign path = pageurl_array[0] %}
{% assign topic = pageurl_array[1] %}
<p>« <a href="{{ path }}/{{ topic }}/{{ topic }}.html">
{{ topic | capitalize | replace: "-", " " }}
</a></p>
If you do not mind crazy build times, do this (option 2):
{% assign pageurl_array = page.url | split: "/" %}
{% assign path = pageurl_array[0] %}
{% assign topic = pageurl_array[1] %}
{% capture parent_url %}{{ path }}/{{ topic }}/{{ topic }}.html{% endcapture %}
<p>« <a href="{{ parent_url }}">
{% for i in site.pages %}
{% if i.url == parent_url %}
{{ i.title }}
{% endif %}
{% endfor %}
</a></p>
I would go for the first option (much faster) and use this javascript to get the capitals and special characters right:
$('a').each( function() {
var str = $(this).html();
str = str.replace('Topic from url', 'Topic from URL');
$(this).html(str);
});
I admit that the javascript solution is far from pretty, but it solves the build time problem pretty well.
Note that Jekyll is pretty slow. I would advice you to dig into Hugo if you require faster build times.
During discussion in the comments on my question and the other answers I noticed that what I wanted to build was actually a very common thing: A breadcrumb navigation! Just a very "small" one, with only one level.
With this newfound knowledge I could google "breadcrumb" plugins for Jekyll:
This solution uses the path of the page to extract the "crumbs":
https://www.mikestowe.com/blog/2017/08/adding-breadcrumbs-in-jekyll.php
It uses the folder name for the link text.
Another similar implementation:
https://stackoverflow.com/a/9633517/252627
Another one:
https://stackoverflow.com/a/37448941/252627
So no title link text in all of these.
This solution actually reads the page title, but can also read breadcrumb frontmatter from the pages, and uses these as link text:
https://github.com/comsysto/jekyll-breadcrumb-for-github-pages/
https://comsysto.com/blog-post/automatic-breadcrumb-for-jekyll-on-github-pages
https://gist.github.com/csgruenebe/8f7beef9858c1b8625d6
This one might be a valid solution.
There are also real plugins (that unfortunately don't work with Github Pages):
https://github.com/git-no/jekyll-breadcrumbs
My solution, based on JoostS code:
{% assign url = page.url | remove:'.html' | split: "/" %}
{% assign path = url | pop %}
{% if path.size == 1 %}
<a class="back" href="/home/">home</a>
{% else %}
<a class="back" href="/{% for dir in path offset: 1 %}{{ dir | append: "/" }}{% endfor %}">{{ path | last }}</a>
{% endif %}```
I've created a system for my client to be able to display a product details/specification table on product pages with product tags which works similar to the Supply theme's grouped filter tags eg. a product that has a tag "Brand_Philips" will automatically add a row to the table with the first column being "Brand" and the second "Philips".
I added an input in the theme settings_schema.json so my client should be able to add/remove and reorder the details, and all I have to do now is just loop thru the new setting and check if there is a matching tag and add it to the table, but for some reason when I loop the details within the tags loop everything works fine and when I loop the tags within the details the whole page get's messed up.
Here's my code:
In settings_schema.json:
{
"name": "Sort Product Details",
"settings": [
{
"type": "text",
"label": "Type the product detail tags in a comma-separated list.",
"id": "product_details",
"info": "List items must be identical to the tag prefixes (no underscore), and have no spaces between commas.ie. Brand,Avarage Lifetime,Watts,Volts"
}
]
}
In the product page I wrote this code:
{% assign marker = '_' %}
{% assign productDetails = settings.product_details | split: ',' %}
{% assign found = false %}
{% for tag in product.tags %} <!-- The tags loop -->
{% for detail in productDetails %} <!-- The details loop -->
{% if tag contains marker and tag contains detail %}
{% if found == false %}
{% assign found = true %}
<hr>
<h3>Product Details:</h3>
<table class="table-striped">
{% endif %}
{{ tag | replace: marker, ': </strong></td><td>' | prepend: '<tr><td><strong>' | append: '</td></tr>' }}
{% if found and forloop.last %}</table>{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
Notice that I loop details within the tags loop but when I loop the tags within the details loop my page get's all messed up.
Here's how my page looks normally:
And here's how my page looks when I loop the tags within the details loop:
The reason I want it to loop the tags within the details loop is that I want my client to be able to reorder the details - and it should not display in its alphabetical order - the way the tag loop works.
Thanks in advance!
Martin.
After asking this question on the Shopify forums I got an answer and would like to share it here.
The reason why it all got messed up is that the closing </table> tag was only added at the end of the loop with this code {% if found and forloop.last %}</table>{% endif %} and when rendering only the tags that are included in the details it never reached the last tag.
So here is my fixed code:
{% assign marker = '_' %}
{% assign productDetails = settings.product_details | split: ',' %}
{% assign found = false %}
{% for detail in productDetails %}
{% for tag in product.tags %}
{% if tag contains marker and tag contains detail %}
{% if found == false %}
{% assign found = true %}
<hr>
<h3>Product Details:</h3>
<table class="table-striped">
{% endif %}
{{ tag | replace: marker, ': </strong></td><td>' | prepend: '<tr><td><strong>' | append: '</td></tr>' }}
{% endif %}
{% endfor %}
{% if found and forloop.last %}</table>{% endif %}
{% endfor %}
Note that the tag loop is in the details loop and the closing </table> tag is added in the end of the details loop.
I have a base.html which i extends to other pages also. In few pages , images are displayed but in few it does not. other than images , everything like header , section are displayed.
{% load staticfiles %}
some more --like header , section
<footer>
<div id="footer">
{% block footer %}
<img src ="../../static/blog/images/git.png">
<p>© 2016 shankar.</p>
{% endblock %}
</div>
My template file
{% extends 'blog/base.html' %}
{% block content %}
<h1>Articles for {{ year }}</h1>
{% for article in article_list %}
<h4>{{ article.headline }}</h4>
<h5>Posted by <strong>{{ article.reporter }}</strong>
on {{article.pub_date|date:"F j, Y"}}</h5><hr/>
{% endfor %}
{% endblock %}
url `
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$',views.index,name='index'),
url(r'article/(?P<year>[0-9]{4})/$', views.year_archive, name='year_archive'),
url(r'article/(?P<year>[0-9]{4})/(?P<month>[0-9]{2})/$', views.month_archive, name='month_archive'),
url(r'(?P<article_id>[0-9]+)/$',views.article_detail,name='article_detail'),
url(r'^comment/(?P<article_id>[0-9]+)/$' ,views.comment,name='comment'),
url(r'^contact',views.contact,name='contact'),
]`
views
ef year_archive(request,year):
#year=str(pub_date)[0:4]
year=year
try:
article_list = Article.objects.filter(pub_date__year=year)
except Article.DoesNotExist:
raise Http404("Article does not Exists")
context = {'year':year, 'article_list':article_list}
return render(request, 'blog/year_archive.html',context)
It's because you're not using the correct src. You should let the static function handle the static files. When the url changes ../../ will not be correct anymore, depending on the path.
You should configure the static directory in your settings.py file and then reference your image like this:
<img src ="{% static 'blog/images/git.png' %}"></a>
You're loading staticfiles but you never actually use it, you should use the static template tag
"../../static/blog/images/git.png"
should be
{% static 'blog/images/git.png' %}
You should also use the url template tag..
I am trying out Jekyll to help someone who's not all that technical maintain their own static site. I would like to be able to have a images directory in the app's root /images containing images following a naming convention:
post_one_1.jpg, post_one_2.jpg, post_two_1.jpg, post_two_2.jpg ... etc.
I would then like for the user to create a post (post_one) and dynamically grab all of the images pertaining to that post from the images directory.
This plugin (https://gist.github.com/jgatjens/8925165) does almost exactly what I need, but isn't compatible with github pages.
Is there a solution in which I can hand the site off to a user and they would only need to add images to the image directory following the naming convention and then create a post and have access to the images?
Given you have a post file _posts/2015-05-28-post_one.md
From inside this post you have :
page.id = /2015/05/29/post_one
page.dir = /2015/05/29
In order to extract post_one whe do :
{% assign imgNameStart = page.id | remove: page.dir | remove: "/" %}
We now generate the base path we search for :
{% assign imgBasePath = imgNameStart | prepend: "/images/" %}
in this case it will be imgBasePath = "/images/post_one"
Loop over all our static files (files that are not pages or posts).
{% for img in site.static_files %}
And print images that have /images/post_one in their path like /images/post_one-01.jpg or /images/post_one-wathever-you-want.jpg
{% if img.path contains imgBasePath %}
<img src="{{ site.baseurl }}{{ img.path }}">
{% endif %}
{% endfor %}
All together :
{% assign imgNameStart = page.id | remove: page.dir | remove: "/" %}
{% assign imgBasePath = imgNameStart | prepend: "/images/" %}
{% for img in site.static_files %}
{% if img.path contains imgBasePath %}
<img src="{{ site.baseurl }}{{ img.path }}">
{% endif %}
{% endfor %}
Beware of code indentation if your post is a markdown file, four space indentation can be transformed to code snippet.