事情已經進展到要回給瀏覽器看得懂的東西了~
這邊就是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更新位置