Giter VIP home page Giter VIP logo

Comments (5)

huanyushi avatar huanyushi commented on June 25, 2024

Just delete escape in _includes/post-description.html, see here, can solve your problem.

{%- 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 -}}
+ {{- description | strip | truncate: max_length  -}}

Effect:
image

The function of escape in Liquid can be found here,

Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn’t change strings that don’t have anything to escape.

In Jekyll blogs, the 'escape' filter is typically used to HTML-escape the output, ensuring that when rendered on a webpage, it won't be interpreted as HTML tags, thereby mitigating potential security risks such as XSS (Cross-Site Scripting) attacks.

In the above code snippet in _includes/post-description.html, the 'escape' filter is applied after the 'truncate' filter. This means it ensures that the text after truncation does not contain any unescaped HTML tags. The purpose of this is to maintain the security of the page by ensuring that the truncated text length does not include any unescaped HTML tags.

If you delete escape, it may lead to potential bugs. I believe this is why the author closed the issues you previously opened.

from jekyll-theme-chirpy.

huanyushi avatar huanyushi commented on June 25, 2024

For example, If you make the last word of the description displayed in home bold, you will find that all other post previews have become bold. Other layouts of the page will also be broken.

This is just one of the bugs I know about.

So I don't suggest you do this

from jekyll-theme-chirpy.

steveng57 avatar steveng57 commented on June 25, 2024

Thanks for the detailed explanation, much appreciated! I am a bit smarter now.

would there be anything wrong with:

{%- capture description -%}
{%- if post.description -%}
  {{- post.description  | strip | truncate: max_length | markdownify | escape -}}
{%- else -%}

from jekyll-theme-chirpy.

huanyushi avatar huanyushi commented on June 25, 2024
{%- capture description -%}
{%- if post.description -%}
  {{- post.description  | strip | truncate: max_length | markdownify | escape -}}
{%- else -%}

@steveng57 It doesn't work.

from jekyll-theme-chirpy.

cotes2020 avatar cotes2020 commented on June 25, 2024

Duplicate of #1739

from jekyll-theme-chirpy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.