wordpress区块链导航类网站,深圳招聘网站找工作,襄阳企业网站建设,广州网站开发设计公司系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客#xff1f;基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.N… 系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目...前言距离本系列的上一篇文章发布有段时间了最近被一个培训活动整得身心俱疲休息了一个周末好不容易才缓过来赶紧继续来更新博客~经过了前面的模型设计、博客数据导入之后我们项目的准备工作已经基本完成可以开始来做网站了本文将记录StarBlog博客的AspNet.Core Web项目的搭建过程。回顾一下先来回顾一下我们的Web项目是MVC类型的项目作为博客的前台本项目使用后端渲染页面以方便SEO也就是博客网站这部分是前后端不分离的写法。整理项目打开我们之前创建的好的AspNetCore Web项目StarBlog.Web模板生成的默认目录结构类似这样StarBlog.Web
├── Controllers
│ └── HomeController.cs
├── Models
│ └── ErrorViewModel.cs
├── Properties
│ └── launchSettings.json
├── Views
│ ├── Home
│ ├── Shared
│ ├── _ViewImports.cshtml
│ └── _ViewStart.cshtml
├── wwwroot
│ ├── css
│ ├── js
│ ├── lib
│ └── favicon.ico
├── Dockerfile
├── Program.cs
├── StarBlog.Web.csproj
├── appsettings.Development.json
└── appsettings.json可以看到它自动生成了一堆东西有些我们不需要有些可以利用起来的先来整理一下吧。wwwroot目录中的静态资源是不需要的模板自带的bootstrap啥的也不适合放进git后面我们自己用NPM来管理静态资源所以把wwwroot目录下的文件都删了。Views里的是页面模板里面代码是要全部重写的先留着后面直接重写就行。Models里的ErrorViewModel.cs没用上可以删了~暂时先这样来进行下一步了。引入NPM管理前端资源据说在.Net Framework时代前端资源甚至能通过nuget来管理不过包太少了更新也跟不上NPM所以现在.Net Core时代已经废弃了我之前也写了一篇博客详细介绍使用NPM和Gulp来管理AspNetCore Web项目的静态资源可以作为本文这部分的扩展阅读Asp-Net-Core开发笔记使用NPM和gulp管理前端静态文件这部分依赖于node环境如果本地没有安装node环境请先在官网下载安装https://nodejs.org/en/download/在StarBlog.Web项目的目录下执行命令初始化node项目主要就是为了生成package.json文件npm init然后直接编辑package.json文件添加依赖{devDependencies: {gulp: ^4.0.2,gulp-changed: ^4.0.3,gulp-clean-css: ^4.3.0,gulp-concat: ^2.6.1,gulp-rename: ^2.0.0,gulp-uglify: ^3.0.2,rimraf: ^3.0.2},dependencies: {fortawesome/fontawesome-free: ^6.0.0,bootstrap: ^5.1.3,bootswatch: ^5.1.3,editor.md: ^1.5.0,jquery: ^3.6.0,masonry-layout: ^4.2.2,vue: ^2.6.14}
}这些是本项目需要用到的前端依赖一股脑加进去之后执行命令一键安装依赖npm install到这NPM管理前端资源的使命就结束了。使用前端自动化工具Gulp接下来要解决一个问题NPM安装的依赖都在node_modules目录下要怎么把这些资源放到wwwroot目录下呢手动复制粘贴no这也太麻烦了前端工具链中为我们提供了更方便的生产力工具——Gulp。关于Gulp的介绍可以看我之前的这篇博客Asp-Net-Core开发笔记使用NPM和gulp管理前端静态文件这里就不重复了直接安装npm install --global gulp-cli然后在StarBlog.Web目录下新建gulpfile.js文件内容比较长我就不全部贴出来了全部代码可以在GitHub查看到https://github.com/Deali-Axy/StarBlog/blob/master/StarBlog.Web/gulpfile.js这里贴一下关键的配置// 使用 npm 下载的前端组件包
const libs [{name: jquery, dist: ./node_modules/jquery/dist/**/*.*},{name: popper, dist: ./node_modules/popper.js/dist/**/*.*},{name: bootstrap, dist: ./node_modules/bootstrap/dist/**/*.*},{name: bootswatch, dist: ./node_modules/bootswatch/dist/**/*.*},{name: prismjs, dist: ./node_modules/prismjs/**/*.*},{name: vue, dist: ./node_modules/vue/dist/**/*.*},{name: masonry-layout, dist: ./node_modules/masonry-layout/dist/*.*},
];// 使用 npm 下载的前端组件自定义存放位置
const customLibs [{name: editormd, dist: ./node_modules/editor.md/*.js},{name: editormd/css, dist: ./node_modules/editor.md/css/*.css},{name: editormd/lib, dist: ./node_modules/editor.md/lib/*.js},{name: editormd/examples/js, dist: ./node_modules/editor.md/examples/js/*.js},{name: font-awesome, dist: ./node_modules/fortawesome/fontawesome-free/**/*.*},
]搞定我们配置的是把前端依赖复制到wwwroot/lib目录下之后执行命令gulp move搞定~如果觉得每次添加前端依赖之后还得敲命令麻烦的话可以看我之前这篇配置gulp的博客在IDE里配置一下以后点一下就行。修改 _Layout 模板前端资源都准备齐全接下来修改一下前端主模板方便接下来的写页面~编辑wwwroot/Shared/_Layout.cshtml文件修改head节点下的引用代码head!-- 第三方依赖 --link relstylesheet href~/lib/bootstrap/dist/css/bootstrap.csslink relstylesheet href~/lib/font-awesome/css/all.css!-- 我们自己写的样式 --link relstylesheet href~/css/features.csslink relstylesheet href~/css/metro.csslink relstylesheet href~/css/footer.cssawait RenderSectionAsync(head, false)
/head修改最后面的js引用!-- 第三方依赖 --
script src~/lib/bootstrap/dist/js/bootstrap.bundle.min.js/script
script src~/lib/vue/dist/vue.js/script
!-- 我们自己写的js --
script src~/js/site.js/script
await RenderSectionAsync(bottom, false)有些具体的代码太长了我就不贴了涉及到具体功能的时候我再贴上关键代码因为项目已经基本完成代码在GitHub都有大家可以参考一下GitHub代码~到这写页面的准备工作就完成了后面就是把页面一个个写完~
