系列文章
基于.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?rel="stylesheet"?href="~/lib/bootstrap/dist/css/bootstrap.css"><link?rel="stylesheet"?href="~/lib/font-awesome/css/all.css"><!--?我們自己寫的樣式?--><link?rel="stylesheet"?href="~/css/features.css"><link?rel="stylesheet"?href="~/css/metro.css"><link?rel="stylesheet"?href="~/css/footer.css">@await?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代碼~
到這寫頁面的準備工作就完成了，后面就是把頁面一個個寫完~
![[python opencv 計算機視覺零基礎到實戰] 十七、用鼠標畫畫](http://pic.xiahunao.cn/[python opencv 計算機視覺零基礎到實戰] 十七、用鼠標畫畫)
 的存儲定義)
![[python opencv 計算機視覺零基礎到實戰] 十八、用鼠標進行畫畫](http://pic.xiahunao.cn/[python opencv 計算機視覺零基礎到實戰] 十八、用鼠標進行畫畫)
![[python opencv 計算機視覺零基礎到實戰] 十九、簡易繪畫板制作](http://pic.xiahunao.cn/[python opencv 計算機視覺零基礎到實戰] 十九、簡易繪畫板制作)
)