Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

使用Parse.js搭建自己的部落格

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog with Parse.js: Working with Data

Chinese (Traditional) (中文(繁體)) translation by Quill Qian (you can also view the original English article)

Final product image
What You'll Be Creating

你是否曾經為自己絕妙的網站創意而感到興奮不已,卻發現將它部署到伺服器並讓它運行起來的過程苦不堪言?在Parse.js的幫助下,任何懂一點HTML,CSS和JavaScript的人都可以很容易地創建一個動態網站或是Web應用。

這個教程將會教你從零開始使用Parse.js搭建一個部落格系統。你將會使用到各種各樣的Bootstrap工具,並在整個過程中將快速反覆運算原型、重構以及MVC框架的思想付諸實踐。完成這一系列的教程之後,你應該可以能夠獨立搭建任何類型的CMS(內容管理系統)。

儘管我們將盡可能詳細地闡述各個步驟與可能遇到的問題,這篇教程假定讀者對於HTML、CSS、JavaScript/jQuery和GitHub有基本的瞭解。如果你對於上述工具不熟悉,可以查閱Tuts+上的相關教程。

設置開發環境

我們將從設置開發環境開始。你將需要一個本地測試伺服器、一個Web伺服器、一個資料伺服器和版本控制工具。如前文所述,這篇教程不需要讀者瞭解後端架構。我們將一步一步地教你來完成整個網站。如果你已經有了上述工具,可以跳過這一部分。

第1步 安裝XMAPP

在試用了幾種不同的解決方案之後,我發現用XAMPP來搭建本地測試伺服器是最方便的,因此這篇教程中我將使用XAMPP作為本地測試伺服器。

如果你還沒有XAMPP,可以根據你的作業系統從這裡下載相應版本並完成安裝。

XAMPP website

我使用的是Mac OS,所以從現在起我將用它來演示。如果你使用的是其他作業系統,過程應該是相似的。

安裝完成後,啟動XAMPP,啟動"Apache Web Server".

XAMPP - Manage Servers - Start Apache Web Server

現在如果你在流覽器中訪問http://localhost/的話你可以看到XAMPP的默認頁,這代表XMAPP已經成功啟動運行。

Localhost when XAMPP is running

第2步 創建一個新的GitHub Page

現在讓我們在GitHub創建一個新的版本庫(repo)。為了簡潔好記,我把它命名為blog。為了讓它能夠成為Web伺服器,我們需要把它設置為一個GitHub Page

首先,添加一個叫gh-pages的新分支。

Add a new branch gh-pages

然後進入設置面板,將gh-pages設為預設分支。

Set gh-pages as the default branch

好的,然後我們打開終端,使用命令列將GitHub上的分支複製到XAMPP的htdocs資料夾中。

打開剛才你複製了Git版本庫進去的資料夾,創建一個index.html,然後在裡面寫入Hello World

訪問你的localhost,確認網頁能夠正常顯示。

Localhost - hello world

現在我們把它推送到GitHub上。

幾分鐘後,訪問http://yourusername.github.io/reponame你將可以看到你的index.html出現在了上面:)

GitHub Page - hello world

第3步 註冊Parse.js帳戶

GitHub Page能夠託管靜態頁面,但是並不能實現後端動態生成頁面。幸運的是,我們現在有了Parse.js。我們可以使用Parse.com作為我們的資料伺服器,並使用JavaScript與它進行通信。由此,我們只需要在GitHub上託管HTML,CSS和JavaScript文件。

G如果你沒有Parse.com帳號,請註冊一個。

Parsecom website

現在,你已經在雲端擁有了自己的資料伺服器。

Bootstrap靜態HTML範本

現在,讓我們為要做的部落格系統準備一個靜態網頁的版本。為了讓大家能夠更輕鬆地完成整個教程,我直接使用了Bootstrap提供的部落格範本。如果你對於Bootstrap相當熟悉,或是已經有了一個設計完成的靜態網頁,你可以按照你自己的方式完成這一部分。如果你對於Bootstrap並不熟悉,可以按著教程繼續往下做。

第1步 下載Bootstrap

首先,下載Bootstrap(我們目前使用的版本是3.2.0),解壓後放到XAMPP/xamppfiles/htdocs/blog資料夾下。

Put Bootstrap in blog folder

第2步 從Bootstrap基礎範本開始

將下麵給出的Bootstrap基礎範本複製到index.html,這個範本包含了基本的HTML結構,並且引用了bootstrap.min.cssbootstrap.min.jsjquery.min.js。從這樣的一個範本開始可以節約不少時間。

刷新並確認網頁能夠正常顯示。

Add Bootstrap basic template

第3步 複製部落格範本示例

打開Bootstrap提供的部落格示範:http://getbootstrap.com/examples/blog/

在網頁上點擊右鍵,選擇"查看網頁原始程式碼". 我們需要將<body>裡面的所有內容複製到我們的index.html來替換掉基礎範本中的<h1>Hello, world!</h1>

請不要複製<script>標籤裡的內容,因為我們已經有了我們所需要用到的所有JavaScript檔。

現在,你的頁面應當是這樣的:

Add example blog template

第4步 複製示例部落格的樣式並加入到index.html中

你可能已經注意到頁面的樣式還沒有完全正確,那是因為我們還需要一個基於bootstrap基礎樣式編寫的樣式表blog.css

你可以在原始程式碼裡找到它:http://getbootstrap.com/examples/blog/blog.css

把檔複製到你的blog/css資料夾下。

index.htmlbootstrap.min.css下面引用這個css:

在樣式應該已經完全正確了。就此我們得到了我們所需要的靜態範本。

Static template

設置並連接到Parse資料庫

為了使我們的靜態部落格動態化,我們首先需要在Parse.com上為它建立一個資料庫。

第1步 創建一個新應用

打開Parse.com儀錶面板,點擊"Create New App"(創建新應用)。

我們現在把它取名為Blog

Create a blog app on Parsecom

創建完成之後,點選"Quickstart Guide - Data - Web - Existing project"。

Parse Quickstart Guide

第2步 在index.html中引用Parse.js

根據速成指南,首先需要在你的index.html中引用Parse.js。不過你可以把它放在jQuery下面而不是<head>裡面:

第3步 測試Parse SDK

隨後,根據你的Application ID和JavaScript Key在你的blog/js資料夾下創建一個blog.js並填入一些測試代碼。你可以在速成指南中找到Application ID、JavaScript Key和測試代碼:

保存文件,然後在index.htmlbootstrap.min.js下方引用這一JavaScript文件。

再次在你的localhost中刷新index.html,這時你應該能夠看到這條彈框消息:

Success alert message

這代表你已經成功連接到了你在雲端的資料庫:)

這時如果你去查看Parse.com上你的"Data Browser"(資料流覽器)時,你可以看到你剛才創建的測試物件。

Parse Data Browser

小結

到目前為止,我們搭建起了所需要的全部伺服器:XAMPP作為本地測試伺服器,GitHub Pages作為Web伺服器,Parse.com作為資料伺服器。此外,我們創建了一個基本的部落格範本,並且創建了與資料庫之間的連接。

在接下去的章節中,我們將會教你如何通過Parse提供的資料流覽器添加新文章,用JavaScript獲取這些資料並在前端完成渲染和展示。

如果你不知道如何往下,可以查看原始檔案。如果你在跟著教程完成的過程中遇到了困難,請給我留言。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.