使用 Clojure 建立个人网站（二）

使用模版

Selmer是一个很像 django 中的模版

project.clj 添加依赖

[selmer"1.12.0"]

修改 core.clj 中的 home-routes 函数

[selmer.parser:asparser]

(defnhome-handle[request]

(parser/render-file"index.html"

{:ip(:remote-addrrequest)}))

修改 index.html

index

这是一个主页;

你的IP是 {{ ip }}

你会看到 ip 已经显示在页面中了。 {{ ip }} 可以显示服务器返回中的 map 中的内容。

新建 error.html 页面,我们使用腾讯 404 公益页面

404

修改 core.clj 添加 error-page 函数

(defnerror-page[error-details]

{:status(:statuserror-details)

:headers{"Content-Type""text/html; charset=utf-8"}

:body(parser/render-file"error.html"error-details)})

(defapp-routes

(routes

(GET"/"request(home-handlerequest))

(GET"/about"[](str"这是关于我的页面"))

(route/not-founderror-page)));;这些做修改

设计主页

在 resources 目录下创建 public 目录，在 public 创建 css 和 js 目录，分别放样式文件和 js 文件。

在 css 目录下创建 site.css。

我们使用Bootstrap

我们会使用webjars，这是一个把客户端的包放在 jar 里的项目，而 Clojure 的库里有对应的库

我们在 project.clj 中添加相应的库ring-webjars

[ring-webjars"0.2.0"]

[org.webjars/jquery"3.3.1-1"]

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

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

修改 core.clj 添加 wrap-webjars 中间件

[ring.middleware.webjars:refer[wrap-webjars]];;添加到 require 里

(defapp

(->app-routes

(wrap-nocache)

(wrap-reload)

(wrap-webjars);; 这行添加的

(wrap-defaultssite-defaults)))

在 index.html 页面加入相应的引用，因为使用 selmer 模版，和平常的 html 不一样

index

{% style "/assets/bootstrap/css/bootstrap.min.css" %}

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

{% style "/css/site.css" %}

这是一个主页;

你的IP是 {{ ip }}

{% script "/assets/jquery/jquery.min.js" %}

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

{% script "/assets/bootstrap/js/bootstrap.min.js" %}

我们参考官网上的 blog 例子开始我们的页面

修改 site.css

index.html

index

{% 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 byMark

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 byJacob

Cum sociis natoque penatibus et magnisdis parturient montes,

New feature

December 14, 2013 byChris

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

Older

Newer

About

Etiam portasem malesuada magnamollis 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 forBootstrapby@mdo.

Back to top

{% script "/assets/jquery/jquery.min.js" %}

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

{% script "/assets/bootstrap/js/bootstrap.min.js" %}