From 2e60a84c64c8ec9306bd5df08057989cd898cfd2 Mon Sep 17 00:00:00 2001 From: Alexander Fuks Date: Sun, 10 Mar 2024 04:54:35 +0400 Subject: [PATCH 1/3] feat: make post description customizable --- _includes/post-description.html | 11 +++++++++++ _includes/related-posts.html | 3 +-- _layouts/home.html | 4 +--- _posts/2019-08-08-text-and-typography.md | 1 + _posts/2019-08-08-write-a-new-post.md | 12 ++++++++++++ _posts/2019-08-09-getting-started.md | 1 + _posts/2019-08-11-customize-the-favicon.md | 1 + assets/feed.xml | 9 +-------- 8 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 _includes/post-description.html diff --git a/_includes/post-description.html b/_includes/post-description.html new file mode 100644 index 00000000000..a96e0c1a8af --- /dev/null +++ b/_includes/post-description.html @@ -0,0 +1,11 @@ +{% comment %} + Get post description or generate it from the post content. +{% endcomment %} + +{% assign max_length = include.max_length | default: 200 %} +{% if post.description %} + {{ post.description | strip | truncate: max_length | escape }} +{% else %} + {% include no-linenos.html content=post.content %} + {{ content | markdownify | strip_html | truncate: max_length | escape }} +{% endif %} diff --git a/_includes/related-posts.html b/_includes/related-posts.html index 1ba2f322008..5dcb44abbf4 100644 --- a/_includes/related-posts.html +++ b/_includes/related-posts.html @@ -82,8 +82,7 @@

{{ post.title }}

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

diff --git a/_layouts/home.html b/_layouts/home.html index 4cf4c1d5d99..1f572939a06 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -2,7 +2,6 @@ layout: default refactor: true --- - {% include lang.html %} {% assign pinned = site.posts | where: 'pin', 'true' %} @@ -73,8 +72,7 @@

{{ post.title }}

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

diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md index 6551cb560d9..e29f83d7038 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: See markdown syntax rendering on Chirpy, so you can use it as an example of writing. author: cotes date: 2019-08-08 11:33:00 +0800 categories: [Blogging, Demo] diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index 08fb8e78761..fed9882c795 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -1,5 +1,6 @@ --- title: Writing a New Post +description: This tutorial will guide you how to write a post in the Chirpy template. author: cotes date: 2019-08-08 14:10:00 +0800 categories: [Blogging, Tutorial] @@ -73,6 +74,17 @@ 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 + +The `description` field is optional. If it isn't defined, 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 +--- +title: Post title +description: Short summary of the post +--- +``` + ## 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..07a94892909 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -1,5 +1,6 @@ --- title: Getting Started +description: A quick start guide to help you get started with Chirpy. author: cotes date: 2019-08-09 20:55:00 +0800 categories: [Blogging, Tutorial] diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md index a3278fa90eb..345c4ec816f 100644 --- a/_posts/2019-08-11-customize-the-favicon.md +++ b/_posts/2019-08-11-customize-the-favicon.md @@ -1,5 +1,6 @@ --- title: Customize the Favicon +description: How to customize the favicon of Chirpy. author: cotes date: 2019-08-11 00:34:00 +0800 categories: [Blogging, Tutorial] diff --git a/assets/feed.xml b/assets/feed.xml index a244a566215..eb8f817fbca 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=1000 %} {% endfor %} From d4404fddd79c1f63c0834af5a0d95d18df2869fb Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sun, 17 Mar 2024 05:17:10 +0800 Subject: [PATCH 2/3] refactor: improve pr-1602 --- _includes/post-description.html | 3 ++- _includes/related-posts.html | 4 +--- _layouts/home.html | 5 ++-- _layouts/post.html | 3 +++ _posts/2019-08-08-text-and-typography.md | 4 +--- _posts/2019-08-08-write-a-new-post.md | 10 ++++---- _posts/2019-08-09-getting-started.md | 4 +++- _posts/2019-08-11-customize-the-favicon.md | 1 - _sass/layout/post.scss | 28 ++++++++++++++-------- assets/feed.xml | 2 +- 10 files changed, 36 insertions(+), 28 deletions(-) diff --git a/_includes/post-description.html b/_includes/post-description.html index a96e0c1a8af..73fced87c39 100644 --- a/_includes/post-description.html +++ b/_includes/post-description.html @@ -3,8 +3,9 @@ {% endcomment %} {% assign max_length = include.max_length | default: 200 %} + {% if post.description %} - {{ post.description | strip | truncate: max_length | escape }} + {{ post.description | strip | truncate: max_length }} {% else %} {% include no-linenos.html content=post.content %} {{ content | markdownify | strip_html | truncate: max_length | escape }} diff --git a/_includes/related-posts.html b/_includes/related-posts.html index 5dcb44abbf4..ae39da41f17 100644 --- a/_includes/related-posts.html +++ b/_includes/related-posts.html @@ -81,9 +81,7 @@

{{ post.title }}

-

- {% include post-description.html max_length=200 %} -

+

{% include post-description.html %}

diff --git a/_layouts/home.html b/_layouts/home.html index 1f572939a06..a9f5bd366a7 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -2,6 +2,7 @@ layout: default refactor: true --- + {% include lang.html %} {% assign pinned = site.posts | where: 'pin', 'true' %} @@ -71,9 +72,7 @@

{{ post.title }}

-

- {% include post-description.html max_length=300 %} -

+

{% include post-description.html %}

diff --git a/_layouts/post.html b/_layouts/post.html index f666d71642c..437616180b1 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 e29f83d7038..7064d5d4a62 100644 --- a/_posts/2019-08-08-text-and-typography.md +++ b/_posts/2019-08-08-text-and-typography.md @@ -1,6 +1,6 @@ --- title: Text and Typography -description: See markdown syntax rendering on Chirpy, so you can use it as an example of writing. +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] @@ -14,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 fed9882c795..aab434c9fab 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -1,6 +1,5 @@ --- title: Writing a New Post -description: This tutorial will guide you how to write a post in the Chirpy template. author: cotes date: 2019-08-08 14:10:00 +0800 categories: [Blogging, Tutorial] @@ -74,17 +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 +### Post Description -The `description` field is optional. If it isn't defined, 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: +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 --- -title: Post title -description: Short summary of the post +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 07a94892909..701824fa35e 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -1,6 +1,8 @@ --- title: Getting Started -description: A quick start guide to help you get started with Chirpy. +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/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md index 345c4ec816f..a3278fa90eb 100644 --- a/_posts/2019-08-11-customize-the-favicon.md +++ b/_posts/2019-08-11-customize-the-favicon.md @@ -1,6 +1,5 @@ --- title: Customize the Favicon -description: How to customize the favicon of Chirpy. author: cotes date: 2019-08-11 00:34:00 +0800 categories: [Blogging, Tutorial] diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index a6dc878cfea..865badb66ce 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -14,19 +14,27 @@ padding-right: $pr; } -h1 + .post-meta { - span + span::before { - @include dot; +header { + p { + font-family: $font-family-heading; + font-size: 1.1rem; + line-height: 1.6; } - em, - time { - @extend %text-highlight; - } + .post-meta { + span + span::before { + @include dot; + } - em { - a { - color: inherit; + em, + time { + @extend %text-highlight; + } + + em { + a { + color: inherit; + } } } } diff --git a/assets/feed.xml b/assets/feed.xml index eb8f817fbca..0ab20e3be6a 100644 --- a/assets/feed.xml +++ b/assets/feed.xml @@ -45,7 +45,7 @@ permalink: /feed.xml {% endfor %} {% endif %} - {% include post-description.html max_length=1000 %} + {% include post-description.html max_length=400 %} {% endfor %} From ae4f0b2f5d9ab824ec7a97456e2293a6ea06f6cb Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Mon, 18 Mar 2024 17:10:51 +0800 Subject: [PATCH 3/3] refactor: more improvement --- _data/origin/cors.yml | 2 +- _includes/post-description.html | 22 +++++++++++++--------- _layouts/post.html | 2 +- _sass/layout/post.scss | 7 ++++--- 4 files changed, 19 insertions(+), 14 deletions(-) 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 index 73fced87c39..6c400360bf3 100644 --- a/_includes/post-description.html +++ b/_includes/post-description.html @@ -1,12 +1,16 @@ -{% comment %} +{%- comment -%} Get post description or generate it from the post content. -{% endcomment %} +{%- endcomment -%} -{% assign max_length = include.max_length | default: 200 %} +{%- assign max_length = include.max_length | default: 200 -%} -{% if post.description %} - {{ post.description | strip | truncate: max_length }} -{% else %} - {% include no-linenos.html content=post.content %} - {{ content | markdownify | strip_html | truncate: max_length | escape }} -{% endif %} +{%- 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/_layouts/post.html b/_layouts/post.html index 437616180b1..f17ceea8641 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -15,7 +15,7 @@

{{ page.title }}

{% if page.description %} -

{{ page.description }}

+

{{ page.description }}

{% endif %}
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 865badb66ce..fe960588f6f 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -15,9 +15,10 @@ } header { - p { - font-family: $font-family-heading; - font-size: 1.1rem; + .post-desc { + @extend %heading; + + font-size: 1.125rem; line-height: 1.6; }