在榆树中设置页面标题？

Question

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

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

Elm has some built-in port handlers that automatically take some imperative action:

title sets the page title, ignoring empty strings

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

我知道我可以通过制作自己的 index.html 并将 elm 程序嵌入其中来做到这一点，但我想在 elm 本身中解决这个问题，即使除了为了了解它是如何完成的。（希望也能学到一些关于端口的知识...）

Answer 1

类型签名是您定义的任何内容。作为使用 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 2

从 Elm v0.17 开始，built-in title 端口已被删除，但您自己添加端口非常容易。以下程序将在启动时将页面标题设置为 "This is the 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 3

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

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

This data specifies the and all of the nodes that should go in the . This means you can update the title as your application changes. Maybe your "single-page app" navigates to a "different page", maybe a calendar app shows an accurate date in the title, etc.

如果您使用 Browser.document or 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
        }

在榆树中设置页面标题？

Set the page title in elm?

elm