包简介

Allows to create a customizable Top Bar.

README 文档

README

A Flarum extension. Allows to create a customizable Top Bar.

Scrolled

Admin

Mobile

Installation

Install with composer:

composer require litalino/flarum-top-bar:"*"

Updating

composer update litalino/flarum-top-bar:"*"
php flarum migrate
php flarum cache:clear

Add Code 🇦

<ul>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Private Customers">Private Customers</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Business Customers">Business Customers</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Help">Help</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Cookie">Cookie</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="My Sunrise">My Sunrise</a></li>
</ul>

or

<ul>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Private Customers">Private Customers</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Business Customers">Business Customers</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Help">Help</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Cookie">Cookie</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="My Sunrise">My Sunrise</a></li>
                <li class="TopBar-item Sub-menu-On">
                    <span class="ButtonGroup Dropdown dropdown Dropdown--split LinkDropdown itemCount4">
                        <a class="LinksButton SplitDropdown-button Button  Button--link" href="#">
                            <span class="LinksButton-title">About</span>
                        </a>
                        <button class="Dropdown-toggle Button Button--icon  Button--link" data-toggle="dropdown" aria-expanded="false">
                            <i aria-hidden="true" class="icon fas fa-caret-down Button-caret"></i>
                        </button>
                        <ul class="Dropdown-menu dropdown-menu Dropdown-menu--right">
                            <li class="item-link2">
                                <a class="LinksButton SplitDropdown-button Button  Button--link" href="#">
                                    <span class="LinksButton-title">About</span>
                                </a>
                            </li>
                            <li class="item-link2-3">
                                <a class="LinksButton Button Button--link LinksButton--inDropdown" href="#">
                                    <i aria-hidden="true" class="icon fa fa-question Button-icon LinksButton-icon"></i>
                                    <span class="LinksButton-title">Faq</span>
                                </a>
                            </li>
                            <li class="item-link2-1">
                                <a class="LinksButton Button Button--link LinksButton--inDropdown" external="" href="#">
                                    <i aria-hidden="true" class="icon fas fa-quote-left Button-icon LinksButton-icon"></i>
                                    <span class="LinksButton-title">Quy tắc</span>
                                </a>
                            </li>
                            <li class="item-link2-4">
                                <a class="LinksButton Button Button--link LinksButton--inDropdown" href="#">
                                    <i aria-hidden="true" class="icon fas fa-book Button-icon LinksButton-icon"></i>
                                    <span class="LinksButton-title">Chính sách</span>
                                </a>
                            </li>
                        </ul>
                    </span>
                </li>
</ul>

If you want the top bar tag to be on the left: add the bottom css to Custom Styles: Admin -> Appearance -> Custom Styles

.TopBar ul {
     justify-content: flex-start !important;
}

Links

litalino/flarum-top-bar 适用场景与选型建议

litalino/flarum-top-bar 是一款基于 Less 开发的 Composer 扩展包，目前已累计 2.53k 次下载、GitHub Stars 达 1，最近一次更新时间为 2023 年 12 月 28 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「flarum」「flarum-extension」「top bar」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 litalino/flarum-top-bar 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 litalino/flarum-top-bar 我们能提供哪些服务？

定制开发 / 二次开发

基于 litalino/flarum-top-bar 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发