基於.NetCore開發部落格專案 StarBlog - (5) 開始搭建Web專案

程式設計實驗室 發表於 2022-05-16
.Net

系列文章

前言

距離本系列的上一篇文章釋出有段時間了,最近被一個培訓活動整得身心俱疲,休息了一個週末好不容易才緩過來,趕緊繼續來更新部落格~

經過了前面的模型設計、部落格資料匯入之後,我們專案的準備工作已經基本完成,可以開始來做網站了,本文將記錄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程式碼~

到這寫頁面的準備工作就完成了,後面就是把頁面一個個寫完~