iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0
Modern Web

使用 Clojure 當個 Full-stack 開發者系列 第 9

[Day 9] 堆積木之該要長骨頭了

  • 分享至 

  • xImage
  •  

事情已經進展到要回給瀏覽器看得懂的東西了~

這邊就是html,其實現在的html真的提供以前我們很多需要手刻的元件,標準的html大概能解決7-8成的需求

解決不了的需求就換個做法,有可以解決8成

再解決不了就只好解決提出問題的人了(誤

這邊是選用hiccup

這個是我覺得很有感覺的一章

記得第二天提到的一致的經驗,這邊的html template很有感的提供了這件事

讓我們繼續看下去

可以切至day9 git switch day9

這邊開始分家了,把今天的放到其他檔案(namespace)

然後我們只要回傳他的route,一個list,這樣整個網站的router就可以找到他啦

這邊可以寫function也可以寫variable,因為有跨namespace,所以其實寫function會增加一些彈性

進去hello之後,我們路徑變成 /hello/you,就是昨天有提到的路徑、子路徑的寫法

想確定的可以去comment裡面直接跑起來看看

再來回到今天的主角 hiccup

(str (h/raw "<!DOCTYPE html>")
        (h/html [:html {:lang "en"}
                 [:head
                  [:meta {:charset "UTF-8"}]
                  [:meta {:name "viewport" :content "width=device-width, initial-scale=1.0"}]
                  [:meta {:http-equiv "X-UA-Compatible" :content "ie=edge"}]
                  [:title "HTML 5 Boilerplate"]
                  [:link {:rel "stylesheet" :href "style.css"}]]
                 [:body [:script {:src "index.js"}]]]))

有沒有覺得要打上面的很累

不用!!!

https://ithelp.ithome.com.tw/upload/images/20230912/20103600i7AkRD1D1g.jpg

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>

再這邊有沒有覺得滿像的,我們都只有一樣的架構

[:tag-name {:xxx yyy} [:div "text"] & []...]


↑ ↑ ↑
tag名字
tag的屬性(optional)
tag的內容

未來要寫if/else,placeholder/replace 也不用多學語法,就像route一樣,記得他該回什麼就好,其他就照標準結構

不用像其他樣板語言要記她們特殊的語法 @... @{...} {{}} @#() ...

這邊留一個洞,console會報錯,很簡單,因為他沒有route到,未來有要改這個在修吧

其實我也滿少碰到要額外再加這些的XDD

P.S.
這邊也可以用 go to definition,但如果你沒有跳到正確的位置,記得整個檔案重新evaluate一下,讓LSP更新位置


上一篇
[Day 8] 堆積木之你要去哪裡
下一篇
[Day 10] 堆積木之該要要漂亮一點了
系列文
使用 Clojure 當個 Full-stack 開發者30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言