Внешняя таблица стилей Yesod с использованием localhost - PullRequest
Новая
       20

Внешняя таблица стилей Yesod с использованием localhost

0 голосов
/ 27 сентября 2019

Я использую веб-приложение Haskell / Yesod на localhost:666.Я использовал addScriptRemote для загрузки JQuery, который отлично работает.Я также хотел бы загрузить внешнюю таблицу стилей и попробовал: <link rel=...> в toWidgetHead, addStylesheetRemote... addStyleSheet с типом безопасного URL.Тем не менее, я не могу загрузить таблицу стилей.Я установил approot на approot = ApprootStatic "http://127.0.0.1", прочитав другой аналогичный вопрос о SO.

{-# LANGUAGE MultiParamTypeClasses #-}
{-# LANGUAGE OverloadedStrings     #-}
{-# LANGUAGE QuasiQuotes           #-}
{-# LANGUAGE TemplateHaskell       #-}
{-# LANGUAGE TypeFamilies          #-}


module Main where
import           Text.Blaze.Html
import qualified Data.Text as T 
import           Yesod
import           Hyper 

data             WebApp = WebApp 
data             MyRoute = Ext1 | Ext2 | Css1
instance         Yesod WebApp where 
  approot = ApprootStatic "http://127.0.0.1:666"

mkYesod "WebApp" [parseRoutes|
  /      HomeR  GET 
  /Page1 Page1R GET
  /Page2 Page2R GET 
  -- /Json1 Json1R GET 
|]
-- getHomeR is a handler-function. Most Yesod code lives in handler-functions
getHomeR :: Handler Html 
getHomeR = defaultLayout [whamlet|placeholder<a href=@{Page1R}>to next #{pageVarPage}!|]
getPage1R :: Handler Html 
getPage1R = defaultLayout [whamlet|
  <p style="font-family:sans-serif;color:red;">placeholder static page 1.
    nav towards <a href=@{Page2R}>page 2.
|] 
getPage2R :: Handler Html 
getPage2R = defaultLayout $ do 
    setTitle "#{pageVarPage}"
    toWidget [lucius| h1 {color:green;} |] 
    addScriptRemote "https://code.jquery.com/jquery-3.4.1.js"
    addStylesheetRemote "http://127.0.0.1/styles.css"
    toWidget
      [julius|
        $(function() {
          $("h1").click(function(){
            alert ("Test from the book");
          });
        });
      |]
    toWidgetHead 
      [hamlet|
        <meta name=keywords content="haskell yesod framework"> 
        <script type="javascript" src="https://code.jquery.com/jquery-3.4.1.js">
        <link rel="stylesheet" type="text/css" href="styles.css">
      |]
    toWidget 
      [hamlet|
        <h1>Page header placeholder
      |]
    toWidgetBody 
      [hamlet|
        <p style="font-family:sans-serif">placeholder for main text and divs
      |]
-- footer is currently of no relevance
    [whamlet|
      <p>footer
      ^{footer}
    |]
...