mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-22 01:57:08 +00:00
Add support for simple social sharing links to posts
This commit is contained in:
Michael Rose
parent
e92c672868
commit
f708b13b8c
8 changed files with 27 additions and 5 deletions
|
|
@ -30,6 +30,14 @@
|
|||
{% if page.modified %}<span class="entry-date date modified"><time datetime="{{ page.modified }}" itemprop="dateModified"><i class="icon-pencil"></i> {{ page.modified | date: "%B %d, %Y" }}</time></span>{% endif %}
|
||||
{% if site.disqus_shortname and page.comments %}<span class="entry-comments"><i class="icon-comment-alt"></i> <a href="#disqus_thread">Comment</a></span>{% endif %}
|
||||
<span><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}" itemprop="url"><i class="icon-link"></i> Permalink</a></span>
|
||||
{% if page.share %}
|
||||
<span class="social-share-facebook">
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook" itemprop="Facebook"><i class="icon-facebook-sign"></i> Like</a></span>
|
||||
<span class="social-share-twitter">
|
||||
<a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" title="Share on Twitter" itemprop="Twitter"><i class="icon-twitter-sign"></i> Tweet</a></span>
|
||||
<span class="social-share-googleplus">
|
||||
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus" itemprop="GooglePlus"><i class="icon-google-plus-sign"></i> +1</a></span>
|
||||
<!-- /.social-share -->{% endif %}
|
||||
</footer>
|
||||
<div class="entry-content" itemprop="description">
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ image:
|
|||
feature: so-simple-sample-image-1.jpg
|
||||
credit: Michael Rose
|
||||
creditlink: http://mademistakes.com
|
||||
comments: true
|
||||
comments: true
|
||||
share: true
|
||||
---
|
||||
|
||||
Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ image:
|
|||
feature: so-simple-sample-image-2.jpg
|
||||
credit: Michael Rose
|
||||
creditlink: http://mademistakes.com
|
||||
comments: true
|
||||
comments: true
|
||||
share: true
|
||||
---
|
||||
|
||||
Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: "A Post with Images"
|
|||
description: "Examples and code for displaying images in posts."
|
||||
category: articles
|
||||
tags: [sample post, images, test]
|
||||
comments: true
|
||||
comments: true
|
||||
share: true
|
||||
---
|
||||
|
||||
Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use `figure` with the appropriate `class`. Each instance of `figure` is auto-numbered and displayed in the caption.
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ image:
|
|||
feature: so-simple-sample-image-3.jpg
|
||||
credit: Michael Rose
|
||||
creditlink: http://mademistakes.com
|
||||
comments: true
|
||||
comments: true
|
||||
share: true
|
||||
---
|
||||
|
||||
This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ description: "Custom written post descriptions are the way to go... if you're no
|
|||
category: articles
|
||||
tags: [sample post, video]
|
||||
comments: true
|
||||
share: true
|
||||
---
|
||||
|
||||
<iframe width="560" height="315" src="http://www.youtube.com/embed/SqYiglufb8Y" frameborder="0"> </iframe>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ image:
|
|||
feature: so-simple-sample-image-5.jpg
|
||||
credit: Michael Rose
|
||||
creditlink: http://mademistakes.com
|
||||
comments: true
|
||||
comments: true
|
||||
share: true
|
||||
---
|
||||
|
||||
Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
|
||||
|
|
|
|||
|
|
@ -231,6 +231,14 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene
|
|||
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
|
||||
{% endhighlight %}
|
||||
|
||||
#### Social Share Links
|
||||
|
||||
To enable Facebook, Twitter, and Google+ share links on a post or page, add the following to its front matter:
|
||||
|
||||
{% highlight yaml %}
|
||||
share: true
|
||||
{% endhighlight %}
|
||||
|
||||
#### Twitter Cards
|
||||
|
||||
Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on.
|
||||
|
|
|
|||
Loading…
Reference in a new issue