能否将搜索表单放在我们404页面的顶部？

[mattdm (Matthew Miller)]

当前的设计优先考虑热门话题，而热门话题的性质往往比较笼统。遇到 404 错误的人很可能是在寻找一些特定的内容。除非能神奇地猜到那是什么，否则突出显示搜索框似乎是理想的选择。我知道它在底部，但是……有点难找。）有没有简单的办法重新排列一下？

另外，既然我们谈论这个问题，最好能有一个横跨整个页面的搜索框，而不是现在底部那个小小的框。

也许还可以根据提供的未找到的 URL 来预填充搜索内容。但我还没有仔细考虑过其中的全部影响。

[cocococosti (Constanza Abarca)]

这样可以吗？

我认为可以通过隐藏底部的 page-not-found-search 组件并设置 display: none，然后使用插件插槽在顶部插入搜索框代码来实现：Using Plugin Outlet Connectors from a Theme or Plugin

您还可以添加一些 CSS 来修改文本区域的宽度。请注意，我并没有真正测试过这些，只是直接在浏览器控制台中尝试了一下。

这是搜索框的代码：

<div class="row">
    <div class="page-not-found-search-top">
      <h2>Search this site</h2>
      <p>
        </p><form action="/search" id="discourse-search">
          <input type="text" name="q" value="">
          <button class="btn btn-primary">Search</button>
        </form>
      <p></p>
    </div>
</div>

[mattdm (Matthew Miller)]

太好了，谢谢！我今天晚些时候会试试。

[mattdm (Matthew Miller)]

您能帮我弄清楚这里的正确插口应该是什么吗？我以前曾用过这个概念为“徽章”页面添加一些说明性文字，但 (deprecated) Plugin outlet locations theme component 似乎在 404 页面上不起作用，而且我无法弄清楚在 script 包装器中应该放什么。

[cocococosti (Constanza Abarca)]

似乎 404 页面没有插件插槽，并且根据 https://meta.discourse.org/t/how-to-add-custom-js-code-to-the-404-pages/165214，您必须使用纯 JS。

尝试在主题组件的 Body 选项卡中添加类似以下内容：

<script type="text/javascript">
    var x = document.getElementsByClassName("page-not-found");
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    x.item(0).innerHTML += search
</script>

您可能需要对 CSS 进行一些调整，尝试：

.page-not-found-search {
    display: none;
}

.page-not-found-search-top button {
    margin-left: 10px;
}

.page-not-found-search-top input {
    width: 600px;
}

希望这有帮助！

[hhlp]

是的，404 页面未找到中没有插件插槽，按照您的指示完美运行

将此粘贴到 BODY 标签中：

    var x = document.getElementsByClassName("page-not-found"); 
    var search = '<h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p>'
    x.item(0).innerHTML += search

并将这些粘贴到 CSS 部分：

.page-not-found-search {
    display: none;
}

.page-not-found-search-top button {
    margin-left: 10px;
}

.page-not-found-search-top input {
    width: 600px;
}

在移动设备上也能正常工作……

感谢您的回复

此致，

[rmccown (Bob McCown)]

这效果很好。是时候让我再多定制一下了。

编辑：这导致我的错误日志中出现了错误。

TypeError: null is not an object (evaluating 'x.item(0).innerHTML') URL：https://mysite.com/theme-javascripts/33ba1ce8896576423974ff03c875fe32931690cc.js?__ws=mysite.com 行号：2

[rmccown (Bob McCown)]

回复我自己。我将 .innerHTML 调用包装在 try/catch 块中

<script type="text/javascript">
    var x = document.getElementsByClassName("page-not-found"); 
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    try {
        x.item(0).innerHTML += search
    } catch (error) {
    }
</script>

[hhlp]

我们这边一切正常，没有发生任何错误。

此致，

[mattdm (Matthew Miller)]

感谢 @hhlp

看起来很棒！Discourse 团队，有什么理由不将其设为默认设置吗？

[cocococosti (Constanza Abarca)]

通过查看旧的提交，搜索栏的位置似乎是刚刚发生的事情？继承自以前的谷歌搜索所在的位置，该位置是在 Discourse 初始版本中添加的。

我同意它放在顶部看起来更好。