使用7B2打造一个属于自己的导航页面

导航项目需求

网站收藏夹提供了便捷的方式来存储、管理和快速访问个人喜爱的网站，提升了上网体验的便利性和效率。我平时就喜欢搜藏一些漂亮的网站作为自己学习的素材。收藏导航页面有以下好处：

• 方便存储：通过使用网站收藏夹，人们可以将感兴趣的网站链接保存起来，以便日后随时访问。这样可以避免每次都要重新搜索或记住网站地址的麻烦。
• 快速访问：将常用的网站添加到收藏夹中，可以快速访问这些网站，节省时间和精力。
• 组织整理：收藏夹可以帮助人们对网站链接进行分类和整理，使得查找和管理网站变得更加简单和高效。
• 同步跨设备：许多浏览器和云服务提供了收藏夹的同步功能，可以将收藏夹内容自动同步到不同的设备上。这意味着无论在哪台设备上使用，都可以访问到相同的收藏夹内容。

有如此之多的好处，必然要一个网址就能搞定，随时随地的访问。所以基于7B2模板导航页面，进行升级改版，做了23年的最终版。

导航项目分析

导航页面结构设计是创建一个易于使用和导航的网站或应用程序导航页面的过程。首先要保持导航页面的简洁性，避免过多的选项和混乱的布局。只包含必要的导航链接，以提供清晰的网站信息，确保导航栏在页面上易于找到。使用明显的导航图标或标签，以吸引用户的注意力。现有的导航页面一般都是左右结构。再配上一个搜索模块，雏形如下

导航页面模块优化

• 左侧新增菜单icon
• 添加顶部搜索模块
• 菜单项目结构优化

导航页面设置

导航内容添加位置
后台-> 网页导航。
导航页面设置
B2主题设置->网址导航设置。
需要注意的设置项：要显示的网址导航分类   需要先给导航分类添加内容才可选择分类。
如果此处不选择分类，则页面会显示为空。
点击跳转方式建议选择直接跳转到目标站点。

最终呈现效果

相比原版的导航页面，新版页面结构依旧使用左右结构，但是使用了全宽结构。左侧菜单栏目由于是使用插件自动获取的，无法新增标签。选择了一个折中的方式，给A标签新增了before伪类。至于icon的图标，可以尝试一下原版的7B2 icon    。特殊字体使用请参考本站 如何在网站引用特殊字体

顶部搜索模块则是使用了7B2自带的搜索模块，期间发现个弊端。就是模块调用时候，背景图片参数没被添加上，只能在样式里面自己添加了。7B2模块自带短代码功能，可见性选择不可见，并且在页面模版直接调用短代码就行了。

源码下载

以子主题的形式做的，可以直接上传到选择模板即可，主题升级不受影响，使用过程中有任何不妥，请随时联系站长VX-18003862798。解压密码 ourule.com