开源博客项目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文件,其中定义了点击页面出现随机文字的函数,也定义了处理侧边导航的响应函数。

参考文献:

1https://gitee.com/miss_you/Blog

2https://fontawesome.dashgame.com/

3https://blog.csdn.net/weixin_42855542/article/details/83476597

相关推荐
zlinear数据采集卡3 小时前
数据采集卡从入门到精通(9):分辨率与精度——16位卡不等于1/65536的精度
开发语言·数据库·fpga开发·开源·c#
深澈Vincel5 小时前
我用 C# + WebView2 做了一个针对“流氓软件”的“一键清理工具“:架构实践与踩坑记录
c#
zlinear数据采集卡6 小时前
数据采集卡从入门到精通(7):流水线型ADC——级级接力,高速与高精的平衡术
开发语言·arm开发·嵌入式硬件·fpga开发·c#
阿部多瑞 ABU8 小时前
告别手工核图:基于 .NET + MuPDFCore 的 CAD 等轴测 PDF 材料表提取与新旧版本对比实战
后端·算法·ui·pdf·c#
条形码D8 小时前
DRG综合管理分析系统-目前已经支持CHS-DRG3.0
c#·drg·3.0分组器·drg分组器·chs-drg3.0分组器
Alex Gram1 天前
数据库同步工具PanguSync图文教程
java·mysql·postgresql·sqlserver·c#·数据库同步软件·数据库同步工具
头茬韭菜1 天前
第 10 篇:「Fluss 实战案例集」—— 完整解决方案与最佳实践
c#·linq·fluss
淡海水1 天前
01-05-运行时-JIT优化全景-内联去虚拟化边界检查消除
windows·c#·虚拟化·jit·内联·边界检查消除
波波0072 天前
C# 15 重磅新特性: 带标签 break 与 continue:重新定义嵌套循环控制流
服务器·前端·c#
wujian83112 天前
怎么用千问生成word文档:从「格式崩」到「一键过」,AI导出鸭打通最后半厘米
人工智能·ai·c#·word·豆包·deepseek·ai导出鸭