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

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

系列文章

前言

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

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

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

相關文章