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

2023 iThome 鐵人賽

DAY 9

Modern Web

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

15th鐵人賽

talenttb

2023-09-12 20:48:01

350 瀏覽

分享至

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

這邊就是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"}]]]))

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

不用！！！

<!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更新位置