RESOC를 사용하여 나만의 자동 소셜 이미지를 만듭니다

HTML 및 CSS로 자동화 된 소셜 이미지를 만들어 Eleventy 블로그에 통합하여 결국 NetLify 플랫폼에 배포하십시오. 이 기사는 전체 프로세스를 단계별로 안내하여 복잡한 코드 작성없이 높은 수준의 소셜 이미지 자동화를 달성합니다.

최근에 자동화 된 소셜 사진은 인기있는 주제가되었으며 Github, Jetpack 및 기타 사람들은 관련 도구를 시작했습니다. Ryan Filler 및 Zach Leatherman과 같은 개발자도 웹 사이트 에서이 기능을 구현했지만 많은 사용자 정의 코드가 필요합니다. 요즘에는 몇 가지 새로운 도구를 사용 하여이 프로세스를 단순화 할 수 있습니다.

이 튜토리얼을 사용하면 HTML 및 CSS를 사용하여 사용자 정의 자동 소셜 이미지를 만들고 구성을 통해 Eleventy 블로그에 통합 한 다음 NetLify에 배포 할 수 있습니다.

최종 결과를 기다릴 수 없다면 프로젝트 링크를 방문하거나 프로젝트 코드를 찾아보십시오!

소셜 사진이란 무엇입니까?

HTML에서 부분적으로, 우리는 열린 그래프 메타 데이터를 삽입합니다.

<meta content="푸른 하늘 전략" property="og:title">
<meta content="구름이 적고, 더 파란색" property="og:description">
<meta content="/sky-with-clouds.jpg" property="og:image">

이 페이지를 Facebook에서 공유하면 우리와 친구들은 다음을 볼 수 있습니다.

LinkedIn, Twitter, WhatsApp, Slack, Discord, Imessage…이 모든 웹 사이트는 거의 같은 방식으로 행동합니다. 더 공간적이고 상황에 맞는 정보를 제공하기 위해 비주얼 "카드"와 링크를 제공합니다.

트위터에는 자체 메타 데이터 태그 세트 (Twitter 카드)가 있지만 매우 유사합니다. 트위터에서 트위터 카드를 찾을 수 없으면 그래프가 열린 그래프로 돌아갑니다.

페이지 제목과 설명은 필수적이지만 위의 스크린 샷에서는 클릭 가능한 영역의 크기는 말할 것도없이 하늘과 구름 사진에 비해 매우 작게 나타납니다. 이것이 사회적 그림의 힘입니다. 링크가 공유되면 이러한 이미지의 영향을 쉽게 이해할 수 있습니다.

레벨 0에서 레벨 3까지

모든 사회적 사진이 동일하지는 않습니다. 다음은 공식적인 용어는 아니지만 이러한 소셜 이미지 카드의 영향 수준을 고려해 봅시다.

레벨 0

가장 기본적인 사회적 그림은 사진이 없다는 것입니다. 링크는 작은 시각적 영역으로 많은 콘텐츠로 침수 될 수 있으며 시각적 호소력이 부족합니다.

레벨 1

고전적인 기술은 전체 사이트에서 통일 된 소셜 사진을 만드는 것입니다. 이 솔루션은 입력 출력 비율이 양호한 것으로 보이지만 사진이없는 것보다 더 나쁘다고 생각할 수도 있습니다. 물론, 우리는주의를 기울일 것이지만, 특히 사람들이 같은 웹 사이트에서 많은 링크를 볼 때 반응은 부정적 일 수 있습니다. 반복되고 불필요한 경향이 있습니다.

레벨 2

다음 단계는 블로그 및 미디어 웹 사이트의 표준 관행입니다. 각 게시물에는 고유 한 이미지가 있으며 서로 다릅니다. 사진은 페이지 내용을 보충 할 수 있으므로 뉴스 웹 사이트에는 완전히 합리적입니다. 여기서 잠재적 인 단점은 게시 된 모든 기사에 대해 이미지 자료를 찾고 만들어야한다는 것입니다.

이것은 약간의 게으름으로 이어질 수 있습니다. 우리는 모두 스톡 사진 인 사진을 보았습니다. 그것은 관심을 끌 수 있지만, 당신이 정말로 원하는 관심은 아닐 수도 있습니다.

레벨 3

최종 수준 : 각 페이지에는 풍부하고 의미있는 소셜 사진이 있습니다. 그것이 CSS- 트릭이하는 일입니다. 팀의 소셜 사진은 브랜드와 같습니다. 동일한 레이아웃을 공유합니다. 그들은 기사의 제목과 저자의 이름과 프로필 사진을 언급하며, 일반 제목과 설명에는 보이지 않습니다. 그들은 눈에 띄고 기억에 남습니다.

이 접근법에 대한 명백한 전제 조건이 있습니다 : 자동화. 가능한 각 링크마다 고유 한 이미지를 만드는 것은 불가능합니다. 이것이 얼마나 추가 작업이 필요한지 생각해보십시오. 우리는 무거운 리프팅을하는 데 도움이되는 프로그램 솔루션이 필요합니다.

독특한 소셜 이미지가 포함 된 블로그를 만들어 봅시다

독특한 소셜 사진을 만들 수있는 정당한 이유 (및 샌드 박스)를 제공하기 위해 간단한 블로그를 만들 것입니다. 이 블로그에 기사를 작성하고 게시 할 때 간단한 2 단계 프로세스를 따릅니다.

1. 기사 작성 및 출판
2. 게시 된 URL을 소셜 네트워크 계정에 게시했습니다

소셜 사진은 현재 역할을 수행해야합니다. 우리는 블로그를 가능한 한 시선을 사로 잡고 싶습니다. 그러나 이것이 우리의 유일한 목표는 아닙니다. 이 블로그는 개인 브랜드를 구축해야합니다. 우리는 친구, 동료 및 팬이 소셜 게시물을 볼 때 우리를 기억하기를 바랍니다. 우리는 반복 가능하고 인식 가능하며 대표적인 것을 원합니다.

블로그를 만드는 데는 많은 작업이 필요합니다. 자동화 된 소셜 사진은 시원하지만 너무 많은 시간을 보내는 것은 현명하지 않습니다. (크리스는 2020 년 말에 같은 결론에 도달했다). 따라서 더 효율적으로, 우리는 Eleventsy 웹 사이트를 만들고 있습니다. Eleventy는 간단한 정적 웹 사이트 생성기입니다. 처음부터 시작하는 대신 기존 스타터 프로젝트를 사용하십시오. 실제로, 첫 번째 전자-기본 블로그를 선택합시다.

Electronic-Base-Blog Github 페이지를 방문하여 템플릿으로 사용하십시오.

저장소를 만들고 저장소 이름과 설명을 설정하겠습니다. 우리는 그것을 공개적이거나 개인적으로 설정할 수 있습니다. 중요하지 않습니다.

다음으로 저장소를 로컬로 복제하고 패키지를 설치하고 사이트를 실행합니다.

 git 클론 [저장소 URL]
CD my-demo-blog ### 또는 당신이 NPM 설치 한 이름이든
NPM 달리기 서브

당사 웹 사이트는 http : // localhost : 8080에서 실행 중입니다.

이제 배포합시다. Netlify는이 작업을 매우 빠르게 (그리고 무료!) 만듭니다. (오, 스포일러 경고 : 우리의 소셜 이미지 자동화는 Netlify 기능에 의존합니다.)

따라서 계정이없는 경우 NetLify를 방문하여 계정을 작성하겠습니다. 어느 쪽이든, 새 사이트 만들기 :

NetLify가 블로그 저장소에 액세스하도록 허용하십시오.

Netlify 사이트를 배포합니다.

약 1 분 후 블로그가 배포되었습니다.

하나의 이미지 템플릿이 모두 지배적입니다

우리의 소셜 이미지는 이미지 템플릿을 기반으로합니다. 이 템플릿을 설계하기 위해 이미 알고 있고 사랑하는 기술인 HTML 및 CSS를 사용합니다. HTML은 자동으로 이미지로 자체 변환되지 않지만이를 수행 할 수있는 도구, 특히 인형극이있는 헤드리스 크롬이 있습니다.

그러나 소셜 이미지를 직접 구축하는 대신 RESOC 이미지 템플릿 개발 키트를 사용하십시오. 따라서 프로젝트 루트 디렉토리에서 터미널에서 실행할 수 있습니다.

 npx itdk init re resoc-templates/default -m 제목 설명

이 명령은 RESOC-Templates/Default 디렉토리에 새 이미지 템플릿을 만듭니다. 새로운 브라우저 창에서도 열립니다.

이 템플릿을 그대로 사용할 수 있지만 "영향"범위 내에서 레벨 2에 도달 할 수 있습니다. 레벨 3으로 가져 와서 CSS- 트릭 템플릿과 일치하는 데 필요한 것은 다음과 같습니다.

• 제목이 오른쪽으로 정렬되어 왼쪽에 부정적인 공간이 남습니다.
• 바닥에는 블로그 전체에 사용할 두 가지 색상으로 구성된 배경 기울기가 포함 된 바닥 글이 있습니다.
• 기사의 저자의 이름과 프로필 사진.

브라우저로 돌아 가면 템플릿 뷰어의 "매개 변수"패널에서 템플릿에 제목 및 설명이 필요하다는 것을 볼 수 있습니다. 이것은 터미널에서 -m title-description 실행할 때 선택한 템플릿입니다. 그러나 resoc-templates/default/resoc.manifest.json 편집하여 더 많은 매개 변수를 추가 할 수 있습니다. 구체적으로, 두 번째 매개 변수를 삭제할 수 있습니다.

 {
  "부분": {
    "콘텐츠": "./content.html.mustache",
    "스타일": "./styles.css.mustache"
  },
  "매개 변수": [
    {
      "이름": "제목",
      "유형": "텍스트",
      "emarvalue": "그림은 천 단어의 가치가 있습니다"
    }
  ]]
}

브라우저의 뷰어가 변경 사항을 반영합니다.

이제 이미지 자체를 디자인 할 시간입니다. resoc-templates/default/content.html.mustache 에서 이미지를 설계 할 수 있습니다.

<div>
  <main><h1>{{ 제목 }}</h1></main>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg" class="lazy" alt="RESOC를 사용하여 나만의 자동 소셜 이미지를 만듭니다">
  <h2>필립 버나드</h2>
</div>

이것은 단지 평범한 HTML입니다. 자, {{ title }} 제외하고. 이것은 콧수염 인 RESOC가 매개 변수 값을 템플릿에 주입하는 데 사용하는 템플릿 엔진입니다. 제목 필드에 일부 텍스트를 입력하여 작동 방식을 확인할 수도 있습니다.

미리보기를 볼 때 이미지 profil-pic.jpg 누락되었습니다. 최상의 프로필 사진을 resoc-templates/default/profil-pic.jpg 에 복사하십시오.

이제 resoc-templates/default/styles.css.mustache 에 CSS를 작성해야합니다. 이 게시물의 요점은 템플릿을 스타일링하는 방법이 아니지만 이것은 내가 사용한 스타일입니다.

 @import url ( 'https://fonts.googleapis.com/css2?family=anton&family=caleway&display=swap');

/ * ... CSS 코드 ... */

대부분의 차원은 VW 및 VH 장치에 따라 템플릿이 제시 할 수있는 다양한 컨텍스트를 예측하는 데 의존합니다. 우리는 Facebook의 추천, 즉 1200 × 630을 따릅니다. 반면에 트위터 카드의 크기는 다릅니다. 이미지를 낮은 해상도 (600 × 315)로 렌더링 할 수 있지만 1200 × 630을 사용하므로 픽셀 만 사용해야합니다.

시청자는 1200 × 630에서 Facebook 미리보기를 렌더링하고 화면에 맞게 축소됩니다. 미리보기가 귀하의 기대를 충족하는 경우 실제 열린 그래프 이미지도 마찬가지입니다.

지금까지 템플릿은 우리의 요구를 충족시킵니다.

(다음 내용은 원래 텍스트 구조에 따라 나머지 부분을 계속 재 작성합니다. 내용의 일관성을 유지하면서 언어 표현 및 단락 구조를 조정하여 더 부드럽고 자연스럽게 만듭니다.)

위 내용은 RESOC를 사용하여 나만의 자동 소셜 이미지를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!