Menggunakan Trello sebagai CMS yang sangat sederhana

Kadang -kadang laman web kami memerlukan sedikit percikan pengurusan kandungan. Tidak selalu. Tidak banyak. Tetapi sedikit. Pasaran CMS berkembang dengan produk yang berpatutan dan mudah didekati, jadi kami tidak kurang daripada pilihan. Syukurlah, ia adalah dunia yang sangat berbeza kepada yang digunakan untuk memaksa syarikat-syarikat untuk memecahkan satu dolar GA-Jillionty-satu (bukan kos yang tepat: Saya bulat ke bazillion terdekat) untuk platform CMS yang bersertifikat, semua-menari, semua-bersendirian, yang bersertifikat besar-besaran.

Kadang -kadang, bagaimanapun, senang menggunakan alat yang sangat mudah yang ada yang mengemas kini kandungan di laman web ini sudah biasa, dan bukannya mendapat genggaman dengan CMS baru.

Saya suka Trello banyak untuk menguruskan idea dan tugas. Dan ia mempunyai API. Mengapa tidak menggunakannya sebagai sumber kandungan untuk laman web? Maksud saya, hei, jika kita boleh melakukannya dengan Helaian Google, maka apa yang akan menghalang kita daripada mencuba perkara lain?

Helo, Trello

Berikut adalah laman web yang mudah untuk diterokai. Ia mendapat kandungannya dari papan Trello ini dan kandungan itu dipaparkan dalam bahagian. Setiap bahagian dihuni oleh tajuk dan perihalan bidang kad di papan Trello kami.

Trello menggunakan Markdown, yang berguna di sini. Sesiapa yang mengedit kandungan dalam kad Trello dapat memohon pemformatan teks asas dan mempunyai aliran markdown yang sama ke dalam tapak dan diubah menjadi HTML dengan proses binaan.

Blok bangunan

Saya peminat besar model ini menjalankan binaan yang menarik kandungan dari pelbagai suapan dan sumber, dan kemudian memusnahkannya bersama -sama dengan templat untuk menghasilkan HTML laman web. Ia meremehkan persembahan dari pengurusan kandungan (di mana istilah "decoupled" berasal dari dalam produk CMS moden yang popular). Dan ini bermakna kita bebas untuk membuat laman web seperti cara yang kita mahu dengan semua helah dan teknik Wizzy yang telah kita pelajari di sini di CSS-Tricks.

Oleh kerana kami menarik kandungan pada masa membina, kami tidak perlu bimbang tentang kuota penggunaan atau prestasi sumber data kami jika laman web kami menjadi popular dan membawa banyak trafik. Dan mengapa mereka tidak? Lihatlah betapa cantiknya kami membuat mereka!

Saya mahu bermain!

Baik. Anda boleh merebut salinan kod laman web ini dan mengikat kandungan hati anda. Versi ini termasuk maklumat tentang cara membuat papan Trello anda sendiri dan menggunakannya sebagai sumber untuk kandungan untuk membina.

• Contoh Repositori Kod Tapak di GitHub
• Laman demo
• Klon dan gunakan salinan anda sendiri dalam beberapa klik

Jika anda ingin berjalan melalui bagaimana ini berfungsi terlebih dahulu daripada menyelam ke dalamnya sendiri, baca terus.

Menemui API

Trello mempunyai API yang didokumentasikan dengan baik dan set sumber pemaju. Terdapat juga modul nod yang berguna untuk memudahkan tugas mengesahkan dan berinteraksi dengan API. Tetapi anda juga boleh meneroka API dengan menggigit dengan URL apabila anda meneroka papan trello anda.

Sebagai contoh, URL untuk papan Trello di atas adalah:

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

Jika kita menambah .json ke url itu, Trello menunjukkan kepada kita kandungan yang diwakili sebagai JSON. Lihatlah.

Kita boleh menggunakan teknik ini untuk memeriksa data asas di seluruh Trello. Berikut adalah URL untuk satu kad khususnya:

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

Jika kita menggunakan helah kecil ini dan tambah .json ke URL kita akan melihat data yang menggambarkan kad itu.

Kami akan menemui perkara yang menarik - ID unik untuk papan, senarai, dan kad. Kita dapat melihat kandungan kad, dan banyak metadata.

Saya suka melakukan ini! Lihat semua data yang indah! Bagaimana kita menggunakannya?

Memutuskan Cara Menggunakan Papan

Untuk contoh ini, mari kita anggap bahawa kita mempunyai laman web dengan hanya satu halaman kandungan yang boleh diurus. Senarai atau lajur di papan kami akan sesuai untuk mengawal bahagian pada halaman tersebut. Editor boleh memberi mereka tajuk dan kandungan, dan menyeret mereka ke dalam perintah yang mereka mahu.

Kami memerlukan ID senarai supaya kami dapat mengaksesnya melalui API. Nasib baik, kami telah melihat bagaimana untuk mengetahui bahawa - lihat data untuk mana -mana kad dalam senarai yang dipersoalkan. Setiap orang mempunyai harta Idboard. Bingo!

Menjana laman web

Pelan ini adalah untuk mengambil data dari Trello dan memohon kepada beberapa templat untuk mengisi laman web kami. Kebanyakan penjana tapak statik (SSG) akan melakukan tugas itu. Itulah yang mereka mahir. Saya akan menggunakan Eleventy kerana saya fikir ia mempunyai konsep paling mudah untuk difahami. Plus, sangat berkesan untuk mendapatkan data dan menjana HTML bersih dengan nunjucks (bahasa templat yang popular).

Kami akan dapat menggunakan Expression Lin templat kami yang mengeluarkan elemen seksyen untuk setiap item yang terdapat dalam objek JavaScript yang dipanggil Trello:

 
{ % untuk kad di Trello %}
<section>
  <h2 id="card-name"> {{card.name}} </h2>
  <dana>
    { % markdown %}
      {{- card.desc | selamat}}
    { % endmarkdown %}
  

{ % endfor %}</dana></section>

Mengambil data untuk membina

Teknik yang popular dengan laman web jamStack seperti ini adalah untuk menjalankan binaan dengan Gulp, Grunt atau [memasukkan hotness skrip baru terbaru di sini] yang pergi dan mengambil data dari pelbagai API dan suapan, menyimpan data dalam format yang sesuai untuk SSG, dan kemudian menjalankan SSG untuk menghasilkan HTML. Ini berfungsi dengan baik.

Eleventy memudahkan perkara di sini dengan menyokong pelaksanaan JavaScript dalam fail datanya. Dalam erti kata lain, bukannya hanya memanfaatkan data yang disimpan sebagai JSON atau YAML, ia boleh menggunakan apa sahaja yang dikembalikan oleh JavaScript, membuka pintu untuk membuat permintaan terus ke API apabila Eleventy Build berjalan. Kami tidak memerlukan langkah membina berasingan untuk pergi untuk mengambil data terlebih dahulu. Sebelas lagi akan melakukannya untuk kita.

Mari kita gunakan itu untuk mendapatkan data untuk objek Trello kami dalam templat.

Kami boleh menggunakan klien Node Trello untuk menanyakan API, tetapi ternyata semua data yang kami mahukan ada di JSON untuk Lembaga. Semuanya! Dalam satu permintaan! Kita hanya boleh mengambilnya dalam satu perjalanan!

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

  // Gunakan Node-Fetch untuk mendapatkan data JSON mengenai lembaga ini
  const fetch = memerlukan ('node-fetch');
  kembali mengambil (trello_json_url)
    .THEN (res => res.json ())
    .THEN (JSON => CONSOLE.LOG (JSON));
};

Walau bagaimanapun, kami tidak mahu menunjukkan semua data dari lembaga itu. Ia termasuk kad pada senarai lain, kad yang telah ditutup dan dipadam, dan sebagainya. Tetapi kita boleh menapis kad untuk hanya memasukkan yang menarik terima kasih kepada kaedah penapis JavaScript.

 // trello.js
modul.exports = () => {
   const trello_json_url = 'https: //trello.com/b/zzc0uswz/hellotrello.json'
   const trello_list_id = '5e98325d6d6bd120f2b7395f',
 
   // Gunakan Node-Fetch untuk mendapatkan data JSON mengenai lembaga ini
   const fetch = memerlukan ('node-fetch');
   kembali mengambil (trello_json_url)
   .THEN (res => res.json ())
   .THEN (JSON => {
 
     // Cukup fokus pada kad yang ada dalam senarai yang kami mahukan
     // dan tidak mempunyai status tertutup
     Biarkan contentCards = json.cards.filter (card => {
       kembali card.idlist == trello_list_id &&! card.closed;
     });
 
     mengembalikan kad kandungan;
 });
};

Itu akan melakukannya! Dengan ini disimpan dalam fail yang dipanggil Trello.js dalam direktori data Eleventy, kami akan mempunyai data ini siap digunakan dalam templat kami dalam objek yang dipanggil Trello.

Selesai-Zo! ?

Tetapi kita boleh melakukan yang lebih baik. Mari kita juga mengendalikan imej yang dilampirkan, dan juga menambah cara untuk mempunyai kandungan yang dipentaskan untuk semakan sebelum ia berjalan secara langsung.

Lampiran imej

Ada kemungkinan untuk melampirkan fail ke kad di Trello. Apabila anda melampirkan imej, ia muncul di dalam kad dengan URL sumber aset yang diterangkan dalam data. Kita boleh menggunakannya!

Jika kad mempunyai lampiran imej, kami akan ingin mendapatkan URL sumbernya, dan tambahkannya sebagai tag imej kepada apa yang dimasukkan templat kami ke dalam halaman pada masa membina. Ini bermakna menambah markdown untuk imej ke markdown dalam sifat keterangan JSON kami (card.desc).

Kemudian kita boleh membiarkan Eleventy mengubahnya menjadi HTML untuk kita bersama -sama dengan segala yang lain. Kod ini mencari kad di JSON kami dan mengurut data ke dalam bentuk yang kami perlukan.

 // trello.js

// Sekiranya kad mempunyai lampiran, tambahkannya sebagai gambar 
// dalam penerangan penerangan
contentCards.foreach (card => {
  jika (card.attachments.length) {
    card.desc = card.desc `\ n! [$ {card.name}] ($ {card.attachments [0] .url} '$ {card.name}')`;
  }
});

Sekarang kita boleh menggerakkan imej di dalam kandungan kita juga. Berguna!

Kandungan pementasan

Mari tambahkan satu lagi berkembang ke bagaimana kita boleh menggunakan Trello untuk menguruskan kandungan laman web kami.

Terdapat beberapa cara yang mungkin kita mahu pratonton kandungan sebelum melancarkannya ke dunia. Lembaga Trello kami boleh mempunyai satu senarai untuk pementasan dan satu senarai untuk kandungan pengeluaran . Tetapi itu akan menjadi sukar untuk memvisualisasikan bagaimana kandungan baru hidup bersama yang telah diterbitkan.

Idea yang lebih baik adalah menggunakan label Trello untuk menandakan kad mana yang diterbitkan secara langsung, dan yang hanya perlu dimasukkan ke dalam versi yang dipentaskan laman web ini. Ini akan memberi kita aliran kerja yang bagus. Kami boleh menambah lebih banyak kandungan dengan menambah kad baru di tempat yang betul. Labelkannya dengan "panggung" dan menapisnya dari kad yang terdapat di cawangan pengeluaran kami.

Sedikit penapisan objek JavaScript kami dipanggil:

 // trello.js

// Hanya sertakan kad yang dilabelkan dengan "live" atau dengan
// Nama cawangan yang kita ada
contentCards = contentCards.filter (card => {
  kembali card.labels.filter (label => (
    label.name.tolowerCase () == 'live' ||
    label.name.tolowerCase () == cawangan
   )). Panjang;
 });

Kami mahu kandungan berlabel 'Live' muncul pada setiap versi binaan, pementasan atau tidak. Di samping itu, kami akan melihat untuk memasukkan kad yang mempunyai label yang sepadan dengan pembolehubah yang dipanggil "Cawangan".

Kenapa? Apa itu?

Di sinilah kita mendapat licik! Saya telah memilih untuk menjadi tuan rumah laman web ini di Netlify (penafian: Saya bekerja di sana). Ini bermakna saya boleh menjalankan binaan dari persekitaran CI/CD Netlify. Ini menyerahkan laman web ini setiap kali saya menolak perubahan ke repositori gitnya, dan juga memberikan akses kepada beberapa perkara lain yang sangat berguna untuk laman web ini.

Satu adalah penyebaran cawangan. Jika anda mahukan persekitaran baru untuk tapak, anda boleh membuatnya dengan membuat cawangan baru dalam repositori Git. Binaan akan dijalankan dalam konteks itu, dan laman web anda akan diterbitkan pada subdomain yang termasuk nama cawangan. Seperti ini.

Lihatlah dan anda akan melihat semua kad dari senarai kami, termasuk yang mempunyai label "panggung" oren. Kami memasukkannya dalam binaan ini kerana labelnya sepadan dengan nama cawangan untuk konteks membina. Cawangan adalah pemboleh ubah persekitaran yang mengandungi mana -mana cawangan yang dibina di dalamnya.

 label.name.tolowerCase () == cawangan

Secara teori, kita boleh membuat banyak cawangan dan label seperti yang kita suka, dan mempunyai pelbagai persekitaran pementasan dan ujian. Bersedia untuk mempromosikan sesuatu dari "panggung" ke "hidup"? Tukar label dan anda boleh pergi!

Tetapi bagaimana ia mengemas kini?

Perkauman kedua yang kita dapat dari menjalankan tapak membina dalam CI/CD seperti Netlify's adalah bahawa kita boleh mencetuskan binaan untuk dijalankan setiap kali kita suka. Netlify membolehkan kita membuat cangkuk membina. Ini adalah webhooks yang memulakan penempatan baru apabila anda menghantar siaran HTTP kepada mereka.

Jika Trello menyokong webhooks juga, maka kami dapat menjahit perkhidmatan ini bersama -sama dan menyegarkan semula laman web ini secara automatik apabila papan Trello berubah. Dan rasa apa ... mereka lakukan! Hoorah!

Untuk membuat Netlify Build Hook, anda perlu melawat panel admin laman web anda. (Anda boleh bootstrap laman demo ini ke laman Netlify baru dalam beberapa klik jika anda ingin mencubanya.)

Sekarang, bersenjata dengan URL Hook Build baru, kita perlu mendaftarkan webhook Trello baru yang memanggilnya apabila kandungan berubah. Kaedah untuk membuat webhooks di Trello adalah melalui API Trello.

Repo untuk laman web ini termasuk sedikit utiliti untuk memanggil API Trello dan membuat webhook untuk anda. Tetapi anda perlu mempunyai token dan kunci pemaju Trello. Syukurlah, mudah untuk membuat mereka secara percuma dengan melawat portal pemaju Trello dan mengikuti arahan di bawah "membenarkan pelanggan."

Ada? Hebat! Jika anda menyimpannya dalam fail .env dalam projek anda, anda boleh menjalankan arahan ini untuk menubuhkan Trello Webhook:

 NPM Run Hook --url https://api.netlify.com/build_hooks/xxxxx

Dan dengan itu, kami telah mencipta aliran kecil yang bagus untuk menguruskan kandungan di laman web yang mudah. Kami boleh membuat frontend kami seperti yang kami mahukan, dan mempunyai kemas kini kandungan yang berlaku di papan Trello yang secara automatik mengemas kini tapak apabila perubahan dibuat.

Bolehkah saya menggunakannya walaupun?

Ini adalah contoh yang mudah. Itu dengan reka bentuk. Saya benar -benar mahu menunjukkan konsep decoupling, dan menggunakan API perkhidmatan luaran untuk memacu kandungan untuk tapak.

Ini tidak akan menggantikan CMS yang dipadam penuh untuk projek yang lebih banyak. Tetapi prinsip -prinsipnya benar -benar terpakai kepada laman web yang lebih kompleks.

Model ini, bagaimanapun, boleh menjadi perlawanan hebat untuk jenis laman web yang kita lihat untuk perniagaan seperti kedai bebas, bar dan restoran. Bayangkan papan Trello yang mempunyai satu senarai untuk menguruskan halaman rumah restoran, dan satu untuk menguruskan item menu mereka. Sangat mudah didekati untuk kakitangan restoran untuk mengurus, dan jauh lebih baik daripada memuat naik PDF baru menu apabila ia berubah.

Bersedia untuk meneroka contoh dan percubaan dengan papan dan kandungan anda sendiri? Cuba ini:

• Klon dan gunakan contoh dari atas, dan mula membuat perubahan anda.
• Ketahui lebih lanjut mengenai Netlify apa yang boleh anda lakukan dengan membina cawangan Netlify
• Menggali lebih mendalam ke dalam sumber pemaju Trello.
  

Atas ialah kandungan terperinci Menggunakan Trello sebagai CMS yang sangat sederhana. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!