Skip to content

Commit

Permalink
feat: make post description customizable (cotes2020#1602)
Browse files Browse the repository at this point in the history

---------

Co-authored-by: Cotes Chung <[email protected]>
  • Loading branch information
kungfux and cotes2020 authored Mar 18, 2024
1 parent 0f8e782 commit f865336
Show file tree
Hide file tree
Showing 10 changed files with 58 additions and 29 deletions.
2 changes: 1 addition & 1 deletion _data/origin/cors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ cdns:

# fonts

webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap

# Libraries

Expand Down
16 changes: 16 additions & 0 deletions _includes/post-description.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{%- comment -%}
Get post description or generate it from the post content.
{%- endcomment -%}

{%- assign max_length = include.max_length | default: 200 -%}

{%- capture description -%}
{%- if post.description -%}
{{- post.description -}}
{%- else -%}
{%- include no-linenos.html content=post.content -%}
{{- content | markdownify | strip_html -}}
{%- endif -%}
{%- endcapture -%}

{{- description | strip | truncate: max_length | escape -}}
5 changes: 1 addition & 4 deletions _includes/related-posts.html
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,7 @@ <h3 class="mb-4" id="related-label">
{% include datetime.html date=post.date lang=include.lang %}
<h4 class="pt-0 my-2">{{ post.title }}</h4>
<div class="text-muted">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
<p>{% include post-description.html %}</p>
</div>
</div>
</a>
Expand Down
5 changes: 1 addition & 4 deletions _layouts/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,7 @@
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>

<div class="card-text content mt-0 mb-3">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
<p>{% include post-description.html %}</p>
</div>

<div class="post-meta flex-grow-1 d-flex align-items-end">
Expand Down
3 changes: 3 additions & 0 deletions _layouts/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
<article class="px-1">
<header>
<h1 data-toc-skip>{{ page.title }}</h1>
{% if page.description %}
<p class="post-desc fw-light mb-4">{{ page.description }}</p>
{% endif %}

<div class="post-meta text-muted">
<!-- published date -->
Expand Down
3 changes: 1 addition & 2 deletions _posts/2019-08-08-text-and-typography.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Text and Typography
description: Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.
author: cotes
date: 2019-08-08 11:33:00 +0800
categories: [Blogging, Demo]
Expand All @@ -13,8 +14,6 @@ image:
alt: Responsive rendering of Chirpy theme on multiple devices.
---

This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.

## Headings

<!-- markdownlint-capture -->
Expand Down
12 changes: 12 additions & 0 deletions _posts/2019-08-08-write-a-new-post.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,18 @@ Having said that, the key `author` can also identify multiple entries.
> The benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
{: .prompt-info }

### Post Description

By default, the first words of the post are used to display on the home page for a list of posts, in the _Further Reading_ section, and in the XML of the RSS feed. If you don't want to display the auto-generated description for the post, you can customize it using the `description` field in the _Front Matter_ as follows:

```yaml
---
description: Short summary of the post.
---
```

Additionally, the `description` text will also be displayed under the post title on the post's page.

## Table of Contents

By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
Expand Down
3 changes: 3 additions & 0 deletions _posts/2019-08-09-getting-started.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
---
title: Getting Started
description: >-
Get started with Chirpy basics in this comprehensive overview.
You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.
author: cotes
date: 2019-08-09 20:55:00 +0800
categories: [Blogging, Tutorial]
Expand Down
29 changes: 19 additions & 10 deletions _sass/layout/post.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,28 @@
padding-right: $pr;
}

h1 + .post-meta {
span + span::before {
@include dot;
}
header {
.post-desc {
@extend %heading;

em,
time {
@extend %text-highlight;
font-size: 1.125rem;
line-height: 1.6;
}

em {
a {
color: inherit;
.post-meta {
span + span::before {
@include dot;
}

em,
time {
@extend %text-highlight;
}

em {
a {
color: inherit;
}
}
}
}
Expand Down
9 changes: 1 addition & 8 deletions assets/feed.xml
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,7 @@ permalink: /feed.xml
{% endfor %}
{% endif %}

{% if post.summary %}
<summary>{{ post.summary | strip }}</summary>
{% else %}
<summary>
{% include no-linenos.html content=post.content %}
{{ content | strip_html | truncate: 400 }}
</summary>
{% endif %}
<summary>{% include post-description.html max_length=400 %}</summary>

</entry>
{% endfor %}
Expand Down

0 comments on commit f865336

Please sign in to comment.