Question

如何在程序启动时在elm中设置页面标题？

我在文档中找到了这个：（http://elm-lang.org/docs/syntax）

Elm有一些内置的端口处理程序，可以自动执行一些必要的操作：

title设置页面标题，忽略空字符串

但是我仍然无法完全绕过端口，也无法找到正在使用的特定端口的任何示例。所以我不知道，例如，甚至端口的类型签名。

我知道我可以通过制作我自己的index.html并将elm程序嵌入其中来做到这一点，但我想在榆树本身中解决这个问题，即使没有其他原因也要了解它是如何做到的。完成。（并希望了解一些关于港口的事情......）

Answer 1

从Elm v0.17开始，内置的title端口已被删除，但是自己添加端口非常容易。以下程序将在启动时将页面标题设置为“这是标题”：

port module Main exposing (..)

import Html.App as App
import Html exposing (Html, text)

main =
  App.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

port title : String -> Cmd a

type alias Model = {}

init : (Model, Cmd Msg)
init =
  ({}, title "This is the title")


type Msg
  = Noop

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Noop ->
      (model, Cmd.none)

subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none

view : Model -> Html Msg
view model =
  text "Hello World"

然后，在Javascript中，您需要订阅端口：

var app = Elm.Main.fullscreen();
app.ports.title.subscribe(function(title) {
    document.title = title;
});

Answer 2

类型签名是您定义的任何类型。作为使用title端口设置标题的简单应用程序示例：

import Html exposing (text)

port title : String
port title = "The page title"

main =
  text "Hello, World!"

作为一个稍微复杂的例子，您可以将页面标题设置为每秒更新为当前时间

import Html exposing (text)
import Time exposing (every, second)

port title : Signal Float
port title = every second

main =
    text "Hello, World!"

Answer 3

在Elm 0.19中，定义了类型Browser.Document。

type alias Document msg =
    { title : String
    , body : List (Html msg)
    }

此数据指定应该进入的节点和所有节点的。这意味着您可以在应用程序中更新标题变化。也许您的“单页应用”导航到“不同页面”，日历应用可能会在标题中显示准确的日期，等等。

如果您使用Browser.document或Browser.application创建程序，则只需设置网页标题即可。

view : Model -> Browser.Document Msg
view model =
    { title = "This goes to the title"
    , body = [ text "Hello world!" ]
    }

main : Program Flags Model Msg
main =
    Browser.document
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

在elm中设置页面标题？

3 个答案: