#從mobirise進入mezzanine--讓網頁主題更豐富

(mezzanine 4個免費主題，flat, solid, moderna, nova的下載處。)

#前言

1. Django容易架網站，mezzanine是基於Django內容管理，能很方便的架起美觀的網站，但是mezzanine免費的主題能找到的就只有4種。

(從Django到mezzanine相關的資料)

2. mobirise，一個能搭建多變化主題網頁的應用軟體，但它產出的是靜態的網站。

(影片)

3. 結合 1 和 2 ，做一些調整，就可以在mezzanine上搭建多變化的主題了。而且享有Django的資料庫和動態功能。

(就是這裡的目標)

#準備mezzanine

• 借助mezzanine免費的主題已經建好的網頁架構，四選一，都可以，因為我們要顯示的是mobirise網頁，這裡使用solid。

參考 這裡 中間第1.項，在本機安裝好mezzanine solid主題(p.s.範例是flat主題，自行修改)。完成如下。

有一個步驟要填帳號密碼，請記下來。

p.s一般都使用127.0.0.1:8000，但是我的系統衝突，所以改8080，請照你自己的。

建立自己的home，page1，page2標籤(這裡的名稱和mobirise的頁面名稱要互相搭配)。

也就是從此不使用solid主題了。

啟動127.0.0.1:8080/admin進入管理頁面，要帳號密碼喔！

• 新增頁面home，123那邊隨便填幾個字，否則就會出現上方紅色的錯誤，

meta data有2處要填。

(Title填上home，這裡才是真正使用上的名稱。上一步驟的Title只是顯示用。)

• 再建立page1和page2

這個時候進入127.0.0.1:8080，畫面多了3個標籤。

• 在url.py中，

最上面加入這一行

但是如果有from __future__ import unicode_literals，則必須在它的下面。

from mezzanine.pages import views

把下面這一行註解掉，這是solid主題使用的首頁路徑。

 ###url("^$", direct_to_template, {"template": "index.html"}, name="home"),

把下面這一行取消註解，這是使用者自訂的首頁路徑。 就是meta data中的/。

(要用views.page轉向我們的首頁-->flat\templates\pages\index.html，slug是views.page的參數，告訴它要處理的路徑)

url("^$", views.page, {"slug": "/"}, name="home"),

再加這2行，這是使用者自訂的其他頁面。

url("^page1$", views.page, {"slug": "/page1"}, name="page1"),
url("^page2$", views.page, {"slug": "/page2"}, name="page2"),

註：mezznine會優先使用外部的同名html檔，如果沒有，才使用自己的。

這個時候，再進入127.0.0.1:8080，不一樣了，
因為它已經轉向，

本來是使用C:\...\myproject\solid\templates\index.html
現在改用C:\...\myproject\solid\templates\pages\index.html了

也就是solid主題不見了，變成我們自己的網頁。接下來，就是要把mobirise建立的網頁，插進來。

#準備mobirise

• 用mobirise建立自己的網頁

(除非只是練習，否則網頁的完成度應盡可能高，免得日後修改，就要再重覆繁瑣的調整步驟)

請看影片建立頁面index.html，page1.html，page2.html。

完成以後，你的目錄如下，3個html檔，一個資料夾存放靜態檔案。

(這裡的3個檔名，要和mezzanine中的頁面名稱互相配合)

#調整過程

• 將3個html檔案copy到  C:\...\myproject\solid\templates\pages 目錄之下(其中index.html直接覆蓋)
• 將 assets目錄copy到 C:\...\myproject\solid\static  目錄之下

啟動127.0.0.1:8080看到結果了，只是不美觀。甚至page1，page2還不能連結。

以下的搜尋和置換工作，請參考好用的notepad++搜尋功能。

• 因為mezzanine和mobirise網址處理方式不同，所以修改html內的超連結。

連結到index.html要改成/，

連結到page1.html要改成page1

連結到page2.html要改成page2，

以符合mezzanine url pattern的方式。

再整理一下127.0.0.1:8080的網頁，檢查一下，連結就有作用了。

• 靜態(static)檔案路徑修改

• 3個html檔案的開頭，都要加上

{% load static %}

• 只要用到assets路徑，都要改。如下例

原來是  assets/web/assets/mobirise-icons/mobirise-icons.css

改成     {% static "assets/web/assets/mobirise-icons/mobirise-icons.css" %}

利用notepad++全部取代的功能和搜尋的功能做檢查

--用 {% static "assets 取代 assets，事後要檢查，如上例，第二個assets不該取代的

--用 .jpg" ％} 取代 .jpg ，這個不必檢查，因為.jpg不可能在路徑的中間。

--同樣的方法 取代 .png  .js  .css，大概就差不多涵蓋所有的靜態檔案了，

再整理一下127.0.0.1:8080的網頁，就看到結果了。這是影片中建立的內容。

#結果

這是先前做的成果，放在網路上，

(有加入後台的控制，請參考 這裡 ，主要是多了一個page_processors.py，來處理view的程式。)

https://web20toheroku.herokuapp.com/  連線要30秒，請等待。