开源博客项目Blog .NET Core源码学习(14:App.Hosting项目结构分析-2)

开源博客项目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

相关推荐
一心赚狗粮的宇叔11 小时前
中级软件开发工程师2025年度总结
java·大数据·oracle·c#
cplmlm12 小时前
EF Core使用CodeFirst生成postgresql数据库表名以及字段名用蛇形命名法,而类名仍使用驼峰命名
c#
lingxiao1688813 小时前
WebApi详解+Unity注入--下篇:Unity注入
unity·c#·wpf
lingxiao1688816 小时前
WebApi详解+Unity注入--中篇:.net core的WebAPI
unity·c#·.netcore
ServBay16 小时前
C# 成为 2025 年的编程语言,7个C#技巧助力开发效率
后端·c#·.net
故事不长丨20 小时前
C#进制转换:从基础原理到实战应用
开发语言·c#·进制转换·16进制·2进制·10进制
liulilittle20 小时前
VEthernet 框架实现 tun2socks 的技术原理
网络·windows·c#·信息与通信·通信
云草桑21 小时前
.net AI API应用 客户发的信息提取对接上下游系统报价
ai·c#·.net·semantickernel·sk
故事不长丨1 天前
C#File文件操作全解析:从基础用法到异常处理
服务器·开发语言·visualstudio·c#·文件操作·io流·file
工程师0071 天前
C# 动态编程(基于 dynamic 类型)
开发语言·c#·dynamic·动态编程