如何使用Spock和Lucid提供静态文件？

Question

开始使用Haskell、Spock和Lucid进行web开发时，我不知道如何处理我的静态文件。在Main.hs的目录中，我有一个/static/css/main.css，它只包含一个背景颜色，以查看是否确实应用了css。所以我的目录树看起来

app
├── Main.hs
└── static
    └── css
        └── main.css

但是，使用下面的配置，无法找到main.css文件(在使用火狐检查它时，它包含一个404 )。除此之外，这个网站显示得很好。

当涉及到服务这些文件(使用Wai)时，我尝试模仿风趣博客示例，修改为Lucid而不是Blaze。特别是来自Web/Blog.hs的css和从Web/Blog.hs链接css的行。

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翻译清晰到火焰给出了同样的结果(翻译如下)，所以我一定是在其他地方遗漏了什么。

​

-- 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."

Answer 1

确保static文件夹位于项目的根目录中，而不是主文件的根目录中，即static文件夹应该位于(而不是在) app和/或src文件夹旁边。

在这种情况下

├── app
│   └── Main.hs
├── static
│   ├── css
│   │   └── main.css