- Google搜尋"SOSO部落格"
- CMS及架站練習
-
功能說明
- 閱讀部落格文章。
- 頁面互動效果(Ex:大事記頁面的時間軸效果)。
- 線上撰寫文章,上傳文章圖片。
- 文章管理CRUD。
- RWD響應式網頁。
-
開發工具
- Visual Studio 2017
- Sourcetree 3.3.9
-
使用技術
- ASP.NET MVC
- C#
- js
- css
- Ajax
- Entity framework
- Linq
-
架站技術
- iis
- Dns
- ssl
- Google Search Console Tools
-
網站架構
說明 程式 前端 1. 有兩條 navbar
,透過@media
屬性,當頁面寬度小於992px
,轉換為手機平板用的。
2. 當頁面寬度小於768px
,轉換為直式的banner
。
3. 透過css
和js
實現一些頁面動態的效果(Ex:css
的transform
屬性、js
的事件監聽
)。
4. 使用aos
套件搭配js事件監聽
實現大事記頁面區塊飛升效果。
5. 使用ckeditor
文章編輯器套件,再js
驗證圖片上傳格式,和取得文章內容回傳後端。程式碼 後端 1. 以 LINQ
語法透過model
,對資料庫進行存取。
2. 接收前端文章資料,儲存至資料庫。
3. 使用者在文章編輯器上傳的圖片,於文章submit
後,將圖片移置image資料夾,
其餘沒用到的則刪除。
4. 捨棄asp.net mvc
預設的萬用Route
,直接以文章標題作為URL。程式碼
程式碼資料庫 1. 使用 ASP.NET MVC
的Entity Framework
進行資料庫設計。
2. 建置Model
來對資料庫進行存取。程式碼 伺服器 1. 使用 Microsoft
的IIS
服務架站。
2. 使用no-ip
免費DNS
服務,以及免費的網域名稱(每月需手動更新一次)。
3. 使用SSL for free
網站,以檔案驗證方式取得SSL
憑證。
之後再以openSSL
網站服務將憑證原本的crt
和key
檔,轉為IIS
可接受的pfx
檔。
4. 使用google search console
服務,透過檔案驗證方式,驗證擁有權,
並且提交sitemap
,增加SEO
分數。 -
網站截圖