Jekyll multidirectory portfolio website - not able to call particular files - github

I've moved to Jekyll blogs since I wasn't using most of the features in Wordpress, and since my main is to have a portfolio I don't really need to be spending so much for hosting etc.
I'm having an issue calling my about.md file in my index.html in the about directory. The about.md file contains the information about myself (simple portfolio info. that will rarely be changed).
Currently the index.html file in about directory is:
---
layout: post
title: "About Me"
---
{% include head.html %}
<body class="about">
<div class="pure-g">
<section class="pure-u-2-3 container">
{% include nav.html %}
</section>
{% include about.md %}
</div>
{% include footer.html %}
</body>
As you can see I am calling the head.html + footer.html files from _include directory. I'm not sure how to call about.md though (this is the file containing info. I want shown on the page when the page is generated on the web).
Also, in which directory should about.md be? I initially had it in the root directory, but then moved it to _includes as I wanted to call it - was a right?
I'm still learning the bits and pieces of this, but can't find a tutorial.

Related

Github Pages, Jekyll. How to define output page for posts?

I am new to github pages and am currently trying to build a blog for my Design Studies but can't seem to get my post to output to the correct pages.
Currently all posts are being posted on the home page but need to be displayed on their appropriate course pages.
https://angusharrison.github.io/Design/
https://github.com/AngusHarrison/Design
Here is my sidebar menu
<menu class="sidebar-menu">
<li class="menu-items"><a class="menu-links" href="{{site.baseurl}}/">Home</a></li>
<li class="menu-items"><a class="menu-links" href="{{site.baseurl}}/about/">About</a></li>
<li class="menu-items"><a class="menu-links" href="{{site.baseurl}}/INDN211/">INDN211</a></li>
<li class="menu-items"><a class="menu-links" href="{{site.baseurl}}/INDN241/">INDN241</a></li>
<li class="menu-items"><a class="menu-links" href="{{site.baseurl}}/INDN341/">INDN341</a></li>
</menu>
When creating a post i would like to be able to output the post to the desired Page e.g https://angusharrison.github.io/Design/INDN211/
Any help is greatly appreciated
I have checked your Github repository, and here are the results:
Instead of single fixed links you currently have in your sidebar.html like
<li class="menu-items"><a class="menu-links" href="{{site.baseurl}}/INDN211/">INDN211</a></li>
use this in your sidebar:
{% for post in site.posts %}
<li class="menu-items">
<a class="menu-links" href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
This loops over your posts in the root of your _posts folder and it is using the title from the front matter of each post. You could easily add something like linktext: anyvalue to the front matter of each post and use post.linktext instead of post.title in the loop as link name.
The post files should be named like 2020-02-02-anynameyoulike.md, remove the seconds(?) from your filenames. And, there should be no subfolders.
Additionally I removed this from your _config.yml, as your question is around posts, not collections, it seems that you don't need that:
permalink: ':title/'
collections:
INDN211
INDN241
INDN341
Optional, but I recommend to remove any collection: anyvalue and permalink: anyvalue from the frontmatter of your posts. You don't need them.
Result:
I recommend to read this page about posts https://jekyllrb.com/docs/posts/
as well as the rest of the Jekyll documentation :)

In October CMS, how can I make an image editable in a Static Page?

I'd like to set up a generic marketing template using the October CMS "Static Pages" plug-in. The intention is to allow my clients to create their own marketing pages. Let's assume that my layout contains HTML similar to this:
<img src="/path/to/image.jpg">
<hr>
<p>Some uneditable copy</p>
{% placeholder copy default title="Main Page Copy" type="html" %}
<h1>Some Awesome Headline</h1>
<p>Sea no omnium deserunt, eum tale movet sensibus te.</p>
{% endplaceholder %}
How could I allow my clients to change the image?
You have a full explenation here
https://octobercms.com/blog/post/building-client-friendly-websites
Add this code to your layout
{variable name="banner" label="Banner" tab="Header" type="mediafinder" mode="image"}{/variable}
and this into your html markup
<img src="{{ banner|media }}" alt="" />
You will see the extra field in your backend
It doesn't seem to be currently supported: https://github.com/rainlab/pages-plugin/issues/13, but maybe you can use the media manager

Flask meta charset inheritance

I am working with Flask in order to develop a web page.
I have done a layout.html file with a header in which I include the
encoding.
When I develop a new html file, I extend the layout.html file.
{% extends "layout.html" %}
{% block content %}
<h2>{{ title }}.</h2>
<h2>Introducción</h2>
{% endblock %}
My problem is that the meta encoding is not being taken and i cant write in Spanish.
Any one knows what to do?

Github Pages - processing Jekyll content w/o running Jekyll locally?

I'm trying the waters with Github pages, and (at the machine I'm trapped at for the moment) can't install Jekyll locally. The impression I get from the documentation is that I should just be able to write the Jekyll template commands into the content, and Github will know what to do as the commits come in.
However, that doesn't seem to be happening.
Specifically, I added: _includes/header.html:
<ul>
<li id="home_page">Home</li>
<li id="other_page">Other Stuff</li>
</ul>
and then in root index.html:
<body>
{% include header.html %}
<p>helloworld</p>
</body>
but when I go that page, it shows the include statement, instead of the processed page. I am working in the gh-pages branch (and have that set to default).
What other steps do I need to take to actually have Github process the templates?
Discovered via asking Github support:
Files for Jekyll processing actually are unique. They need to have a YAML block at the beginning, even if that block is empty. So, the above code basically needed
--- <-- these two lines of dashes are
--- <-- important
<!doctype html>
<html>
<head>
<script type="text/javascript" src="site.js"></script>
</head>
<body>
{% include header.html %}
<p>some edit? helloworld</p>
</body>
</html>
You need to include those two lines of dashes --- before starting a document that you'd like to be processed by Jekyll. If you do not, Jekyll simply copies your files as it is and does not run the commands.
You can specify different parameters between those dashes, like title, description, date, tags, categories etc etc.

Can Ant be used to embed variable AngularJS templates?

I want to embed a variable amount of text files (AngularJs templates) at a specific point of a given text file (./WEB-INF/app.html) but except modifying the file saving it as another file (./index.html?.
The files I want to embed all have file names ending with *.ng.html and are all in a subfolder of ./assets/templates/.
Also I want to write text before and after the embed file (To make AngularJS recognise that they are templates). This text should consist of both static text and the file names relative to the working directory.
This is a possible structure of a working directory:
(index.html) (generated after building)
--assets
--templates
--general
about.ng.html
contact.ng.html
home.ng.html
--users
userlist.ng.html
--WEB-INF
app.html
Can this be done using Ant? If not, how could I do this at build-time in Eclipse?
To further illustrate my intentions, here are examples:
./WEB-INF/app.html
<!doctype html>
<html><head>
#INSERTION_POINT#
</head><body></body></html>
./assets/templates/general/about.ng.html
This is a test.
./assets/templates/general/contact.ng.html
You can contact me at: <a href=mailto:mail#example.com>mail#example.com</a>
./assets/templates/general/home.ng.html
Welcome.<br>
Click a link to explore.
./assets/templates/users/userlist.ng.html
<ol>
<%= "{{#userlist}}" %>
<li>
{{username}}
</li> <%= "{{/userlist}}" %>
</ol>
After building, I want ./index.html to look like:
<!doctype html>
<html><head>
<script type="text/ng-template" id="/assets/templates/general/about.ng.html">
This is a test.
</script>
<script type="text/ng-template" id="/assets/templates/general/contact.ng.html">
You can contact me at: <a href=mailto:mail#example.com>mail#example.com</a>
</script>
<script type="text/ng-template" id="/assets/templates/general/home.ng.html">
Welcome.<br>
Click a link to explore.
</script>
<script type="text/ng-template" id="/assets/templates/users/userlist.ng.html">
<ol>
<%= "{{#userlist}}" %>
<li>
{{username}}
</li> <%= "{{/userlist}}" %>
</ol>
</script>
</head><body></body></html>
I figured out that I can get a list of the files I want to embed using:
<fileset dir="war/assets/templates">
<include name="**/*.ng.html"/>
</fileset>
When I have the final string, I could replace my placeholder and save the output to a new file probably like this:
<copy file="WEB-INF/app.html" tofile="index.html">
<filterset>
<filter token="INSERTION_POINT" value="??foo??"/>
</filterset>
</copy>
But how do I get the string I want to have to pass as a value?
definitely not what you're looking for... sorry... but might look into a Javascript oriented build tool (Grunt) and integrate that with eclipse (or even run it from ant if you're trying to keep your builds the same in java and javascript.)
Though this may not be exactly what you're looking for, you're guaranteed lots of community support if you stick to the standards.