Lopwon Hub：Menu 使用文档

2024年12月22日

版本型号：Lopwon Hub · Menu（导航菜单）
适用程序：Typecho
皮肤类型：插件
插件作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/attachment/3878/
官方演示：导航菜单

我要购买：前往

插件说明

Menu（导航菜单）依托 Lopwon Hub 插件运行，适用于展示分类、单页，以及自定义的链接等场景，主要功能：

1. 可以在任意页面任意位置调用显示；

2. 支持输出指定的分类链接、单页链接，以及自定义的链接；

3. 在菜单显示勾选的项，在滑窗显示所有的项；

4. 支持显示自定义的图标，且支持延迟加载；
插件更新

2025年02月14日 发布 Lopwon Hub · Menu

使用方法

A 部署文件

1. 将压缩包里的文件夹 LopwonHub 及其内部的所有文件，上传至目录 usr/plugins 中。

2. 后台》控制台》插件，找到 Lopwon Hub 并启用。

B 调用插件

示例一：全局调用。

1. 打开要使用本案功能的文件（如 post.php），在合适位置添加以下代码：


    <?php Typecho_Plugin::factory('Menu')->LopwonHub(); ?>

示例二：指定调用。

1. 打开要使用本案功能的文件（如 post.php），在合适位置添加以下代码：


    <?php

    if (in_array($this->cid, ['文章cid编码一', '文章cid编码二', '以此类推'])) {
        Typecho_Plugin::factory('Menu')->LopwonHub();
    }

    ?>


2. 请把以上代码中（文章cid编码*）替换为你要调用插件的页面 cid 如：


    <?php

    if (in_array($this->cid, ['3', '66', '888'])) {
        Typecho_Plugin::factory('Menu')->LopwonHub();
    }

    ?>

E 异步加载（可选项）

本案依赖 JavaScript，如果调用插件的位置涉及异步加载，请动态引入以下脚本（请自行研究），反之可无视：


    <script src="https://www.example.com/usr/plugins/LopwonHub/static/js/lopwon.hub.push.js"></script>
    <script>HubPush.init("lopwon_hub_menu-wrap");</script>

    <script src="https://www.example.com/usr/plugins/LopwonHub/static/js/lopwon.hub.layout.js"></script>
    <script>
    var lopwonHubMenuLayout = [
        { minWidth: 960, maxWidth: Infinity, childCount: 12 },
        { minWidth: 768, maxWidth: 960, childCount: 10 },
        { minWidth: 480, maxWidth: 768, childCount: 8 },
        { minWidth: 0, maxWidth: 480, childCount: 5 }
    ]

    HubLayout.updateLayout('lopwon_hub_menu-wrap', '.lopwon_hub_menu-wrap li', lopwonHubMenuLayout);
    HubLayout.updateLayout('lopwon_hub_menu-category', '.lopwon_hub_menu-category li', lopwonHubMenuLayout);
    HubLayout.updateLayout('lopwon_hub_menu-page', '.lopwon_hub_menu-page li', lopwonHubMenuLayout);
    HubLayout.updateLayout('lopwon_hub_menu-link', '.lopwon_hub_menu-link li', lopwonHubMenuLayout);
    </script>

    <script src="https://www.example.com/usr/plugins/LopwonHub/static/js/lopwon.hub.lazy.bgimg.js"></script>
    <script>HubLazyBgimg.init(".lopwon_hub_menu-lazy");</script>


请把以上代码中 https://www.example.com 替换为你的链接。

D 配置插件

后台》控制台》插件，找到 Lopwon Hub 并设置，找到本案（设置），根据提示依喜好设置即可。

E 使用技巧

1. 适配样式请修改 usr/static/css/lopwon.hub.menu.css 文件，请自行研究。
store