02 使用 Selmer 模板和靜態(tài)資源庫(kù)

02 使用 Selmer 模板和靜態(tài)資源庫(kù).png

配置 project.clj

添加本章需要的各種依賴

文件:project.clj

;; Selmer 模板庫(kù)
[selmer "1.12.0"]

;; ring 前端庫(kù)中間件
[ring-webjars "0.2.0"]

;; JQuery 依賴瑞侮,Bootstrap 需要
[org.webjars/jquery "3.3.1-1"]

;; Bootstrap 
[org.webjars/bootstrap "4.0.0-2"]


;; Popper 
[org.webjars/popper.js "1.14.1"]

;; 字體庫(kù)
[org.webjars/font-awesome "5.5.0"]

配置 中間件

引入并啟用前端資源庫(kù)中間件 webjars

文件:src/soul_talk/core.clj

(ns soul-talk.core
  (:require ......
    ;; 前端資源庫(kù)中間件
    [ring.middleware.webjars :refer [wrap-webjars]]))


(def app
  (-> app-routes  
      (wrap-nocache)
      (wrap-reload)
      
      ;; 添加這里,啟用前端資源庫(kù)中間件
      (wrap-webjars) 

      (wrap-defaults site-defaults)))

添加靜態(tài)資源

創(chuàng)建 css吮旅、js 文件夾

  • resources 文件夾下弦疮,創(chuàng)建 public 文件夾
  • 再在 public 文件夾下 創(chuàng)建 cssjs 兩個(gè)文件夾

創(chuàng)建自定義樣式表

文件:resources/public/css/site.css

/* stylelint-disable selector-list-comma-newline-after */

.blog-header {
  line-height: 1;
  border-bottom: 1px solid #e5e5e5;
}

.blog-header-logo {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
}

.blog-header-logo:hover {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.display-4 {
  font-size: 2.5rem;
}
@media (min-width: 768px) {
  .display-4 {
    font-size: 3rem;
  }
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
}

.card-img-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.flex-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
  .h-md-250 { height: 250px; }
}

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

/*
 * Blog name and description
 */
.blog-title {
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 400;
}
.blog-description {
  font-size: 1.1rem;
  color: #999;
}

@media (min-width: 40em) {
  .blog-title {
    font-size: 3.5rem;
  }
}

/* Pagination */
.blog-pagination {
  margin-bottom: 4rem;
}
.blog-pagination > .btn {
  border-radius: 2rem;
}

/*
 * Blog posts
 */
.blog-post {
  margin-bottom: 4rem;
}
.blog-post-title {
  margin-bottom: .25rem;
  font-size: 2.5rem;
}
.blog-post-meta {
  margin-bottom: 1.25rem;
  color: #999;
}

/*
 * Footer
 */
.blog-footer {
  padding: 2.5rem 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

創(chuàng)建 404 模板頁(yè)面

使用騰訊公益 404 頁(yè)面挂脑,創(chuàng)建 resources/error.html 代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404</title>
</head>
<body>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>
</body>
</html>

修改 index.html 模板

主要有三處修改:

  • 使用 Selmer 模板語(yǔ)法军浆,并解析 Handler 傳來(lái)的參數(shù)
  • 使用前端靜態(tài)資源庫(kù)
  • 使用自定義樣式表
  • 完成一個(gè)博客首頁(yè)的結(jié)構(gòu)

文件:resources/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>index</title>

    <!-- 引入樣式表 -->
    {% style "/assets/bootstrap/css/bootstrap.min.css" %}
    {% style "/assets/font-awesome/css/all.css" %}
    {% style "/css/site.css" %}
</head>
<body>
<div class="container">
    <header class="blog-header py-3">
        <div class="row flex-nowrap justify-content-between align-items-center">
            <div class="col-4 pt-1">
                <a class="text-muted" href="#">訂閱</a>
            </div>
            <div class="col-4 text-center">
                <a class="blog-header-logo text-dark" href="#">Soul Talk</a>
            </div>
            <div class="col-4 d-flex justify-content-end align-items-center">
                <a class="btn btn-sm btn-outline-secondary" href="#">登錄</a>
            </div>
        </div>
    </header>

    <div class="nav-scroller py-1 mb-2">
        <nav class="nav d-flex justify-content-between">
            <a class="p-2 text-muted" href="#">World</a>
            <a class="p-2 text-muted" href="#">U.S.</a>
            <a class="p-2 text-muted" href="#">Technology</a>
            <a class="p-2 text-muted" href="#">Design</a>
            <a class="p-2 text-muted" href="#">Culture</a>
            <a class="p-2 text-muted" href="#">Business</a>
            <a class="p-2 text-muted" href="#">Politics</a>
            <a class="p-2 text-muted" href="#">Opinion</a>
            <a class="p-2 text-muted" href="#">Science</a>
            <a class="p-2 text-muted" href="#">Health</a>
            <a class="p-2 text-muted" href="#">Style</a>
            <a class="p-2 text-muted" href="#">Travel</a>
        </nav>
    </div>

    <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
        <div class="col-md-6 px-0">
            <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
            <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
        </div>
    </div>
</div>

<main role="main" class="container">
    <div class="row">
        <div class="col-md-8 blog-main">
            <h3 class="pb-3 mb-4 font-italic border-bottom">
                From the Firehose
            </h3>

            <div class="blog-post">
                <h2 class="blog-post-title">Sample blog post</h2>
                <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
                <ol>
                    <li>Vestibulum id ligula porta felis euismod semper.</li>
                    <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ol>
                <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
            </div><!-- /.blog-post -->

            <div class="blog-post">
                <h2 class="blog-post-title">Another blog post</h2>
                <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>

                <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, </p>

            </div><!-- /.blog-post -->

            <div class="blog-post">
                <h2 class="blog-post-title">New feature</h2>
                <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>

                <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
            </div><!-- /.blog-post -->

            <nav class="blog-pagination">
                <a class="btn btn-outline-primary" href="#">Older</a>
                <a class="btn btn-outline-secondary disabled" href="#">Newer</a>
            </nav>

        </div><!-- /.blog-main -->

        <aside class="col-md-4 blog-sidebar">
            <div class="p-3 mb-3 bg-light rounded">
                <h4 class="font-italic">About</h4>
                <p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. </p>
            </div>

            <div class="p-3">
                <h4 class="font-italic">Archives</h4>
                <ol class="list-unstyled mb-0">
                    <li><a href="#">March 2014</a></li>
                    <li><a href="#">February 2014</a></li>
                    <li><a href="#">January 2014</a></li>
                    <li><a href="#">December 2013</a></li>
                    <li><a href="#">November 2013</a></li>
                    <li><a href="#">October 2013</a></li>
                    <li><a href="#">September 2013</a></li>
                    <li><a href="#">August 2013</a></li>
                    <li><a href="#">July 2013</a></li>
                    <li><a href="#">June 2013</a></li>
                    <li><a href="#">May 2013</a></li>
                    <li><a href="#">April 2013</a></li>
                </ol>
            </div>

            <div class="p-3">
                <h4 class="font-italic">Elsewhere</h4>
                <ol class="list-unstyled">
                    <li><a href="#">GitHub</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                </ol>
            </div>
        </aside><!-- /.blog-sidebar -->

    </div><!-- /.row -->

</main><!-- /.container -->

<footer class="blog-footer">
    <p>Blog template built for <a >Bootstrap</a> by <a >@mdo</a>.</p>
    <p>
        <a href="#">Back to top</a>
    </p>
</footer>

<!-- 引入腳本庫(kù) -->
{% script "/assets/jquery/jquery.min.js" %}
{% script "/assets/font-awesome/js/all.js" %}
{% script "/assets/bootstrap/js/bootstrap.min.js" %}

</body>
</html>

修改自定義 Handler

修改首頁(yè)請(qǐng)求 Handler

使用 Selmer 庫(kù)中的 render-file 函數(shù)渲染模板夫植,并向模板傳遞參數(shù)泊业,但是本章中頁(yè)面并沒(méi)有解析這個(gè)參數(shù)

文件:src/soul_talk/core.clj

(ns soul-talk.core
  (:require ......
    ;; Selmer 模板庫(kù)
    [selmer.parser :as parser]))


;; 渲染 index.html 頁(yè)面且叁,并傳送數(shù)據(jù)到 :ip 參數(shù)都哭,本章并沒(méi)有解析這個(gè)參數(shù)
(defn home-handle [request]
  (parser/render-file "index.html"  {:ip (:remote-addr request)}))

修改 404 請(qǐng)求 Handler

文件:src/soul_talk/core.clj

;; 渲染 error.html 404 頁(yè)面
(defn error-page [error-details]
  {:status (:status error-details)
   :headers {"Content-Type" "text/html; charset=utf-8"}
   :body (parser/render-file "error.html" error-details)})

修改路由

添加 404 請(qǐng)求的路由規(guī)則,直接接受一個(gè)函數(shù)

(def app-routes
  (routes
    (GET "/" request (home-handle request))
    (GET "/about" [] (str "這是關(guān)于我的頁(yè)面"))
    
    ;; 修改了這里逞带。注意:路由可以接受一個(gè)函數(shù)
    (route/not-found error-page)))  
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末欺矫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子展氓,更是在濱河造成了極大的恐慌穆趴,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件遇汞,死亡現(xiàn)場(chǎng)離奇詭異未妹,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)空入,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門络它,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人歪赢,你說(shuō)我怎么就攤上這事化戳。” “怎么了轨淌?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵迂烁,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我递鹉,道長(zhǎng)盟步,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任躏结,我火速辦了婚禮却盘,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘媳拴。我一直安慰自己黄橘,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布屈溉。 她就那樣靜靜地躺著塞关,像睡著了一般。 火紅的嫁衣襯著肌膚如雪子巾。 梳的紋絲不亂的頭發(fā)上帆赢,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音线梗,去河邊找鬼椰于。 笑死,一個(gè)胖子當(dāng)著我的面吹牛仪搔,可吹牛的內(nèi)容都是我干的瘾婿。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼烤咧,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼偏陪!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起煮嫌,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤竹挡,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后立膛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體揪罕,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年宝泵,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了好啰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡儿奶,死狀恐怖框往,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情闯捎,我是刑警寧澤椰弊,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布许溅,位于F島的核電站,受9級(jí)特大地震影響秉版,放射性物質(zhì)發(fā)生泄漏贤重。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一清焕、第九天 我趴在偏房一處隱蔽的房頂上張望并蝗。 院中可真熱鬧,春花似錦秸妥、人聲如沸滚停。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)键畴。三九已至,卻和暖如春突雪,著一層夾襖步出監(jiān)牢的瞬間镰吵,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工挂签, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留疤祭,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓饵婆,卻偏偏與公主長(zhǎng)得像勺馆,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子侨核,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容