From f865336c896e0db34edf8482a53e0e5d8f07ff95 Mon Sep 17 00:00:00 2001 From: Alexander Fuks Date: Mon, 18 Mar 2024 14:50:05 +0400 Subject: [PATCH] feat: make post description customizable (#1602) --------- Co-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com> --- _data/origin/cors.yml | 2 +- _includes/post-description.html | 16 +++++++++++++ _includes/related-posts.html | 5 +--- _layouts/home.html | 5 +--- _layouts/post.html | 3 +++ _posts/2019-08-08-text-and-typography.md | 3 +-- _posts/2019-08-08-write-a-new-post.md | 12 ++++++++++ _posts/2019-08-09-getting-started.md | 3 +++ _sass/layout/post.scss | 29 ++++++++++++++++-------- assets/feed.xml | 9 +------- 10 files changed, 58 insertions(+), 29 deletions(-) create mode 100644 _includes/post-description.html diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml index b6c8674205f..614139f8e37 100644 --- a/_data/origin/cors.yml +++ b/_data/origin/cors.yml @@ -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 diff --git a/_includes/post-description.html b/_includes/post-description.html new file mode 100644 index 00000000000..6c400360bf3 --- /dev/null +++ b/_includes/post-description.html @@ -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 -}} diff --git a/_includes/related-posts.html b/_includes/related-posts.html index 1ba2f322008..ae39da41f17 100644 --- a/_includes/related-posts.html +++ b/_includes/related-posts.html @@ -81,10 +81,7 @@

{{ post.title }}

-

- {% include no-linenos.html content=post.content %} - {{ content | markdownify | strip_html | truncate: 200 | escape }} -

+

{% include post-description.html %}

diff --git a/_layouts/home.html b/_layouts/home.html index 4cf4c1d5d99..a9f5bd366a7 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -72,10 +72,7 @@

{{ post.title }}

-

- {% include no-linenos.html content=post.content %} - {{ content | markdownify | strip_html | truncate: 200 | escape }} -

+

{% include post-description.html %}

diff --git a/_layouts/post.html b/_layouts/post.html index f666d71642c..f17ceea8641 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -14,6 +14,9 @@

{{ page.title }}

+ {% if page.description %} +

{{ page.description }}

+ {% endif %}
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md index 6551cb560d9..7064d5d4a62 100644 --- a/_posts/2019-08-08-text-and-typography.md +++ b/_posts/2019-08-08-text-and-typography.md @@ -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] @@ -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 diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index 08fb8e78761..aab434c9fab 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -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/): diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index a411dbc26cd..701824fa35e 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -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] diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index a6dc878cfea..fe960588f6f 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -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; + } } } } diff --git a/assets/feed.xml b/assets/feed.xml index a244a566215..0ab20e3be6a 100644 --- a/assets/feed.xml +++ b/assets/feed.xml @@ -45,14 +45,7 @@ permalink: /feed.xml {% endfor %} {% endif %} - {% if post.summary %} - {{ post.summary | strip }} - {% else %} - - {% include no-linenos.html content=post.content %} - {{ content | strip_html | truncate: 400 }} - - {% endif %} + {% include post-description.html max_length=400 %} {% endfor %}