Trello를 매우 간단한 CMS로 사용합니다

때때로 우리 사이트는 콘텐츠 관리가 약간 뿌려져 필요합니다. 항상 그런 것은 아닙니다. 별로. 그러나 조금. CMS 시장은 저렴하고 접근 가능한 제품으로 번성하고 있으므로 옵션이 부족하지 않습니다. 고맙게도, 회사가 Ga-jillionty-1 달러를 튀기도록 강요했던 세상과는 매우 다른 세상입니다 (정확한 비용이 아님 : 가장 가까운 바질로 반올림).

그러나 때로는 새로운 CMS에 도달하기보다는 사이트의 컨텐츠를 업데이트하는 사람이 이미 익숙한 간단한 도구를 사용하는 것이 좋습니다.

나는 아이디어와 작업을 관리하기 위해 Trello를 많이 좋아합니다. 그리고 API가 있습니다. 웹 사이트의 컨텐츠 소스로 사용하지 않는 이유는 무엇입니까? Google 시트로 할 수 있다면 다른 일을 시도하는 것을 막을 수있는 것은 무엇입니까?

안녕하세요, Trello

다음은 탐색 할 간단한 사이트입니다. 이 Trello 보드에서 콘텐츠를 가져오고 해당 내용은 섹션에 표시됩니다. 각 섹션은 Trello 보드의 카드의 제목 및 설명 필드로 채워집니다.

Trello는 Markdown을 사용하여 여기에 편리합니다. Trello 카드에서 컨텐츠를 편집하는 사람은 누구나 기본 텍스트 형식을 적용 할 수 있으며 사이트로 동일한 마크 다운 흐름이 있으며 빌드 프로세스를 통해 HTML로 변환했습니다.

빌딩 블록

나는 다양한 피드와 소스에서 컨텐츠를 가져 오는 빌드를 실행하는이 모델의 열렬한 팬입니다. 그런 다음 웹 사이트의 HTML을 생성하기 위해 템플릿과 함께 뭉치십시오. 컨텐츠 관리에서 프레젠테이션을 분리합니다 ( "디퍼 커플"이라는 용어는 인기있는 현대 CMS 제품에서 나옵니다). 그리고 그것은 우리가 CSS- 트릭에서 배운 모든 Wizzy 트릭과 기술로 웹 사이트를 자유롭게 만들 수 있음을 의미합니다.

빌드 타임에 컨텐츠를 가져 오기 때문에 사이트가 인기를 얻고 트래픽이 많이 발생하면 사용 할당량 또는 데이터 소스의 성능에 대해 걱정할 필요가 없습니다. 그리고 왜 그렇지 않습니까? 우리가 그들을 얼마나 예쁘게 만들었는지보세요!

나는 놀고 싶어!

괜찮은. 이 사이트의 코드 사본을 가져 와서 마음의 내용을 주위에 땜질 할 수 있습니다. 이 버전에는 자신의 Trello 보드를 작성하여 빌드 컨텐츠 소스로 사용하는 방법에 대한 정보가 포함되어 있습니다.

• Github의 사이트 코드 저장소 예제
• 데모 사이트
• 클릭하여 클릭 한 클릭으로 자신의 사본을 배포하십시오.

직접 다이빙하는 대신 이것이 어떻게 작동하는지 살펴보고 싶다면 계속 읽으십시오.

API 발견

Trello에는 잘 문서화 된 API와 개발자 리소스 세트가 있습니다. API와 인증 및 상호 작용하는 작업을 단순화하는 편리한 노드 모듈도 있습니다. 그러나 Trello 보드를 탐색 할 때 URL을 땜질하여 API를 탐색 할 수도 있습니다.

예를 들어, 위의 Trello 보드의 URL은 다음과 같습니다.

 https://trello.com/b/zzc0uswz/hellotrello

해당 URL에 .json을 추가하면 Trello는 JSON으로 표시되는 내용을 보여줍니다. 살펴보세요.

이 기술을 사용하여 Trello 전체의 기본 데이터를 검사 할 수 있습니다. 특히 하나의 카드의 URL은 다음과 같습니다.

 https://trello.com/c/yvxlsezy/4-sections-from-cards

이 작은 트릭을 사용하고 URL에 .json을 추가하면 해당 카드를 설명하는 데이터가 표시됩니다.

우리는 이사회, 목록 및 카드의 독특한 ID 등 흥미로운 것을 찾을 수 있습니다. 카드의 내용과 많은 메타 데이터를 볼 수 있습니다.

나는 이것을하는 것을 좋아한다! 모든 사랑스러운 데이터를보세요! 우리는 그것을 어떻게 사용할 것인가?

보드 사용 방법 결정

이 예에서는 관리 가능한 콘텐츠의 한 페이지 만있는 사이트가 있다고 가정 해 봅시다. 보드의 목록 또는 열은 해당 페이지의 섹션을 제어하는 ​​데 이상적입니다. 편집자는 타이틀과 콘텐츠를 제공하고 원하는 순서로 끌 수 있습니다.

API를 통해 액세스 할 수 있도록 목록의 ID가 필요합니다. 운 좋게도, 우리는 이미 그것을 발견하는 방법을 보았습니다. 해당 목록의 카드에 대한 데이터를 살펴보십시오. 각각에는 Idboard 속성이 있습니다. 빙고!

사이트 생성

계획은 Trello에서 데이터를 가져와 일부 템플릿에 적용하여 사이트를 채우는 것입니다. 대부분의 정적 사이트 생성기 (SSG)가 작업을 수행합니다. 그것이 그들이 잘하는 것입니다. 나는 그것을 이해하기 가장 간단한 개념이 있다고 생각하기 때문에 Eleventy를 사용할 것입니다. 또한 Nunjucks (인기있는 템플릿 언어)로 데이터를 얻고 깨끗한 HTML을 생성하는 데 매우 효율적입니다.

우리는 Trello라는 JavaScript 객체에있는 각 항목에 대한 섹션 요소를 출력하는 표현식 Lin 템플릿을 사용할 수 있기를 원합니다.

 
{trello %의 카드의 %}

  <h2 id="card-name"> {{card.name}} </h2>
  <div>
    { % Markdown %}
      {{- card.desc | 안전한 }}
    { % endmarkdown %}
  </div>
섹션>
{ % endfor %}

빌드에 대한 데이터를 가져옵니다

이와 같은 Jamstack 사이트가있는 인기있는 기술은 Gulp, Grunt 또는 [최신 새 빌드 스크립트 Hotness를 여기에 삽입하는 것]으로 빌드를 실행하는 것입니다. 이는 다양한 API 및 피드에서 데이터를 가져오고 SSG에 적합한 형식으로 데이터를 보관 한 다음 SSG를 실행하여 HTML을 생성합니다. 이것은 다소 잘 작동합니다.

Eleventy는 데이터 파일에서 JavaScript의 실행을 지원함으로써 여기에서 물건을 단순화합니다. 다시 말해, JSON 또는 YAML로 저장된 데이터만을 활용하지 않고 JavaScript로 반환되는 모든 것을 사용할 수 있으며 Eleventy Build가 실행될 때 API에 직접 요청할 수있는 도어를 열 수 있습니다. 먼저 데이터를 가져 오기 위해 별도의 빌드 단계가 필요하지 않습니다. Eleventy는 우리를 위해 그것을 할 것입니다.

이를 사용하여 템플릿에서 Trello 객체의 데이터를 얻으십시오.

우리는 Trello 노드 클라이언트를 사용하여 API를 쿼리 할 수 ​​있지만, 우리가 원하는 모든 데이터가 보드의 JSON에있는 것으로 밝혀졌습니다. 모든 것! 한 요청으로! 우리는 그것을 한 번에 가져올 수 있습니다!

 // trello.js
module.exports = () => {
  const trello_json_url = 'https : //trello.com/b/zzc0uswz/hellotrello.json';

  // Node-Fetch를 사용 하여이 보드에 대한 JSON 데이터를 얻습니다.
  const fetch = require ( 'node-fetch');
  반환 페치 (Trello_json_url)
    . then (res => res.json ())
    . (json => console.log (json));
};

그러나 우리는 해당 보드의 모든 데이터를 보여주고 싶지 않습니다. 다른 목록의 카드, 폐쇄 및 삭제 된 카드 등이 포함됩니다. 그러나 JavaScript의 필터 방법 덕분에 관심있는 것만 포함하도록 카드를 필터링 할 수 있습니다.

 // trello.js
module.exports = () => {
   const trello_json_url = 'https : //trello.com/b/zzc0uswz/hellotrello.json'
   const trello_list_id = '5e98325d6d6bd120f2b7395f',
 
   // Node-Fetch를 사용 하여이 보드에 대한 JSON 데이터를 얻습니다.
   const fetch = require ( 'node-fetch');
   반환 페치 (Trello_json_url)
   . then (res => res.json ())
   . (json => {
 
     // 우리가 원하는 목록에있는 카드에 집중합니다.
     // 폐쇄 상태가 없습니다
     contentcards = json.cards.filter (card => {
       return card.idlist == Trello_list_id &&! card.closed;
     });
 
     반환 콘텐츠 카드;
 });
};

그렇게 할 것입니다! Eleventy의 데이터 디렉토리의 Trello.js라는 파일 에이 내용을 저장하면 Trello라는 객체의 템플릿 에서이 데이터를 사용할 준비가되어 있습니다.

완료-영드! ?

그러나 우리는 더 잘할 수 있습니다. 또한 첨부 된 이미지를 처리하고 컨텐츠를 검토하기 전에 컨텐츠를 준비 할 수있는 방법을 추가하겠습니다.

이미지 첨부 파일

Trello의 카드에 파일을 첨부 할 수 있습니다. 이미지를 첨부하면 데이터에 설명 된 자산의 소스 URL과 함께 카드에 바로 표시됩니다. 우리는 그것을 활용할 수 있습니다!

카드에 이미지 첨부 파일이있는 경우 소스 URL을 가져 와서 빌드시 페이지에 템플릿을 삽입 한 내용에 이미지 태그로 추가해야합니다. 즉, JSON (card.desc)의 설명 속성에서 이미지의 마크 다운을 Markdown에 추가하는 것을 의미합니다.

그런 다음 우리는 Eleventy가 다른 모든 것들과 함께 우리를 위해 그것을 HTML로 바꿀 수 있습니다. 이 코드는 JSON의 카드를 찾고 데이터를 필요한 모양으로 마사지합니다.

 // trello.js

// 카드에 첨부 파일이있는 경우 이미지로 추가하십시오. 
// 설명 마크 다운에서
contentcards.foreach (card => {
  if (card.attachments.length) {
    card.desc = card.desc`desc` \ n! [$ {card.name}] ($ {card.attachments [0] .url} '$ {card.name}')`;
  }
});

이제 우리는 콘텐츠에서 이미지를 이동할 수 있습니다. 능숙한!

스테이징 컨텐츠

TRELLO를 사용하여 사이트의 컨텐츠를 관리하는 방법에 하나 더 번성 해합시다.

콘텐츠를 전 세계에 시작하기 전에 미리보기를 원하는 몇 가지 방법이 있습니다. TRELLO 보드에는 준비를 위한 하나의 목록과 생산 콘텐츠 목록이 하나있을 수 있습니다. 그러나 새로운 콘텐츠가 이미 출판 된 것과 함께 새로운 콘텐츠가 어떻게 살고 있는지 시각화하기가 어려울 것입니다.

더 나은 아이디어는 Trello의 레이블을 사용하여 라이브로 출판 된 카드를 나타내며, 어떤 카드가 사이트의 단계 버전에만 포함되어야하는지를 나타냅니다. 이것은 우리에게 좋은 워크 플로를 줄 것입니다. 올바른 위치에 새 카드를 추가하여 더 많은 콘텐츠를 추가 할 수 있습니다. "Stage"로 레이블을 붙이고 생산 지점에 나타나는 카드에서 필터링하십시오.

JavaScript 객체의 약간 더 필터링이 필요합니다.

 // trello.js

// "라이브"또는 그와 함께 표시된 카드 만 포함합니다
// 우리가있는 지점의 이름
contentcards = contentcards.filter (card => {
  return card.labels.filter (label => (
    label.name.tolowercase () == 'live'||
    label.name.tolowercase () == 분기
   )).길이;
 });

우리는 'live'라는 컨텐츠가 빌드의 모든 버전에 스테이징 여부에 표시되기를 원합니다. 또한“분기”라는 변수와 일치하는 레이블이있는 카드를 포함 할 것입니다.

어떻게 되나요? 그게 뭐야?

이것은 우리가 교활하는 곳입니다! NetLify 에서이 사이트를 주최하기로 선택했습니다 (면책 조항 : 저는 거기서 일합니다). 이것은 NetLify의 CI/CD 환경에서 빌드를 실행할 수 있음을 의미합니다. 이것은 GIT 저장소로 변경을 푸시 할 때마다 사이트를 재배치 하고이 사이트에 실제로 편리한 몇 가지 다른 것들에 액세스 할 수 있습니다.

하나는 지점 배포입니다. 사이트의 새로운 환경을 원한다면 GIT 저장소에서 새 지점을 만들어 사이트를 만들 수 있습니다. 빌드는 해당 맥락에서 실행되며 귀하의 사이트는 분기 이름을 포함하는 하위 도메인에 게시됩니다. 이와 같이.

오렌지“무대”레이블이있는 카드를 포함하여 목록의 모든 카드를 볼 수 있습니다. 레이블이 빌드 컨텍스트의 브랜치 이름과 일치하기 때문에이 빌드에 포함 시켰습니다. 지점은 빌드가 실행 한 지점을 포함하는 환경 변수였습니다.

 label.name.tolowercase () == 분기

이론적으로, 우리는 우리가 원하는만큼 많은 지점과 레이블을 만들 수 있으며 모든 종류의 준비 및 테스트 환경을 가질 수 있습니다. "무대"에서 "라이브"까지 무언가를 홍보 할 준비가 되셨습니까? 라벨을 교환하면 가면 좋을 것입니다!

그러나 어떻게 업데이트됩니까?

NetLify 's와 같은 CI/CD에서 사이트 빌드를 실행하여 얻은 두 번째 특권은 원하는 때마다 빌드를 트리거 할 수 있다는 것입니다. Netlify를 사용하면 빌드 후크를 만들 수 있습니다. 이들은 HTTP 게시물을 보낼 때 새 배포를 시작하는 WebHooks입니다.

Trello가 Webhooks를 지원하는 경우 Trello 보드가 변경 될 때마다 이러한 서비스를 함께 꿰매고 사이트를 자동으로 새로 고칠 수 있습니다. 그리고 그들이 무엇을하는지 추측하십시오! 만세!

NetLify 빌드 후크를 만들려면 사이트의 관리자 패널을 방문해야합니다. (이 데모 사이트를 몇 번의 클릭으로 새로운 NetLify 사이트로 부트 스트랩 할 수 있습니다.

이제 새로운 Build Hook URL로 무장하고 콘텐츠가 변경 될 때 호출하는 새로운 Trello Webhook를 등록해야합니다. Trello에서 Webhooks를 만드는 방법은 Trello의 API를 통해입니다.

이 사이트의 저장소에는 Trello API를 호출하고 Webhook을 만드는 작은 유틸리티가 포함되어 있습니다. 그러나 Trello 개발자 토큰과 키가 필요합니다. 고맙게도 Trello Developer Portal을 방문하고“고객 승인”에 따른 지침을 따르면 무료로 쉽게 만들 수 있습니다.

'em? 엄청난! 프로젝트에서 .env 파일에 저장하면이 명령을 실행하여 Trello Webhook을 설정할 수 있습니다.

 npm run hook -url https://api.netlify.com/build_hooks/xxxxx

그리고 우리는 간단한 사이트에서 컨텐츠를 관리하기위한 멋진 작은 흐름을 만들었습니다. 우리는 프론트 엔드를 원하는 방식으로 만들 수 있으며, Trello 보드에서 컨텐츠에 대한 업데이트가 발생하여 변경 될 때마다 사이트를 자동으로 업데이트합니다.

그래도 이것을 정말로 사용할 수 있습니까?

이것은 단순한 예입니다. 그것은 디자인에 의한 것입니다. 나는 분리하는 개념과 외부 서비스의 API를 사용하여 사이트의 컨텐츠를 구동하는 것을 보여주고 싶었습니다.

이는 더 많은 관련 프로젝트를 위해 완전한 기능을 갖춘 CMS를 대체하지 않습니다. 그러나 원칙은보다 복잡한 사이트에 완전히 적용 할 수 있습니다.

그러나이 모델은 독립 상점, 바 및 레스토랑과 같은 비즈니스에 대해 우리가 보는 웹 사이트 유형과 큰 일치 할 수 있습니다. 식당 홈페이지를 관리하기위한 목록이 하나 있고 메뉴 항목을 관리하기위한 Trello 보드를 상상해보십시오. 레스토랑 직원이 관리하기에 매우 접근하기 쉬우 며 메뉴가 변경 될 때마다 새로운 PDF를 업로드하는 것보다 훨씬 더 좋습니다.

예제를 탐색하고 자신의 보드 및 콘텐츠를 실험 할 준비가 되셨습니까? 이것을 시도하십시오 :

• 위에서 예제를 복제하고 배포하고 변경을 시작하십시오.
• Netlify Branch Builds로 할 수있는 일에 대해 자세히 알아보십시오.
• Trello 개발자 리소스를 더 깊이 파고 들으십시오.
  

위 내용은 Trello를 매우 간단한 CMS로 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!