开源博客项目Blog .NET Core源码学习（14：App.Hosting项目结构分析-2）

最新推荐文章于 2024-05-26 23:06:39 发布

gc_2299

最新推荐文章于 2024-05-26 23:06:39 发布

阅读量590

点赞数 5

分类专栏：网页编程文章标签： C# 博客 ASP.NET Core

本文链接：https://blog.csdn.net/gc_2299/article/details/137410156

版权

网页编程专栏收录该内容

146 篇文章 11 订阅

订阅专栏

本文详细描述了开源博客项目Blog的前端结构，包括控制器类的位置、Views文件夹的组织、_Layout.cshtml模板的头部导航、底部和侧边导航设计，以及通用的JavaScript处理。重点介绍了Layui和FontAwesome在页面设计中的应用。

摘要由CSDN通过智能技术生成

开源博客项目Blog的前台页面（如下图所示）的控制器类保存在App.Hosting项目的Controllers文件夹内，页面保存在Views文件夹内，网页中使用的图标、js、css文件等保存在wwwroot文件中。
在这里插入图片描述

前台各个页面、Controller文件夹中的控制器类及Views文件夹中的页面之间的对应关系如下图所示，本文开始逐步分析页面、控制器类的用法。
在这里插入图片描述 Views文件夹的子文件夹Shared中保存前台页面和后台页面的模版，并在_ViewStart.cshtml文件中指定前台页面的模版为_Layout.cshtml。

_Layout.cshtml模版页面的大致结构如下所示，本文从上往下简要说明（内容太多，没有完全看完）。
在这里插入图片描述

头部导航。使用Layui中的layui-header预设类设置头部导航样式，同时调用wwwroot\web\css\global.css根据类名blog-nav设置头部导航样式。头部导航内部使用layui-nav和layui-nav-item预设类设置导航容器及导航菜单，同时每个每个导航菜单配以相应图标，且图标未使用layui内置的图标，而是用的Font Awesome图标（参考文献2）。
在这里插入图片描述

底部设置。页面底部仅由两个div块构成，并未使用layui样式，而是在global.css根据类名footavatar和info设置样式。
侧边导航设置。侧边导航包含一个导航到不同前台页面的侧边导航（暂时没有看到怎么把侧边导航导出来），以及位于右下角的用于分享的分享导航（暂时没有找到对应分享图标的处理函数）。
在这里插入图片描述

通用js处理代码。_Layout.cshtml中的js代码主要做3件事：1）通过分析location网址设置头部导航中当前页面对应的当前导航菜单；2）定义qq登录/qq登出响应函数，调用HomeController的Login和SignOut函数设置qq账号登录/登出。同时页面引用web/js/global.js文件，其中定义了点击页面出现随机文字的函数，也定义了处理侧边导航的响应函数。

参考文献：
[1]https://gitee.com/miss_you/Blog
[2]https://fontawesome.dashgame.com/
[3]https://blog.csdn.net/weixin_42855542/article/details/83476597