02 使用 Selmer 模板和静态资源库

02 使用 Selmer 模板和静态资源库.png

配置 project.clj

添加本章需要的各种依赖

文件：project.clj

;; Selmer 模板库
[selmer "1.12.0"]

;; ring 前端库中间件
[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"]

;; 字体库
[org.webjars/font-awesome "5.5.0"]

配置 中间件

引入并启用前端资源库中间件 webjars

文件：src/soul_talk/core.clj

(ns soul-talk.core
  (:require ......
    ;; 前端资源库中间件
    [ring.middleware.webjars :refer [wrap-webjars]]))


(def app
  (-> app-routes  
      (wrap-nocache)
      (wrap-reload)
      
      ;; 添加这里，启用前端资源库中间件
      (wrap-webjars) 

      (wrap-defaults site-defaults)))

添加静态资源

创建 css、js 文件夹

• 在 resources 文件夹下，创建 public 文件夹
• 再在 public 文件夹下 创建 css 和 js 两个文件夹

创建自定义样式表

文件：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;
}

创建 404 模板页面

使用腾讯公益 404 页面，创建 resources/error.html 代码如下

修改 index.html 模板

主要有三处修改：

• 使用 Selmer 模板语法，并解析 Handler 传来的参数
• 使用前端静态资源库
• 使用自定义样式表
• 完成一个博客首页的结构

文件：resources/index.html

    
    
    
    

    
    {% style "/assets/bootstrap/css/bootstrap.min.css" %}
    {% style "/assets/font-awesome/css/all.css" %}
    {% style "/css/site.css" %}



    

        

            

                订阅
            
            

                Soul Talk
            
            

                登录
            
        
    

    

        

            World
            U.S.
            Technology
            Design
            Culture
            Business
            Politics
            Opinion
            Science
            Health
            Style
            Travel
        
    

    

        

            
Title of a longer featured blog post
            
Continue reading...
        
    



    

        

            

                From the Firehose
            

            

                
Sample blog post
                
January 1, 2014 by Mark
                

                    
Vestibulum id ligula porta felis euismod semper.
                    
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                    
Maecenas sed diam eget risus varius blandit sit amet non magna.
                
                
Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
            


            

                
Another blog post
                
December 23, 2013 by Jacob

                
Cum sociis natoque penatibus et magnis dis parturient montes, 

            


            

                
New feature
                
December 14, 2013 by Chris

                
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
            


            

                Older
                Newer
            

        


        

            

                
About
                
Etiam porta sem malesuada magna mollis euismod. 
            

            

                
Archives
                

                    
March 2014
                    
February 2014
                    
January 2014
                    
December 2013
                    
November 2013
                    
October 2013
                    
September 2013
                    
August 2013
                    
July 2013
                    
June 2013
                    
May 2013
                    
April 2013
                
            

            

                
Elsewhere
                

                    
GitHub
                    
Twitter
                    
Facebook
                
            
        


    





    
Blog template built for Bootstrap by @mdo.
    

        Back to top
    



{% script "/assets/jquery/jquery.min.js" %}
{% script "/assets/font-awesome/js/all.js" %}
{% script "/assets/bootstrap/js/bootstrap.min.js" %}

修改自定义 Handler

修改首页请求 Handler

使用 Selmer 库中的 render-file 函数渲染模板，并向模板传递参数，但是本章中页面并没有解析这个参数

文件：src/soul_talk/core.clj

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


;; 渲染 index.html 页面，并传送数据到 :ip 参数，本章并没有解析这个参数
(defn home-handle [request]
  (parser/render-file "index.html"  {:ip (:remote-addr request)}))

修改 404 请求 Handler

文件：src/soul_talk/core.clj

;; 渲染 error.html 404 页面
(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 请求的路由规则，直接接受一个函数

(def app-routes
  (routes
    (GET "/" request (home-handle request))
    (GET "/about" [] (str "这是关于我的页面"))
    
    ;; 修改了这里。注意：路由可以接受一个函数
    (route/not-found error-page)))