Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make post description customizable #1602

Merged
merged 3 commits into from
Mar 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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