需要帮助在页面顶部添加外部链接

开发
1

我不确定这是否是主题问题，但我们的 Discourse 页面是一个更大网站的一部分。整个网站的外观和风格正在发生变化，我正在尝试找出如何让我们的 Discourse 页面与之匹配。除了页面顶部的外部链接外，我在使用主题方面已经取得了成功。

这些链接本应是水平排列的，但它们却显示为垂直排列。
我从旧主题中复制了这段代码，并将其粘贴到 CSS/HTML 编辑器的“头部”选项卡中：

<body class="staff navigation-categories categories-list" data-gr-c-s-loaded="true">
::before
<div id="top-navbar">
    <div id="top-navbar-links">
        <div id="xg_masthead">
            <h1 id="xg_sitename" class="xj_site_name"><a id="application_name_header_link" href="http://community.uaccess.arizona.edu/"><img src="/uploads/default/original/1X/30cb387c966257871ec97c979d4759e784945fc7.png" alt="The UAccess Community Forums"></a></h1>
        </div>
    </div>
    <ul id="top-external-nav">
        <li class="top-ext--main">
            <a class="top-ext--link top-discourse-link-main" href="http://community.uaccess.arizona.edu/">Home</a>
        </li>
        <li class="top-ext--main" id="top-discourse-link-forums">
            <a class="top-ext--link top-discourse-link-main" href="/">Forums</a>
            <ul class="top-ext--sub" id="top-discourse-sub-forums">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/announcements">Announcements</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-analytics">Analytics</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-budget">Budget</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-employee">Employee</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-financials">Financials</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-learning">Learning</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-research">Research</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-student">Student</a>
                </li>
            </ul>
        </li>
        <li class="top-ext--main" id="top-discourse-link-events">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/events" target="blank">Events</a>
            <ul class="top-ext--sub" id="top-discourse-sub-events">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-speaker-series">Speakers</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/events/2016-uaccess-symposium">Symposium</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/calendar">Calendar</a>
                </li>
            </ul>
        </li>
        <li class="top-ext--main" id="top-discourse-link-resources">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/resources">Resources</a>
            <ul class="top-ext--sub" id="top-discourse-sub-resources">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/business-office-resources">Business Office</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-analytics-resources">Analytics</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-budget-resources">Budget</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-employee-resources">Employee</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-financials-resources">Financials</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-learning-resources-0">Learning</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-student-resources">Student</a>
                </li>
            </ul>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/help/questions">FAQs</a>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/contact-us">Contact Us</a>
        </li>
    </ul>
  </div>
</div>
2

您帖子中的代码仅包含 HTML，因此显示为未样式的垂直列表是预期的。若要实现水平列表，您需要为该元素添加相应的 CSS 样式。

此外，从外观来看，这很可能是一个带有子菜单项的菜单。因此，您还需要将处理该菜单的 JavaScript 代码添加到您的主题或组件中。

3

嗨，Joe，谢谢你的回复。

那我是不是应该查找将菜单设置为水平的 CSS 代码，然后将该代码添加到这段代码的顶部？
（抱歉，我是个新手）
是的，其中三个链接带有子菜单。

4

别担心，Catherine :+1:

这取决于你从哪里获取菜单的 HTML。

那是 Discourse 主题吗？

如果是的话，你可以进入该主题的 CSS 选项卡来获取 CSS 代码。之后你只需将 CSS 复制到新主题即可。如果不是，那么流程会有所不同。如果你能提供更多信息，我可以尝试帮助你。

如果你不想操心维护菜单代码的问题，我们有一个易于配置的主题组件，与你在这里想要实现的功能类似：

5

感谢你的协助，Joe。
旧“主题”的 CSS 字段是空的。
我与一位了解部分网站历史的人交谈过，他表示所有内容都是定制的。网站的视觉效果是通过指向外部 CSS 文件实现的。
在请你继续花费更多时间之前，我打算先尝试一些其他资源，看看能否取得一些进展。

无论如何，我接下来几天需要暂时搁置这个项目，去处理其他更紧迫的任务。

我会随时向你同步进展。

再次感谢，
Catherine