如何使用 Spock 和 Lucid 提供静态文件?
How to serve static files using Spock and Lucid?
开始使用 Haskell、Spock 和 Lucid 进行 Web 开发,但我不知道如何提供我的静态文件。在 Main.hs
的目录中,我有 /static/css/main.css
,其中仅包含一个背景颜色,以查看是否确实应用了 css。所以我的目录树看起来像
app
├── Main.hs
└── static
└── css
└── main.css
但是,使用以下配置,找不到 main.css
文件(使用 Firefox 检查时它包含 404)。除此之外,网站显示正常。
我试图模仿 funblog example when it comes to serving these files (with Wai), altered for Lucid instead of Blaze. In particular the middleware $ staticPolicy (addBase "static")
from Web/Blog.hs
and the line where we link the css from Web/Views/Site.hs
。
module Main where
import Network.Wai.Middleware.Static
import Lucid
import Web.Spock
import Web.Spock.Config
import Web.Spock.Lucid (lucid)
type Server a = SpockM () () () a
main :: IO ()
main = do
cfg <- defaultSpockCfg () PCNoDatabase ()
runSpock 8080 (spock cfg app)
app :: Server ()
app = do
middleware $ staticPolicy (addBase "static")
get root $ do
lucid $ do
head_ $ link_ [ rel_ "stylesheet"
, type_ "text/css"
, href_ "/css/main.css"
]
body_ $ h1_ "Hello."
Edit/Addition 将 Lucid 翻译成 Blaze 给出了相同的结果(翻译如下),所以我一定在其他地方遗漏了一些东西。
-- Additional imports
import Text.Blaze.XHtml5 ((!))
import qualified Text.Blaze.XHtml5 as H
import qualified Text.Blaze.XHtml5.Attributes as A
import Control.Monad.Trans (MonadIO)
import Text.Blaze.Html.Renderer.Utf8 (renderHtml)
-- The main function did not change.
blaze :: MonadIO m => H.Html -> ActionCtxT ctx m a
blaze = lazyBytes . renderHtml
app :: Server ()
app = do
middleware $ staticPolicy (addBase "static")
get root $
blaze $ do
H.head $
H.link ! A.href "/css/main.css" ! A.rel "stylesheet"
H.body $
H.h1 "Hello Blaze."
确保 static
文件夹位于 项目 的根目录中,而不是主文件的根目录中,即 static
文件夹应该住在你的 app
and/or src
文件夹旁边(而不是里面)。
在这种情况下会是
├── app
│ └── Main.hs
├── static
│ ├── css
│ │ └── main.css
开始使用 Haskell、Spock 和 Lucid 进行 Web 开发,但我不知道如何提供我的静态文件。在 Main.hs
的目录中,我有 /static/css/main.css
,其中仅包含一个背景颜色,以查看是否确实应用了 css。所以我的目录树看起来像
app
├── Main.hs
└── static
└── css
└── main.css
但是,使用以下配置,找不到 main.css
文件(使用 Firefox 检查时它包含 404)。除此之外,网站显示正常。
我试图模仿 funblog example when it comes to serving these files (with Wai), altered for Lucid instead of Blaze. In particular the middleware $ staticPolicy (addBase "static")
from Web/Blog.hs
and the line where we link the css from Web/Views/Site.hs
。
module Main where
import Network.Wai.Middleware.Static
import Lucid
import Web.Spock
import Web.Spock.Config
import Web.Spock.Lucid (lucid)
type Server a = SpockM () () () a
main :: IO ()
main = do
cfg <- defaultSpockCfg () PCNoDatabase ()
runSpock 8080 (spock cfg app)
app :: Server ()
app = do
middleware $ staticPolicy (addBase "static")
get root $ do
lucid $ do
head_ $ link_ [ rel_ "stylesheet"
, type_ "text/css"
, href_ "/css/main.css"
]
body_ $ h1_ "Hello."
Edit/Addition 将 Lucid 翻译成 Blaze 给出了相同的结果(翻译如下),所以我一定在其他地方遗漏了一些东西。
-- Additional imports
import Text.Blaze.XHtml5 ((!))
import qualified Text.Blaze.XHtml5 as H
import qualified Text.Blaze.XHtml5.Attributes as A
import Control.Monad.Trans (MonadIO)
import Text.Blaze.Html.Renderer.Utf8 (renderHtml)
-- The main function did not change.
blaze :: MonadIO m => H.Html -> ActionCtxT ctx m a
blaze = lazyBytes . renderHtml
app :: Server ()
app = do
middleware $ staticPolicy (addBase "static")
get root $
blaze $ do
H.head $
H.link ! A.href "/css/main.css" ! A.rel "stylesheet"
H.body $
H.h1 "Hello Blaze."
确保 static
文件夹位于 项目 的根目录中,而不是主文件的根目录中,即 static
文件夹应该住在你的 app
and/or src
文件夹旁边(而不是里面)。
在这种情况下会是
├── app
│ └── Main.hs
├── static
│ ├── css
│ │ └── main.css