Dễ dàng tạo các trang web HTML tĩnh từ JSON với AWS Lambda và TiddlyWiki – xây dựng html từ json

Hướng dẫn mã thấp này chỉ cho bạn cách tạo các trang web HTML tĩnh trong S3 bằng AWS Lambda và TiddlyWiki. Không cần biết bất kỳ javascript!

Bạn đang xem : xây dựng html từ json

Việc tạo các trang web HTML tĩnh đã nhanh chóng chuyển từ sự mù mờ của Jamstack geekdom sang xu hướng chủ đạo bị ám ảnh bởi khái niệm. Nếu bạn giống như tôi và bạn tin rằng mã thấp là món cháo ấm áp sẽ nuôi Internet trong tương lai, thì có lẽ bạn đã tìm kiếm thứ gì đó ngay giữa hai thái cực đó: một cách dễ dàng để tạo HTML tĩnh từ JSON bằng AWS Lambda, nhưng mà không thực sự phải viết bất kỳ javascript nào .

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bỏ qua hầu hết các công việc bổ sung và các sắc thái của Trình tạo trang web tĩnh truyền thống như Gatsby (cháo nguội). Và mặc dù không có gì sai với cháo nóng, tại Digital Mark, chúng tôi muốn thưởng thức hương vị của các món pha chế của mình để chúng tôi có thể thêm gia vị cho phù hợp – và đôi khi là các Trình tạo trang web tĩnh dựa trên Ý niệm thời thượng như Super Potion có thể che khuất một chút quá nhiều niềm vui và tính linh hoạt đối với chúng tôi.

Nếu Goldilocks thích máy tính nhiều như cô ấy thích ăn cháo, cô ấy sẽ giải quyết vấn đề này bằng cách sử dụng TiddlyWiki. Vì vậy, đó là những gì chúng tôi sẽ sử dụng.

Mục lục

Trình tạo trang web tĩnh mã thấp sử dụng TiddlyWiki

Hugo, Gatsby, Ricardo… họ là những khuôn khổ tuyệt vời để thu hút người dùng mới từ Zero đến Hello World. Tôi thậm chí đã tạo ra cái cuối cùng và nó vẫn có vẻ đủ tiếp cận.

Nhưng khi bạn lấy mẫu ra khỏi hộp, chắc chắn bạn sẽ cần phải tùy chỉnh một số thứ. Điều gì xảy ra nếu tôi muốn tạo một trang danh sách? Hoặc nếu tôi muốn tích hợp một số jquery mà tôi tìm thấy trên Stackoverflow vào các trang của mình thì sao?

Có cả một nhóm nhỏ các chuyên viên thiết kế không thể dành thời gian ngay bây giờ để tìm hiểu một loạt các javascript có kiến ​​thức, chỉ để hiển thị một số danh sách đã lọc trong JSX và tạo một trang tùy chỉnh. Quá dễ dàng để gặp khó khăn với những thứ này. Điều này thật tệ vì nó khiến mọi người quay lưng với nhà phát triển web, có nghĩa là nó khiến mọi người không tạo ra nhiều thứ thú vị hơn trên mạng cho tất cả chúng ta thưởng thức.

Chà, điều gì sẽ xảy ra nếu tôi nói với bạn rằng có một công cụ mã thấp dễ dàng để tạo các trang tĩnh với AWS Lambda?

TIDDLY THE WIKI

Nếu bạn chưa nghe nói về TiddlyWiki, bạn có thể nghĩ rằng tôi đang chơi lại trò chơi tên được tạo ra. Nhưng TiddlyWiki là khung mã thấp yêu thích của chúng tôi. Nó đã tồn tại khoảng 20 năm. Nó chắc chắn. Và thật dễ dàng.

Với mục đích tạo HTML tĩnh, bạn có thể coi TiddlyWiki chỉ là một IDE siêu đơn giản để thiết lập các trang tùy chỉnh của bạn. Cấp cao, tất cả những gì bạn phải làm là:

  • Mở phiên bản TiddlyWiki mới trong trình duyệt của bạn.
  • Sao chép-dán mẫu HTML của bạn vào Wiki.
  • Thêm một số {{ngoặc nhọn}} cho dữ liệu sẽ được chuyển vào từ các đầu vào JSON của bạn.

Khi bạn làm điều đó, bạn chỉ cần một lệnh để tạo HTML tĩnh dựa trên mẫu của bạn. Điểm hay của toàn bộ quá trình này là TiddlyWiki có thể dễ dàng tự xuất dưới dạng hàm Lambda , vì vậy bạn có thể chạy lệnh đó trong AWS theo yêu cầu. Điều đó có nghĩa là bạn có thể bắt đầu gửi dữ liệu vào Wiki của mình và tạo các trang HTML trong S3 theo ý muốn. Tất cả mà không cần mã hóa bất kỳ javascript nào cho mình!

Sử dụng phương pháp này, bạn có thể tạo các trang HTML tĩnh từ Gsheet hoặc từ các bảng trong Airtable hoặc Trello. Hoặc bạn có thể sử dụng bất kỳ cách nào khác để tạo và gửi JSON, chẳng hạn như từ một phiên bản TiddlyWiki khác đóng vai trò là CMS tùy chỉnh của bạn. Tâm trí bị thổi bay!

Chọn và tách HTML tĩnh cho Lambda

NHIỆM VỤ

Đối với bài tập này, thử thách của tôi là tạo một trang HTML đơn giản để hiển thị danh sách và cập nhật danh sách hàng ngày thông qua hàm Lambda của tôi. Danh sách phải được sắp xếp theo thứ tự bảng chữ cái và chứa tất cả các chủ đề được đề cập trên trang web tin tức Tin tức màu tím .

Purple News ra đời từ việc khách hàng cần theo dõi cách một số nguồn tin tức đưa ra chủ đề “Bỏ phiếu” trong cuộc bầu cử tổng thống Hoa Kỳ năm 2020. Sử dụng AWS Athena để mở rộng quy mô tự động hóa truy vấn SQL, chúng tôi đã mở rộng khái niệm này để theo dõi nhiều chủ đề khác nhau – và sử dụng TiddlyWiki-on-Lambda để tạo mọi trang trên trang web!

Mỗi ngày trên Purple News, các chủ đề nóng trong tin tức được tự động truy vấn và đối chiếu để dễ đọc trong một mẫu HTML. Toàn bộ mẫu HTML được tạo bởi TiddlyWiki. Ý tưởng là giúp người đọc xác định và so sánh một cách khách quan hơn khuynh hướng chính trị có trong tất cả các báo cáo.

Chủ đề Tin tức màu tím "Du lịch" tại getpurplenews.com/travel ... Trang HTML được tạo bằng hàm Lambda được tạo bằng TiddlyWiki. Chủ đề Tin tức màu tím “ Du lịch ”tại getpurplenews.com/travel … Trang HTML được tạo bằng hàm Lambda được tạo bằng TiddlyWiki.

Bất cứ khi nào có chủ đề / từ khóa mới như “Du lịch” được tạo, một tải trọng JSON nhỏ về chủ đề được gửi đến API Gateway. Điều này kích hoạt chức năng Lambda để “in” trang HTML sang S3. Điểm mấu chốt của tất cả điều này là mã bạn cần cho Lambda được tạo dễ dàng bằng TiddlyWiki, không cần biết cách viết mã javascript.

Cho đến nay, trên Purple News, chúng tôi đã thiết lập một hàm Lambda tiện dụng để tạo một trang cho từng chủ đề riêng lẻ; nhưng điều gì sẽ xảy ra nếu chúng ta muốn xây dựng một trang chỉ mục, như một sơ đồ trang web, để người dùng có thể duyệt qua tất cả các chủ đề được đề cập trên trang web?

HTML

Để khách truy cập có thể xem sơ đồ trang web của mọi chủ đề trên Purple News, tôi sẽ muốn sử dụng định dạng HTML cho phép tôi dễ dàng thêm các Chủ đề mới vào danh sách mỗi ngày qua Lambda của mình. Không có gì quá lạ mắt ở đây, chỉ cần một danh sách có dấu đầu dòng sẽ làm được:

  & lt; ul id = "PurpleTopics" & gt;
  & lt; li & gt; & lt; a href = "/ a Arizona" & gt; Arizona & lt; / a & gt; & lt; / li & gt;

  & lt; li & gt; & lt; a href = "/ belarus" & gt; Belarus & lt; / a & gt; & lt; / li & gt;

  & lt; li & gt; & lt; a href = "/ china" & gt; Trung Quốc & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;  

Vì tải trọng JSON cơ bản của tôi sẽ bao gồm tên riêng của chủ đề, cùng với liên kết tương đối đến trang, nên mẫu “ria mép” xoăn của tôi cho các mục danh sách sẽ trông giống như sau:

  & lt; li & gt; & lt; a href = {{topic_link}} & gt; {{topic_name}} & lt; / a & gt; & lt; / li & gt;  

Sẽ thực sự tuyệt vời nếu tôi có thể cho phép người dùng tìm kiếm danh sách ngay tại đó trên trang. Điều này sẽ rất tuyệt vì danh sách đang tăng lên và nó sẽ giúp tôi không gặp rắc rối khi thiết lập tìm kiếm trên toàn trang thông qua một Lambda khác.

Tôi đã tìm thấy mã chương trình biên dịch đơn giản này trên w3schools sẽ hoạt động hoàn hảo. Nó thậm chí còn cung cấp cho tôi một số kiểu CSS đẹp cho danh sách của tôi. Điều này sẽ được nhanh chóng!

Bản xem trước có thể tìm kiếm trong- danh sách trang từ w3schools.com

Trang sẽ bao gồm:

  • Các tiêu đề mở HTML cơ bản.
  • Các kiểu CSS từ w3schools để tạo kiểu cho các mục trong danh sách.

  • Nội dung HTML với {{curlies} của tôi }, mà TiddlyWiki-on-Lambda của tôi sẽ chuyển thành danh sách các chủ đề tin tức.
  • Đoạn mã JS từ w3schools cho tính năng tìm kiếm.
CÁC BƯỚC
1. Cài đặt phiên bản Node.js của TiddlyWiki trên máy cục bộ của bạn.

Điều kiện tiên quyết duy nhất trên máy của bạn là Node.js và NPM, Node Package Manager.

  sudo npm install -g tiddlywiki  

Để xác minh rằng điều đó đã hoạt động, hãy đảm bảo bạn nhận được phản hồi khi kiểm tra phiên bản TiddlyWiki của mình:

  tiddlywiki --version  
2. Bắt đầu một Wiki mới có tên TopicBrowser.

Hãy bắt đầu bằng cách tạo một thư mục mẹ mới cho dự án nhỏ của chúng ta ngày hôm nay có tên là TopicWikis.

  mkdir TopicWikis
cd TopicWikis  

Cuối cùng, chúng tôi sẽ tạo hai Wiki trong thư mục này: một dành cho môi trường nhà phát triển cục bộ của chúng tôi và một Wiki khác mà chúng tôi sẽ sử dụng đặc biệt để tạo hàm Lambda của chúng tôi.

Xem Thêm  Tạo một bảng HTML với hình ảnh: Hướng dẫn đầy đủ bằng cách sử dụng ví dụ mã hóa - bảng html cho hình ảnh

Hãy tiếp tục và tạo Wiki đầu tiên của chúng tôi.

Từ thư mục TopicWikis, chúng tôi sẽ bắt đầu một Wiki mới để thiết lập mẫu HTML của chúng tôi trên máy cục bộ của chúng tôi. Chúng tôi sẽ gọi Wiki là “local_Wiki”. Để giúp chúng tôi dễ dàng chỉnh sửa Wiki ngay trong trình duyệt web, chúng tôi sẽ đưa vào các thành phần “máy chủ” dựng sẵn của TiddlyWiki, các thành phần này sẽ chạy một máy chủ web đơn giản trên máy của chúng tôi và phục vụ Wiki của chúng tôi.

  tiddlywiki local_Wiki --init server  

Bạn sẽ thấy rằng lệnh tiddlywiki đã tạo một thư mục mới có tên local_Wiki.

TiddlyWiki chạy cục bộ trên nodejs bằng cách sử dụng plugin máy chủ web cục bộ. TiddlyWiki chạy cục bộ trên nodejs bằng cách sử dụng plugin máy chủ web cục bộ.

Giờ đây, chúng tôi đã sẵn sàng chạy TiddlyWiki trên Node.js trên máy cục bộ và tương tác với Wiki của chúng tôi. Hãy khởi chạy local_Wiki của chúng tôi để chúng tôi có thể dán HTML của chúng tôi từ w3schools.

  tiddlywiki local_Wiki --listen port = "8090"  

Thao tác này sẽ khởi chạy cục bộ Wiki mới của bạn trên cổng 8090. Phản hồi trong thiết bị đầu cuối sẽ như sau (lưu ý url cục bộ tại http://127.0.0.1:8090). Bạn nên để ngăn điều khiển đầu cuối này một mình trong khi nó đang chạy.

  / * DỰ KIẾN PHẢN HỒI TỪ CHẤM DỨT * /

syncer-server-filesystem: Gửi tác vụ 'lưu': $: / StoryList
Phục vụ trên http://127.0.0.1:8090
(nhấn ctrl-C để thoát)
 

Chúng tôi đang nóng lên! Bây giờ, bạn có thể tiếp tục và truy cập cổng 8090 trong trình duyệt và xem Wiki mới của mình.

tiddlywiki chạy cục bộ trên nodejs < h5> 3. Dán HTML của bạn vào Wiki dưới dạng Tiddler được gọi là TopicPage.

Bạn sẽ thấy trong tiêu đề trang “TiddlyWiki của tôi” trong thanh bên có một dấu cộng (+) tiện dụng. Hãy tiếp tục và nhấp vào đây để tạo bản nháp mới “Tiddler.”

Đừng lo lắng về thuật ngữ ở đây – Tiddler giống như một “Bài đăng” trên WordPress hoặc bất kỳ nền tảng nào khác.

Bên trong Tiddler bản nháp của chúng tôi, hãy mượn tất cả mã cho trang từ w3schools và dán mã đó vào. Có một thủ thuật quan trọng ở đây: dán mã vào bên trong hai thanh dán ngược. Cần điều hướng thường nằm bên cạnh số 1 trên bàn phím của bạn.

các mẫu trang web html tĩnh với tiddlywiki Tạo mẫu HTML tĩnh trong TiddlyWiki. Lưu ý các dấu nền xung quanh tất cả HTML tĩnh.

Dưới đây là cách mã đầy đủ từ w3schools sẽ xem xét điểm này bên trong TopicPage Tiddler của tôi, bao gồm các thẻ HTML cơ bản. Tôi đã nhận xét searchicon.png cho hộp tìm kiếm, vì chúng tôi muốn mọi thứ nằm trong một trang ngay bây giờ, không tham chiếu đến các tệp bên ngoài. Lưu ý các dấu gạch ngược ở đầu và cuối mã.

  `
& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt;
& lt; phong cách & gt;
* {
  box-sizing: border-box;
}

#myInput {
  / * background-image: url ('/ css / searchicon.png'); * /
  background-position: 10px 12px;
  background-repeat: không lặp lại;
  chiều rộng: 100%;
  font-size: 16px;
  đệm: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  đệm: 0;
  lề: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; / * Ngăn hai đường viền * /
  màu nền: # f6f6f6;
  đệm: 12px;
  văn bản-trang trí: không có;
  font-size: 18px;
  màu đen;
  hiển thị: khối
}

#myUL li a: hover: not (.header) {
  màu nền: #eee;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; h2 & gt; Danh bạ của tôi & lt; / h2 & gt;

& lt; input type = "text" id = "myInput" onkeyup = "myFunction ()" placeholder = "Tìm kiếm tên .." title = "Nhập tên" & gt;

& lt; ul id = "myUL" & gt;
  & lt; li & gt; & lt; a href = "#" & gt; Adele & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; Agnes & lt; / a & gt; & lt; / li & gt;

  & lt; li & gt; & lt; a href = "#" & gt; Billy & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; Bob & lt; / a & gt; & lt; / li & gt;

  & lt; li & gt; & lt; a href = "#" & gt; Calvin & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; Christina & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; Cindy & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;

& lt; script & gt;
function myFunction () {
    var đầu vào, bộ lọc, ul, li, a, i, txtValue;
    input = document.getElementById ("myInput");
    filter = input.value.toUpperCase ();
    ul = document.getElementById ("myUL");
    li = ul.getElementsByTagName ("li");
    for (i = 0; i & lt; li.length; i ++) {
        a = li [i] .getElementsByTagName ("a") [0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase (). indexOf (filter) & gt; -1) {
            li [i] .style.display = "";
        } khác {
            li [i] .style.display = "none";
        }
    }
}
& lt; / script & gt;

& lt; / body & gt;
& lt; / html & gt;  ` 

Sau khi mã của bạn được dán vào, đừng quên nhấp vào dấu kiểm ở trên cùng bên phải của Tiddler nháp để lưu công việc của bạn!

Lưu mẫu HTML trong TiddlyWiki bằng cách nhấp vào dấu kiểm. Lưu mẫu HTML trong TiddlyWiki.

4. Kiểm tra công việc của bạn cho đến nay bằng cách tạo trang mẫu w3schools tại địa phương.

Trong cửa sổ đầu cuối mới, điều hướng đến thư mục TopicWikis của bạn.

  cd TopicWikis  

Bây giờ, hãy tạo trang HTML mẫu của w3schools bằng cách chạy:

 tiddlywiki local_Wiki --render [[TopicPage]] [is [tiddler] addsuffix [.html]] "text / trơn"  

Nếu tất cả đã suôn sẻ đến đây, cấu trúc thư mục của bạn trong TopicWikis sẽ giống như bên dưới, với một thư mục “đầu ra” mới được tạo bởi lệnh –render của bạn.

Cấu trúc thư mục Tiddlywiki sau –render lệnh để hiển thị Tiddler dưới dạng HTML.

Giờ đây, bạn có thể mở TopicPage.html và nó sẽ giống như ví dụ từ w3schools!

TopicPage.html được xuất với mã mẫu từ w3schools.

5. Thay thế danh sách mẫu các mục bằng {{curlies}} của chúng tôi.

Giờ cuối cùng đã đến lúc đi vào trọng tâm của vấn đề và tạo khuôn mẫu cho HTML của chúng tôi để nó có thể nhận được đầu vào JSON.

Bạn có nhớ dấu ngoặc nhọn, hay còn gọi là mẫu “ria mép” của chúng tôi trước đó không? Hãy giữ cho nó tiện dụng:

  & lt; li & gt; & lt; a href = {{topic_link}} & gt; {{topic_name}} & lt; / a & gt; & lt; / li & gt;  

Bây giờ, trở lại local_Wiki trong trình duyệt web của chúng tôi, hãy mở Trình thu dọn trang chủ đề bằng cách nhấp vào biểu tượng bút chì. Bây giờ chúng ta quay lại HTML thô của chúng ta từ w3schools.

Ở giữa mã của chúng tôi, chúng tôi có các dấu đầu dòng HTML cho danh sách của chúng tôi. Chúng tôi lưu ý rằng thẻ ul mở và đóng sẽ không bao giờ thay đổi. Điều quan trọng cần lưu ý lại ở đây là bất kỳ phần tử nào sẽ không thay đổi dựa trên đầu vào JSON của chúng tôi đều phải được đặt trong dấu gạch ngược. Tại thời điểm này, chúng tôi có tổng cộng bốn (4) dấu gạch ngược.

  ` / * tất cả HTML mở từ trước đó đều ở đây * /

& lt; ul id = "myUL" & gt;
`

 & lt; li & gt; & lt; a href = {{topic_link}} & gt; {{topic_name}} & lt; / a & gt; & lt; / li & gt; 
`
& lt; / ul & gt;

/ * tất cả HTML đóng từ trước đó đều ở đây * /

` 

Chỉ có một vấn đề ở đây. Các mẫu ria mép đều đẹp và đẹp, nhưng làm cách nào để chúng tôi hướng dẫn TiddlyWiki tạo danh sách tất cả các chủ đề và hiển thị chúng theo thứ tự bảng chữ cái bằng cách sử dụng mẫu ria mép của chúng tôi?

Chà, nhờ vào sức mạnh của cú pháp WikiText mã thấp của TiddlyWiki, việc tạo một danh sách được lọc và sắp xếp các mục chúng tôi chuyển vào từ JSON sẽ trở nên vô cùng dễ dàng.

TỔNG HỢP BỘ LỌC DANH SÁCH TIDDLYWIKI

Một khái niệm chính của TiddlyWiki là “mọi thứ đều là Tiddler”. Chúng tôi đã tạo một Tiddler: TopicPage. Tiếp theo, chúng ta nên lưu ý rằng các chủ đề thực tế được chuyển vào Wiki của chúng ta sau này cũng sẽ tự trở thành Tiddlers.

Tiddlers tương tự như Bài đăng trong giao diện người dùng và tương tự với các đối tượng javascipt bên dưới. Chúng có thể chứa bất kỳ trường và nội dung nào bạn muốn. Ví dụ: TopicPage Tiddler của chúng tôi chứa các trường sau:

Trường

  • Tiêu đề : Trang chủ đề
  • Trường Văn bản : Mã HTML của tôi được đặt trong dấu gạch ngược

Tương tự như vậy, các chủ đề thực tế của chúng tôi sẽ được chuyển vào Wiki của chúng tôi dưới dạng Tiddlers và sẽ chứa các trường sau:

Trường

  • Tiêu đề : topic_name phù hợp của chủ đề, chẳng hạn như “Joe Biden”
  • Trường Liên kết : href topic_link cho chủ đề, như trường “/ joebiden /”
  • Tag : chúng tôi sẽ gắn thẻ mỗi chủ đề là “Chủ đề”, chỉ để giúp bạn dễ dàng lọc những Tiddlers này sau
  • < / ul>

    Bằng cách sử dụng trường Thẻ để chỉ bao gồm những Tiddlers đó trong Wiki của chúng tôi có thẻ “Chủ đề”, WikiText cho phép chúng tôi tạo danh sách tất cả các chủ đề bằng cách chỉ cần đặt các cuộn tròn của chúng tôi trong một vài thẻ danh sách WikiText đặc biệt. Lưu ý việc thêm dấu chấm than kép vào trước tên trường, đây là cách hoạt động của tham chiếu trường trong WikiText.

      & lt; $ list filter = "[tag [Chủ đề]]" & gt;
    & lt; li & gt; & lt; a href = {{!! topic_link}} & gt; {{!! title}} & lt; / a & gt; & lt; / li & gt;
    & lt; / $ list & gt;  

    Đó là tất cả những gì bạn cần để tạo một danh sách đầu dòng về mọi chủ đề bạn tạo. Đó là điều kỳ diệu ngay ở đây, tốc độ và sự đơn giản của bộ lọc danh sách, điều này khiến TiddlyWiki trở thành một công cụ mã thấp mạnh mẽ như vậy. Muốn chơi với danh sách một chút? Dễ dàng!

      / * sắp xếp theo thứ tự bảng chữ cái * /
    & lt; $ list filter = "[tag [Chủ đề] sắp xếp [title]]" & gt; & lt; / $ list & gt;
    
    / * chỉ liệt kê những chủ đề được sửa đổi trong tuần qua * /
    & lt; $ list filter = "[tag [Chủ đề] ngày [-7] sort [title]]" & gt; & lt; / $ list & gt;
     

    Sử dụng WikiText, chúng tôi có thể mở rộng khả năng lọc để tạo tất cả các kiểu hiển thị và định dạng dữ liệu có điều kiện. Kết hợp điều này với khả năng tạo macro WikiText (hoặc macro js thực tế) và bạn đã có cho mình một công cụ mã thấp dành cho mọi lứa tuổi.

     const myPromise = new Promise ((from_me, to_you) = & gt; {
      WikiText = {
        cách freakin 'dễ dàng hơn thế này. (' foo ');
      }, 100);
    });
    });)))});)) fml))});  

    Để kiểm tra cục bộ tiến trình của chúng tôi, hãy chuyển đến dấu cộng trong thanh bên và tạo hai chủ đề mẫu của riêng chúng tôi. Tôi sẽ làm một cho Chủ tịch hiện tại và một cho Phó Chủ tịch hiện tại.

    Tạo Tiddler trong TiddlyWiki và ánh xạ cấu trúc trường của nó với các đầu vào JSON trong tương lai. Tạo Tiddler trong TiddlyWiki và ánh xạ cấu trúc trường của nó thành đầu vào JSON trong tương lai.

    Lưu ý cách tôi thêm hai trường ngoài Tiêu đề :

    • từ “ Chủ đề ” trong trường thẻ và
    • liên kết href tới / joebiden trong trường mới mà tôi đã thêm được gọi là “ topic_link .”

    Đảm bảo rằng bạn luôn nhấp vào dấu kiểm ở trên cùng bên phải để lưu từng Tiddler khi bạn chỉnh sửa xong.

    Bây giờ, chúng tôi đã tải hai chủ đề làm ví dụ để kiểm tra công việc của mình, hãy tạo tệp HTML cục bộ một lần nữa và xem liệu bộ lọc danh sách của chúng tôi có thực hiện thủ thuật hay không. HTML cuối cùng của chúng ta trong TopicPage Tiddler sẽ trông giống như bên dưới.

    Lưu ý hai chỉnh sửa nhỏ:

    • Tôi đã thay đổi tiêu đề “Danh bạ của tôi” từ mẫu w3schools thành “Chủ đề”,
    • Tôi đã thêm sáu (6) dấu gạch ngược bổ sung vào tiện ích danh sách, để thoát tất cả mã html bên trong mẫu ria mép. Hãy nhớ rằng: mọi thứ không phải là biến JSON của bạn phải được đặt trong dấu gạch ngược.
      `
    
    & lt;! DOCTYPE html & gt;
    & lt; html & gt;
    & lt; đầu & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt;
    & lt; phong cách & gt;
    * {
      box-sizing: border-box;
    }
    
    #myInput {
      / * background-image: url ('/ css / searchicon.png'); * /
      background-position: 10px 12px;
      background-repeat: không lặp lại;
      chiều rộng: 100%;
      font-size: 16px;
      đệm: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    
    #myUL {
      list-style-type: none;
      đệm: 0;
      lề: 0;
    }
    
    #myUL li a {
      border: 1px solid #ddd;
      margin-top: -1px; / * Ngăn hai đường viền * /
      màu nền: # f6f6f6;
      đệm: 12px;
      văn bản-trang trí: không có;
      font-size: 18px;
      màu đen;
      hiển thị: khối
    }
    
    #myUL li a: hover: not (.header) {
      màu nền: #eee;
    }
    & lt; / style & gt;
    & lt; / head & gt;
    & lt; body & gt;
    
    & lt; h2 & gt; Chủ đề & lt; / h2 & gt;
    
    & lt; input type = "text" id = "myInput" onkeyup = "myFunction ()" placeholder = "Tìm kiếm tên .." title = "Nhập tên" & gt;
    
    & lt; ul id = "myUL" & gt;
    `
    
    & lt; $ list filter = "[tag [Chủ đề]]" & gt;
    `& lt; li & gt; & lt; a href =` {{!! topic_link}} `& gt;` {{!! title}} `& lt; / a & gt; & lt; / li & gt; '
    & lt; / $ list & gt;
    
    
    `
    & lt; / ul & gt;
    
    & lt; script & gt;
    function myFunction () {
        var đầu vào, bộ lọc, ul, li, a, i, txtValue;
        input = document.getElementById ("myInput");
        filter = input.value.toUpperCase ();
        ul = document.getElementById ("myUL");
        li = ul.getElementsByTagName ("li");
        for (i = 0; i & lt; li.length; i ++) {
            a = li [i] .getElementsByTagName ("a") [0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase (). indexOf (filter) & gt; -1) {
                li [i] .style.display = "";
            } khác {
                li [i] .style.display = "none";
            }
        }
    }
    & lt; / script & gt;
    
    & lt; / body & gt;
    & lt; / html & gt;
    ` 

    Chúng tôi có thể xác minh trước rằng chúng tôi đang đi đúng hướng chỉ bằng cách lưu TopicPage Tiddler của chúng tôi trong trình duyệt và nhận thấy cách TiddlyWiki thoát tất cả HTML tĩnh của chúng tôi bằng phông chữ màu đỏ (đó là những thứ được bao gồm trong backticks) và hiển thị danh sách Chủ đề {{fields}} của chúng tôi với văn bản thuần túy như dự định.

    Tạo HTML tĩnh với các biến WikiText. Tạo HTML tĩnh với các biến WikiText.

    Nhưng để thực sự chắc chắn rằng chúng tôi vẫn đang đi đúng hướng, hãy tạo lại cục bộ tệp TopicPage.html và kiểm tra kỹ. Quay lại nhà ga:

      tiddlywiki TopicBrowser --render [[TopicPage]] [is [tiddler] addsuffix [.html]] "text / pure"  

    Bây giờ bạn đã ghi đè TopicPage.html mà bạn đã tạo trước đó. Nếu mọi việc suôn sẻ, Calvin và Billy Bob được mã hóa cứng đã đi theo con đường của LaserDisc, ủng hộ danh sách các chủ đề do robot ưa thích của chúng tôi tạo ra.

    Đầu ra danh sách HTML tĩnh với mẫu ria mép. Đầu ra danh sách HTML tĩnh sau khi hiển thị {{xoăn }} mẫu ria mép với tiện ích danh sách của TiddlyWiki.

    Tạo hàm Lambda của bạn với TiddlyWiki

    Giờ đây, chúng tôi đã sẵn sàng tạo hàm Lambda để chúng tôi có thể tải nó lên AWS và bắt đầu sử dụng nó trên đám mây.

    Bạn có thể thực hiện tất cả việc này trong dòng lệnh với AWS SDK, nhưng các bước bên dưới cho phép bạn bỏ qua thiết lập cục bộ của SDK và tải Lambda trực tiếp lên Bảng điều khiển AWS trong trình duyệt của bạn.

    Khi bạn tải TiddlyWiki lên AWS dưới dạng một hàm Lambda, tất cả các phần phụ thuộc bạn cần sẽ được đóng gói thành một tệp index.js . Chúng tôi sẽ tạo tệp này trên máy cục bộ của mình bằng TiddlyWiki. Để tải hàm lên AWS, chúng tôi cần nén tệp index.js bằng tệp package-lock.json được lấy từ bản cài đặt mới của chính TiddlyWiki.

    Hãy tạo các tệp index.js và package-lock.json của chúng tôi.

    1. Cài đặt gói nút TiddlyWiki sạch trong một thư mục mới.

    Từ thư mục mẹ TopicWikis của bạn, hãy tạo một thư mục mới để tạo hàm Lambda của chúng tôi.

      mkdir lambda_Wiki  

    Thư mục TopicWikis của chúng tôi cho dự án của chúng tôi ngày hôm nay sẽ trông giống như thế này.

    Cấu trúc thư mục cục bộ để tạo hàm Tiddlywiki Lambda. Cấu trúc thư mục cục bộ để tạo hàm Tiddlywiki Lambda.

    Tiếp theo, chúng tôi muốn cài đặt lại TiddlyWiki trong thư mục này, mặc dù chúng tôi đã cài đặt TiddlyWiki trên toàn cầu trên máy của mình. Chúng tôi thực hiện việc này bằng cách sử dụng cờ tiền tố trong NPM. Nếu bạn giống như tôi và bạn làm lộn xộn các vị trí thư mục, tốt hơn nên bắt đầu trong thư mục chính và nhập toàn bộ đường dẫn của thư mục lambda_Wiki của bạn.

    Cũng xin lưu ý rằng tôi sẽ chỉ định v5.1.23 của TiddlyWiki. Quá trình này đã được thử nghiệm với 5.22 và 5.23, chứ không phải bất kỳ phiên bản nào khác.

      cd  
      npm install --prefix ./your_parent_dirs/TopicWikis/lambda_Wiki tiddlywiki@5.1.23  

    Bây giờ chúng ta có một hộp cát cục bộ cho TiddlyWiki trong thư mục này, hãy tạo hàm Lambda đầu tiên của chúng ta bên trong thư mục lambda_Wiki.

    Điều hướng trở lại thư mục lambda_Wiki.

      cd TopicWikis / lambda_Wiki  

    Tiếp theo, khởi tạo phiên bản mới của TiddlyWiki, nhưng sử dụng phiên bản “aws”, thay vì phiên bản “máy chủ” mà chúng tôi đã sử dụng trong phiên bản Wiki đầu tiên của mình.

      tiddlywiki TopicLambda --init aws  

    Điều này đã tạo ra thư mục TopicLambda, một tệp tiddlywiki.info mới và một thư mục tiddlers bên trong thư mục TopicLambda. Bây giờ chúng tôi đã tạo hai phiên bản TiddlyWiki trên máy của chúng tôi: local_Wiki và lambda_Wiki / TopicLambda. Bây giờ chúng ta sắp hoàn thành!

    Chúng tôi hiện có hai Wiki được khởi tạo trên máy của chúng tôi: local_Wiki và lambda_Wiki / TopicLambda. Giờ đây, chúng tôi có hai Wiki được khởi tạo trên máy của chúng tôi: local_Wiki và lambda_Wiki / TopicLambda.

    2. Dán các Tiddlers của bạn từ local_Wiki sang lambda_Wiki / TopicLambda.

    Bây giờ, chúng tôi đã sẵn sàng xuất ra hàm Lambda của mình để chúng tôi có thể tải nó lên AWS. Chúng tôi chỉ cần đảm bảo rằng hàm Lambda của chúng tôi có mẫu HTML thú vị của chúng tôi trong đó!

    Chúng tôi sẽ tiếp tục và chỉ cần sao chép-dán các tệp Tiddler của chúng tôi từ local_Wiki sang lambda_Wiki của chúng tôi. Chúng tôi thậm chí sẽ ném Joe Biden và Kamala Harris để có biện pháp tốt. Bạn đang ghi đè toàn bộ thư mục tiddlers trong lambda_Wiki / TopicLambda trong bước này.

    3. Tạo hàm Lambda của bạn bằng một lệnh đầu cuối.

    Giờ chúng tôi đã sẵn sàng tạo Lambda của mình!

    Từ thư mục lambda_Wiki:

      tiddlywiki TopicLambda --rendertiddler $: / plugins / tiddlywiki / aws / lambdas / main index.js text / pure
     

    Bây giờ, hãy xem xét lambda_Wiki / TopicLambda / output và tìm tệp index.js. Đó là hàm Lambda của bạn!

    Hàm lambda của bạn, index.js, hiện đã được tạo. Hàm lambda của bạn, index.js, hiện đã được tạo (mà không cần viết bất kỳ javascript nào!).

    4. Zip và tải hàm Lambda của bạn lên AWS.

    Bạn có thể phải nhảy qua một hoặc hai vòng, nhưng bạn vừa tạo một hàm Lambda siêu mạnh mà không cần viết một dòng javascript nào. Tốt trên bạn!

    Bây giờ, tất cả những gì bạn phải làm để phát hành rô bốt HTML của mình vào tự nhiên là tạo tệp lưu trữ zip với tệp index.js của bạn từ bước cuối cùng và package-lock.json tại lambda_Wiki / package-lock.json.

    Zip index.js và package-lock.json từ hai thư mục trở lên. Zip hai tệp này để chuẩn bị tải lên hàm Lambda của bạn.

    Sau đó, đăng nhập vào bảng điều khiển AWS và tạo một hàm Lambda mới trong Node.js (truy cập Lambda và nhấp vào “Tạo hàm”).

    Tạo một hàm Lambda mới từ tệp zip TiddlyWiki index.js. Tạo một hàm Lambda mới từ tệp zip TiddlyWiki index.js tập tin.

    Lưu ý rằng tôi đã đặt tên cho chức năng của mình là tw-topicbrowser và chọn phiên bản Node.js được hỗ trợ mới nhất cho thời gian chạy của mình. Một mẹo ở đây: Lambda của bạn sẽ không hoạt động trừ khi bạn cấp quyền cho hàm ghi vào S3. Không mất nhiều thời gian để thiết lập điều này, hãy xem liên kết này trong tài liệu AWS .

    Sau khi bạn có Vai trò thực thi với các quyền thích hợp, hãy tiếp tục và tải lên tệp zip chứa các tệp index.js và package-lock.json của bạn.

    Tải lên tệp zip Lambda của bạn trực tiếp từ bảng điều khiển Lambda. Tải lên tệp zip Lambda của bạn trực tiếp từ bảng điều khiển Lambda.

    Bây giờ, chúng tôi đã sẵn sàng tạo trang HTML của mình thành S3 bằng cách sử dụng Lambda của chúng tôi!

    Tạo trang HTML tĩnh bằng Lambda (console)

    Giờ đây, bạn đã có một chức năng trên đám mây, bạn có thể gửi JSON vào AWS từ mọi nơi và tạo các trang HTML trong S3 từ Lambda.

    Để đảm bảo chúng tôi cấu trúc JSON đến một cách chính xác, hãy thực hành bằng cách tạo một trang ngay từ bảng điều khiển Lambda bằng cách sử dụng tính năng Kiểm tra.

    1. Định dạng JSON của bạn.

    Trước tiên, hãy chuẩn bị JSON mà chúng ta muốn chuyển vào.

    Từ kho lưu trữ Github cho TiddlyWiki, chúng ta có thể thấy cách cấu trúc đúng lệnh của chúng tôi trong AWS .

    Định dạng như sau:

      {
    "lệnh": [
    "--aws", "s3-rendertiddler", "HelloThere", "eu-west-2", "my-bucket-name", "render.html"
    ],
    "tiddlers": [
    {
    "title": "HelloThere",
    "text": "Xin chào từ {{Platform}}."
    },
    {
    "title": "Nền tảng",
    "text": "TiddlyWiki"
    }
    ]
    }  

    Theo định dạng này, chúng tôi sẽ lưu ý rằng có tham số khác mà chúng tôi có thể thêm vào lệnh s3-rendertiddler. Khi tạo HTML tĩnh trong S3, tôi thấy hữu ích khi sử dụng kiểu hiển thị là “văn bản / đồng bằng” và sau đó chỉ định kiểu MIME của tệp đã lưu là “văn bản / html”. Tôi đã để chỗ dành sẵn trong lệnh của mình cho hai cờ lệnh khác mà chúng tôi sẽ không sử dụng hôm nay.

    Cuối cùng, bạn sẽ lưu ý rằng tôi chuyển thêm hai Trình thu thập chủ đề bổ sung cho trình kích hoạt Lambda này, Arizona và Belarus.

      {
      "lệnh": [
        "--aws",
        "s3-rendertiddler",
        "Trang chủ đề",
        "us-East-1",
        "Purplenewstestbucket",
        "TopicPage.html",
        "văn bản / thuần túy",
        "",
        "",
        "text / html"
      ],
      "tiddlers": [
        {
          "title": "Arizona",
          "topic_link": "/ a Arizona",
          "tags": "Chủ đề"
        },
      {
          "title": "Belarus",
          "topic_link": "/ belarus",
          "tags": "Chủ đề"
        }
      ]
    }  

    Hãy tiếp tục và dán JSON này vào cấu hình Thử nghiệm mới trong bảng điều khiển Lambda.

    Nhấp vào mũi tên bên cạnh nút Kiểm tra và chọn “Định cấu hình sự kiện kiểm tra”.

    Tạo sự kiện kiểm tra Lambda.

    Và dán toàn bộ sự kiện thử nghiệm JSON từ bên trên.

    2. Chạy Lambda của bạn và tìm tệp HTML của bạn trong S3.

    Trước khi điều hành Lambda, tôi sẽ hoàn thành hai thủ thuật nhỏ trong giao dịch TiddlyWiki-on-Lambda:

    A) Tăng cường Lambda của tôi bằng cách tăng bộ nhớ được cấp phát và thời gian thực thi tối đa. 512MB và 30 giây thường phù hợp với Wiki nhỏ hơn như thế này.

    B) Thêm biến môi trường để giúp hàm xác định trọng tải của chúng tôi. Để giải quyết một vấn đề nhỏ trong cách tải trọng đi qua quy trình làm việc của chúng tôi và vào TiddlyWiki, ở đây tôi chỉ đơn giản nói với TiddlyWiki để tìm kiếm lệnh của nó trong phần event.body của trọng tải mà cuối cùng sẽ đạt đến hàm.

    VUI LÒNG GHI DANH….

    Điều hướng trở lại tab “Mã” trên Lambda của bạn, chọn sự kiện kiểm tra bạn vừa tạo và nhấp vào Kiểm tra!

    Nếu bạn đã theo dõi, trước hết, xin chúc mừng vì bạn đã dành được sự chú ý tuyệt vời. Ngoài ra, trang HTML thú vị độc ác của bạn đã được chuyển vào S3 và sẵn sàng để xem.


    Để xem tệp của bạn, đỉnh cao của công việc mã thấp của bạn, bạn chỉ cần tải xuống TopicPage.html để kiểm tra. Đẹp!

    TopicPage.html được tạo trong S3 với Lambda.TopicPage.html được tạo trong S3 với Lambda.

    Bạn cũng có thể xem phiên bản trực tiếp của mẫu này đang được sử dụng trên trang chủ đề Tin tức màu tím .

    Nếu bạn gặp lỗi, đừng bỏ cuộc ngay bây giờ! Lỗi phổ biến nhất sẽ là cấu hình sai quyền. Bạn sẽ gặp lỗi không thể ghi vào nhóm. Kiểm tra kỹ xem “Vai trò thực thi” trong tab “Quyền” có quyền ghi vào nhóm này hay không. Nếu không, hãy nhấn tôi trên twitter hoặc thứ gì đó, bạn đã tiến xa đến mức này!

    Tạo HTML tĩnh với JSON, API Gateway và Lambda

    Bây giờ chúng tôi biết chức năng của mình hoạt động, chúng tôi sẽ muốn bắt đầu nhận được những lợi ích thực sự của Lambda. Bằng cách thiết lập Trigger cho chức năng của chúng tôi trong API Gateway, chúng tôi có thể tạo các trang html tĩnh trong S3 từ JSON theo ý muốn.

    Trong hướng dẫn tiếp theo của tôi , tôi sẽ xem xét một số cách thú vị mà chúng tôi có thể tạo và gửi JSON vào hàm Lambda mà chúng tôi đã tạo hôm nay. Ví dụ: bạn có thể sử dụng các công cụ như Google Trang tính để tạo HTML tĩnh trong Lambda. Bạn thậm chí có thể thiết lập một TiddlyWiki khác trên máy của mình và định cấu hình nó để đăng các chủ đề lên Lambda của bạn – nghĩa là bạn sẽ có trong tay một CMS phụ trợ hoàn toàn có thể tùy chỉnh!

    Bằng cách thiết lập một điểm cuối trong API Gateway, tôi sẽ sử dụng Mẫu ánh xạ cơ thể để nhập JSON từ bất kỳ nguồn nào và chuyển đổi nó thành các lệnh TiddlyWiki và trình thu thập thông tin.

    Đây là một cái nhìn trước về mẫu bản đồ cơ thể. Mã thấp có thể không có nghĩa là không có mã, nhưng nó dễ dàng hơn vẻ ngoài!

      ## Đặt biến inputRoot thành tài liệu JSON gốc
    #set ($ inputRoot = $ input.path ('$'))
    {
      "lệnh": [
        "--aws",
        "s3-rendertiddler",
        "Trang chủ đề",
        "us-East-1",
        "Purplenewstestbucket",
        "TopicPage.html",
        "văn bản / thuần túy",
        "",
        "",
        "text / html"
      ],
      "tiddlers": [
        {
          "title": "$ inputRoot.title",
          "topic_link": "$ inputRoot.topic_link"
    
        }
      ]
    }
    
     

    Nếu bạn thích bài đăng này, hãy theo dõi tôi trên Twitter @ philwonski để bạn biết khi nào có bài đăng tiếp theo. Ngoài ra còn có rất nhiều nội dung tuyệt vời (và ít bí truyền hơn) được nhóm của chúng tôi sản xuất thường xuyên – hãy nhớ tìm chúng tôi trên LinkedIn và đăng ký đến bản tin của chúng tôi ở chân trang này.


Xem thêm những thông tin liên quan đến chủ đề xây dựng html từ json

JSON to HTML Table

alt

  • Tác giả: Dennis Ivy
  • Ngày đăng: 2019-09-24
  • Đánh giá: 4 ⭐ ( 3073 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Turn any JSON array into an HTML table in minutes.

    Follow me on Twitter: https://twitter.com/dennisivy11
    LinkedIn: https://www.linkedin.com/in/dennis-ivanov/

Xây dựng ứng dụng web với NodeJS + ExpressJS

  • Tác giả: vntalking.com
  • Đánh giá: 3 ⭐ ( 1236 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay mình sẽ hướng dẫn các bạn tạo một ứng dụng web đơn giản với Nodejs + ExpressJS. Qua bài viết này bạn sẽ biết sử dụng router, template engine…

Các phương pháp lấy nội dung web HTML bằng PHP

  • Tác giả: www.dammio.com
  • Đánh giá: 3 ⭐ ( 7835 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Công cụ, tập lệnh và plugin để xây dựng HTML Table

  • Tác giả: hktsoft.com
  • Đánh giá: 5 ⭐ ( 1823 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Chuyển đổi HTML sang JSON trực tuyến

  • Tác giả: bfotool.com
  • Đánh giá: 4 ⭐ ( 8560 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Công cụ trực tuyến miễn phí này cho phép bạn chuyển đổi tệp HTML thành tệp JSON. Không cần tải xuống hoặc cài đặt bất kỳ phần mềm nào. Nhấp để chuyển đổi tệp của bạn ngay bây giờ.

35 công cụ, tập lệnh và plugin để xây dựng HTML Table

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 5910 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có nhiều cách để hình dung dữ liệu, tức là bạn có thể thiết kế một infographics tuyệt đẹp hoặc tạo biểu đồ tương tác. Tất cả phụ thuộc vào dữ liệu của bạn và cách bạn muốn trình bày chúng.

JSON

  • Tác giả: www.json.org
  • Đánh giá: 4 ⭐ ( 7983 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thêm Biểu tượng truyền thông xã hội trong Html - tạo các nút mạng xã hội html