在榆树中设置页面标题？答案

【问题标题】：Set the page title in elm?在榆树中设置页面标题？
【发布时间】：2015-11-09 15:30:08
【问题描述】：

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

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

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

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

但是，我仍然无法完全理解端口，也找不到任何使用此特定端口的示例。因此，例如，我什至不知道端口的类型签名。

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

【问题讨论】：

标签： elm

【解决方案1】：

从 Elm v0.17 开始，内置的 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;
});

【讨论】：

【解决方案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!"

【讨论】：

太棒了，谢谢！端口如何执行？不是从main调用的吗？还是在页面加载时执行每个端口函数？
这在 v17 中不起作用！标题端口已删除。
@Andrew Badr 我在 v17 上遇到了同样的麻烦。你有办法解决吗？
@JunleLi 你必须用 FFI 做一些自定义的事情。我决定不使用 Elm。 :)

【解决方案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
        }

【讨论】：