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.
Related
I have been looking at multiple answers to similar questions here on stack overflow and other sources, but simply cannot solve my problem.
I have a page consisting of index.md which has the following frontmatter:
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
title: title
layout: default
pagination:
enabled: true
---
And this is what I do to list my post:
<!--
Here is the main paginator logic called.
All calls to site.posts should be replaced by paginator.posts
-->
{% for post in paginator.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
</h2>
</li>
{% endfor %}
</ul>
<!--
Showing buttons to move to the next and to the previous list of posts (pager buttons).
-->
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.previous_page %}
<li class="previous">
← Newer Posts
</li>
{% endif %}
{% if paginator.next_page %}
<li class="next">
Older Posts →
</li>
{% endif %}
</ul>
{% endif %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="previous">
Previous
</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">
Page: {{ paginator.page }} of {{ paginator.total_pages }}
</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
I have added the gem to plugin list and to the gem file and run bundle install, and my configuration looks like this:
pagination:
enabled: true
per_page: 3
offset: 2
permalink: '/page/:num/'
title: ':title - page :num of :max'
limit: 0
sort_field: 'date'
sort_reverse: true
However when I run bundle exec jekyll s my test post is not listed.
But if I use:
{% for post in site.posts%}
{{post.title}}
{% endfor %}
My test post is listed as I intent. Anyone who can help me towards, what I am doing wrong, I simply cannot spot it.
Do you have a specific reason for including offset: 2 in the _config.yml? This will exclude the first 2 posts from appearing in the pagination so if you don't have at least 3 posts in your project nothing will be displayed.
Try removing the offset line from your config file, rerun bundle exec jekyll serve, and see if the functionality works.
For offset usage check the jekyll-paginate-v2 README section "Offsetting posts".
I followed the approach to install paginate v2 and paginate a collection, but I get an additional "Example Collection" top level page link for every page created by paginator.
Here is example.md
---
layout: page
title: Example Collection
permalink: /example/
pagination:
enabled: true
---
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
{% endfor %}
{% if paginator.total_pages > 1 %}
<ul>
{% if paginator.previous_page %}
<li>
Newer
</li>
{% endif %}
{% if paginator.next_page %}
<li>
Older
</li>
{% endif %}
</ul>
{% endif %}
And this is what I added to my config.yml
# Collections
collections:
examplecol:
output: true
permalink: /:collection/:path/
# Plugin: Pagination (jekyll-paginate-v2)
pagination:
collection : 'examplecol'
enabled : true
debug : false
per_page : 3
#permalink : "/page/:num/"
title : ":title - Page :num of :max"
limit : 0
sort_field : "date"
sort_reverse : true
Now, if there are more than 3 files in the _examplecol folder, I get more than 1 instance of the example.md as a page in my header.
How can I have just one instance of Example Collection in the header that holds all of the paginated pages? I think I'm missing something silly.
I tried deleting the permalink entry in the example.md YAML, but that just made it so that the jekyll processor could not find examplecol/index.html.
It took me a lot of trial and error, but I found the solution in the header.
When the paginator makes pages with some items, the site sees them as pages and renders them.
Therefore, the site finds all the true responses to my_page.title and creates page-links.
<div class="trigger">
{% for my_page in site.pages %}
{% if my_page.title %}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{% endif %}
{% endfor %}
</div>
Since the paginator pages are autogen, you can filter them out:
<div class="trigger">
{% for my_page in site.pages %}
{% if my_page.title and my_page.autogen == nil %}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{% endif %}
{% endfor %}
</div>
I have used the below code snippet from the Jekyll website to paginate Jekyll plog posts on my index.html page:
<div class="container">
<ul class="post-list">
<!-- This loops through the paginated posts -->
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
{% 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 %}
</ul>
</div>
However when I try to add this to a /pages/Blog.html page it does not work. It does not show any of the posts in my _posts directory and instead produces and empty container. I am assuming it is a path issue.
I have added the YAML header to the Blog.html file as required. When page is rendered it produces an empty container.
If you want an url that looks like /pages/Blog/ for your posts listings :
activate pagination by setting a paginate: 5 in _config.yml
set paginate_path: pages/Blog/page:num in _config.yml
rename /pages/Blog.html to pages/Blog/index.html
In my index of blog posts I'd like to grab the first image from the post to display it in the index using just liquid so it works on github pages.
I have a feeling split is the way to go, but I'm not good with liquid.
I'd like to be able to get the image url and put it in a variable to style it.
The ideal solution would be something like:
{% for post in site.posts %}
<li>
{{post.content | first_image}}
</li>
{% endfor %}
Any ideas?
You can define a custom variable to your Front Matter called "image", so it's going to work like Wordpress's posts Featured Image:
---
image: featured-image.jpg
---
Note to remember where is your image saved. In my case, I created a directory called "imagens" (PT-BR here). Then, go to your index.html and add the image to your template, wherever you want. In my site it looks like this:
<ul class="post-list">
{% for post in site.posts %}
<li>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }},</span>
<span class="post-meta">por</span>
<span class="post-meta">{{ post.author }}</span>
</li>
//IMAGE
<img src="{{ site.baseurl }}/imagens/{{ post.image }}">
//IMAGE
{{ post.excerpt }}
<a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}">Continuar lendo</a>
{% endfor %}
</ul>
That's it.
Some solutions to your problem :
1 - Use the Post Excerpt tag Documentation is here
Your post :
---
layout: post
title: Testing images
---
## Title
Intro Text
More intro text
Some more text blah !
Your template :
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
As your image tag appears before the excerpt_separator (\n\n = two newlines) it will be in the post excerpt.
2 - Use your post's Yaml front matter to store your image's datas
Post :
---
layout: post
title: Testing images
images:
- url: /assets/img/cypripedium-calceolum.jpg
alt: Cypripedium Calceolum
title: Cypripedium Calceolum
- url: /assets/img/hello-bumblebee.jpg
alt: Hello bumblebee !
title: Hello bumblebee !
---
Intro here yo ! <-- THIS IS THE EXCERPT
Post body begin, and first image not in excerpt
{% assign image = page.images[0] %} <-- first element of the array is zero
{% include image.html image=image %}
Some more text blah !
{% assign image = page.images[1] %}
{% include image.html image=image %}
_includes/image.html (centralized in an include for standardization, but can be in the template) :
<img src="{{ site.baseurl }}{{ include.image.url }}" alt="{{ include.image.alt }}" title="{{ include.image.title }}">
The index page :
<ul class="posts">
{% for post in site.posts %}
<li>
<span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
{{ post.excerpt }}
{% assign image = post.images[0] %}
{% include image.html image=image %}
</li>
{% endfor %}
</ul>
Got it to work. Not sure how it will scale, but this liquid code loops through all the posts and grabs the source for the first image from a post and displays that post. I tested it with multiple images and it works as expected.
<ul>
{% for post in site.posts %}
<li>
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<img " %}
{% for image in images %}
{% if image contains 'src' %}
{% if foundImage == 0 %}
{% assign html = image | split:"/>" | first %}
<img {{ html }} />
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}
{{ post.title }}
</li>
{% endfor %}
</ul>
If you just need the image URL instead of the whole thing in img tag, you can use the following method.
Install Liquid filter match_regex:
gem install match_regex
Then add it to your Jekyll config:
plugins:
- match_regex
Create a capture snippet in your template:
{% capture post_first_image %}
{% assign hero_image = page.content | match_regex: '<img .*?src="([^"]+)"' %}
{% if hero_image == nil %}
{% assign hero_image = "/placeholder-image.png" | prepend: site_base %}
{% endif %}
{{ hero_image }}
{% endcapture %}
Template:
<meta property="og:image" content="{{ post_first_image | strip }}">
You can simply remove the if condition if you don't need placeholder image.
I've taken David's answer and found a way to get just the src attribute from the img tag.
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<img " %}
{% for image in images %}
{% if image contains 'src' %}
{% if foundImage == 0 %}
{% assign html = image | split:"/>" | first %}
{% assign tags = html | split:" " %}
{% for tag in tags %}
{% if tag contains 'src' %}
<img {{ tag }} />
{% endif %}
{% endfor %}
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}
I am new in HWIOAuthBundle with Symfony2.3 +FosUserBundle.
I am using this bundle for facebook, twitter, googleplus login in my project.
I have successfully install this and this working fine.
But I want to override login.html.twig because I want to show facebook , twitter, google plus Images to our twig file but I don't know How I can do this in HWIOAuthBundle.
My login.html.twig
{% block content %}
{# Bonus: Show all available login link in HWIOAuthBundle #}
{% render(controller('HWIOAuthBundle:Connect:connect')) %}
{% endblock %}
Base HWIOAuthBundle login.html.twig
{% extends 'HWIOAuthBundle::layout.html.twig' %}
{% block hwi_oauth_content %}
{% if error %}
<span>{{ error }}</span>
{% endif %}
{% for owner in hwi_oauth_resource_owners() %}
{{ owner | trans({}, 'HWIOAuthBundle') }} <br />
{% endfor %}
{% endblock hwi_oauth_content %}
Which one showing this type in Html page:
Facebook
Google Plus
Twitter
this is show by default when click any one then redirect to his page(Facebook,Twitter,Google Plus).
But And I want to show this type HTML:
<!-- socials -->
<ul class="top-socials">
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="google-plus" href="#">Google+</a></li>
</ul>
How can I do this ?
To be more specific about your case, you should create 2 new views:
app/Resources/HWIOAuthBundle/views/layout.html.twig:
{# extends your own base template #}
{% extends 'MyBundle::layout.html.twig' %}
{% block title %}{{ 'Login' | trans }}{% endblock %}
{% block body %}
{% block hwi_oauth_content %}
{% endblock hwi_oauth_content %}
{% endblock %}
app/Resources/HWIOAuthBundle/views/Connect/login.html.twig:
{% extends 'HWIOAuthBundle::layout.html.twig' %}
{% block hwi_oauth_content %}
{# Display oauth errors (here using Bootstrap) #}
{% if error is defined and error %}
<div class="row">
<div class="col-md-12 alert alert-danger text-center">
<span class="error">{{ error }}</span>
</div>
</div>
{% endif %}
{# HWIOAuthBundle integration #}
<ul class="top-social">
<li><a class="#" href="{{ hwi_oauth_login_url('facebook') }}">Facebook</a></li>
<li><a class="#" href="{{ hwi_oauth_login_url('twitter') }}">Twitter</a></li>
<li><a class="#" href="{{ hwi_oauth_login_url('google') }}">Google+</a></li>
</ul>
{% endblock hwi_oauth_content %}
Do not be tempted to put this login page in the first file, because OAUthBundle uses several other views (to confirm profile, etc).
This example is taken from symfony-quickstart project.
You have two solutions for that :
Use bundle inheritance and refine the template with parent path
Declare a template in you app/Ressources/ like that : app/Ressources/AcmeBundle/Directory/template.html.twig (where /AcmeBundle/Directory/template.html.twig is the exact same path to the template in your vendor)
Doc :
http://symfony.com/doc/current/cookbook/bundles/inheritance.html
http://symfony.com/doc/2.0/book/templating.html#overriding-bundle-templates