Eleventy의 발췌문

나는 Eleventy (11ty)에서 발췌문을 얻는 데 100% 어려움을 겪었습니다. 너무 간단해 보이지만 알 수가 없었다.

나는 두 가지 문제가 있었다. 첫째, 11ty’s custom frontmatter data 을 사용하여 작업하는 발췌문을 얻었지만 불행히도 발췌문은 마크다운을 렌더링하지 않았습니다. 결과는 다음과 같습니다.



둘째, 발췌된 단축 코드를 만드는 방법을 자세히 설명하는 훌륭한 블로그 게시물Creating a blog with Eleventy을 찾았습니다. 이 단축 코드는 기본적으로 첫 번째 단락을 발췌문으로 사용하도록 설정되어 있습니다. 또는 원하는 모든 맞춤 발췌 태그. 그러나 단축 코드는 결국 HTML 태그를 렌더링했습니다. 11ty의 발췌문과 반대되는 문제입니다. HTML을 렌더링하면 일부 이상하게 보이는 발췌 부분이 생성되었습니다.



나는 행복한 매체를 찾을 수 없습니다! 내가 발췌에서 정말로 원했던 것은 다음과 같습니다.

최대 200자

모든 HTML 태그를 제거합니다.

발췌 부분 끝에 줄임표 추가

특정 태그가 필요 없이 발췌 부분을 자동으로 가져옵니다.

고맙게도 위의 블로그 게시물에서 필요한 모든 코드를 얻을 수 있었습니다. 몇 가지만 수정해야 했습니다.

Excerpt 추출 수정

먼저 striptags을 설치합니다. 이 라이브러리를 사용하여 HTML 태그를 제거할 것입니다.

npm install striptags

이제 striptags 에서 .eleventy.js 를 요구하고 싶습니다. 파일 상단:

const striptags = require("striptags");

다음으로 extractExcerpt 파일 하단에 .eleventy.js 메서드를 추가합니다. 이 방법은 내가 원하는 기준에 맞게 블로그 게시물에서 수정된 버전입니다.

function extractExcerpt(article) {
  if (!article.hasOwnProperty("templateContent")) {
    console.warn(
      'Failed to extract excerpt: Document has no property "templateContent".'
    );
    return null;
  }

  let excerpt = null;
  const content = article.templateContent;

  excerpt = striptags(content)
    .substring(0, 200) // Cap at 200 characters
    .replace(/^\\s+|\\s+$|\\s+(?=\\s)/g, "")
    .trim()
    .concat("...");
  return excerpt;
}

eleventyConfig 블록에 이 줄을 추가합니다. 이 단계는 블로그 게시물에서도 가져온 것입니다.

module.exports = function(eleventyConfig) {
  eleventyConfig.addShortcode("excerpt", (article) => extractExcerpt(article));

  ...
}

마지막으로 결과를 볼 수 있습니다.



만세! 아무것도 이상하게 보이지 않습니다. Addendum # 헤더에 앵커 영구 링크를 추가하여 발생하는 markdownIt가 표시됩니다. 나는 그것과 함께 살 수 있습니다.

이 문제를 돌이켜보면 해결책은 너무나 쉬워 보입니다. 그러나 나는 이것을 제대로하는 방법을 알아 내려고 거의 일주일을 보냈습니다. 11ty 맞춤형 프론트매터 솔루션이 작동하기를 바라는 완고함과 Google에 대한 나의 무능력의 조합이라고 생각합니다. 정말 Google이 필요하거나 더 빨리 도움을 요청하세요. 나는 당신에 대해 잘 모르지만 언제 도움을 요청해야 하는지 아는 것은 나에게 끝없는 투쟁입니다. 이 한 가지 문제를 제외하고 지금까지 11ty를 사랑합니다! 이 게시물이 발췌 문제를 해결하기를 바랍니다.