Gridsome용 블로그 게시물 이미지 자동 생성

15562 단어 gridsomebloggingguide
내 chess side-blog project 작업을 시작했을 때 각각의 블로그 표지 이미지를 만들어야 한다는 부담감을 느끼고 싶지 않았기 때문에 Gridsome Plugins 스크롤을 시작하여 Edmund1645's blog-cover plugin을 찾았습니다! 불행히도 설정 프로세스를 거친 후 오류 메시지가 표시되었습니다.

Plugin과 Gridsome의 코드를 1~2시간 동안 파헤친 결과 Vue-Remark을 collection.updateNode() 함수와 함께 사용할 때 문제가 발생하는 것으로 나타났습니다.

Cloudinary를 사용하여 내 이미지를 호스팅하도록 완전히 설정되지 않았으므로 내 기사의 주요 내용을 프로그래밍 방식으로 업데이트할 필요가 없도록 코드를 수정하기로 결정했습니다. 대신 이미지를 /covers/ 폴더에 기사와 이름이 같으므로 블로그 표지 이미지를 만들어 시간을 절약한다는 목표를 달성했습니다!

npm 설치



npm에 익숙하지 않은 경우 check out my npm post .

그렇다면 다음을 실행하십시오.

npm install fs-extra node-html-to-image

# I'm going to reference vue-remark later, 
# if you want to use that you'll also need: 
npm install @gridsome/vue-remark


Vue-Remark 플러그인 구성



블로그 표지 이미지를 생성하기 위한 구성의 중요한 부분은 typeName입니다. vue-remark 구성에 대한 자세한 내용은 the plugin's page을 참조하십시오.

module.exports = {
  siteName: "Your Site Name Here",
  plugins: [
    {
      use: "@gridsome/vue-remark",
      options: {
        typeName: "Post", // < Note this value! 📝
        baseDir: "./content/posts",
        pathPrefix: "/post",
        template: "./src/templates/Post.vue",
      },
    },
  ],
};


또한 최소한의 전면 내용을 사용하여 ./content/posts/ 디렉토리에 최소한 하나의 마크다운 파일이 생성되었는지 확인하고 싶을 것입니다.

// intro.md
---
title: Intro Post
cover_image: "../covers/intro.png" 
---

This is a sample post!


따라 하려면 템플릿 폴더에 Post.vue 파일을 만들어 gridsome develop가 게시물 페이지를 제대로 만들 수 있도록 하세요!

HTML을 이미지로



이제 샘플 포스트를 준비했습니다. html을 이미지로 변환하도록 설정하겠습니다!

루트 디렉터리에 functions 파일이 있는 generateHtml.js 폴더를 만듭니다. 이 코드에 의해 반환된 HTML은 포스트 표지 이미지가 될 것입니다.

// This creates a basic solid background with title and a white border 
module.exports = function(
  title,
  { backgroundColors, imgHeight, imgWidth, border, domain }
) {
  const bgColor =
    backgroundColors[Math.floor(Math.random() * backgroundColors.length)];

  const template = `
    <html>
      <head>
        <style>
        * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }

      body {
        width: ${imgWidth}; 
        height: ${imgHeight}; 
        padding: 40px;
        background: ${bgColor};
        color: #ffffff;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }

      div.container {
        border: 3px solid #ffffff;
        text-align: left;
        padding: 30px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      h1.title {
        font-size: 3.7rem;
        text-transform: capitalize;
        text-align: center;
      }      
        </style>
      </head>
      <body>
          <div class="container">
            <h1 class="title">${title}</h1>
          </div>
      </body>
    </html>
  `;
  return template;
};


gridsome.server 설정



마지막으로 gridsome.server 설정 - 여기에서 gridsome develop 또는 gridsome build가 실행되어 커버 이미지가 누락된 게시물이 있는지 확인합니다. 그렇다면 이미지가 표지 폴더에 생성됩니다.

const fs = require("fs-extra");
const createImage = require("node-html-to-image");
const generateHtml = require("./functions/generateHtml");

const defaultOptions = {
  typeName: "Post", // This should be the typeName noted above 📝
  // 👇🏻 Each background will randomly have one of these colors
  backgroundColors: [
    "#23313B",
    "#636655",
    "#607077",
    "#806752",
    "#5d6f75",
    "#915335",
  ],
  imgWidth: "1024px", // The width of your cover image
  imgHeight: "512px", // The height of your cover image
  border: true, // I hard coded this to true in my html
  domain: "Your domain goes here", // Edmund includes this in their generated images
  outputDir: "content/covers/", // Where the cover images should be generated to
};

module.exports = function(api) {
  // Keeping this for easy modifications from gridsome-plugin-blog-cover
  const options = { ...defaultOptions };
  api.loadSource(async (actions) => {
    const collection = actions.getCollection(options.typeName);

    collection.data().forEach(function(node) {
      if (node.internal.typeName === options.typeName) {
        // Using the same filename as the file for easy frontmatter
        const imgName = node.fileInfo.name;
        fs.ensureDirSync(options.outputDir);
        const output = `${options.outputDir}/${imgName}.png`;
        // Only generate images for files that don't exist already
        console.log("Generating Missing Cover Images");
        fs.access(output, (error) => {
          if (error) {
            console.log(`Creating ${imgName}.png`);
            createImage({
              output,
              html: generateHtml(node.title, node.subtitle, options),
            });
          } else {
            console.log(`${output} already exists`);
          }
        });
        // if updateNode() worked, this is where it would go :)
      }
    });
  });
};


이를 위한 기본 작업에 다시 한 번 감사드립니다!
[에센스 편] C 언어 입문급 연습 20문제(一):
JavaScript 브 라 우 저의 디 스 플레이 영역 크기 정보 가 져 오기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage