#修改mezzanine 免費主題flat-->加入自己的view

目標：在網頁中，加入筊白筍每日交易行情

到修改後的網頁去(已加入自己的view)

(以下參考的檔案，請到  這個網頁的下方 下載)

準備：

• 使用django環境，用爬蟲程式，處理好抓回來的資料，在本地端server跑起來。備用。如下圖

(showprice.html和views.py在最下面可下載參考)

• 已經用mezzanine 主題建立好一個網頁。

mezzanine flat主題的部份

• 在url.py中，

最上面加入這一行            (mezzanine.pages.views.page()就是專門管view程式的)

from mezzanine.pages import views

把下面這一行註解掉       (這是由mezzanine直接控制的首頁)

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

把下面這一行取消註解    (要用views.page轉向我們的首頁-->flat\templates\pages\index.html，slug是views.page的參數，告訴它要處理的路徑)

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

• 在flat目錄下新建一個檔案，檔名一定叫做page_processors.py，檔案內容和說明參考下面下載檔案。

你發現，我們把爬蟲程式就放在裡面了，只是多了一些設定，還有它只能傳回變數(字典型態)，render還是由mezzanine來做。

@processor_for("/")這一行，參數"/"就是類似像「127.0.0.1/」的路徑。

p.s.因為其他頁面是mezzanine的page，所以如果要寫程式套用到這些page，就在url.py中增加路徑，slug後面就加頁面名稱，這裡的參數，也跟著對應就可以了。

• 進入127.0.0.1:8000/admin，新增一個page，title叫home，在它的最底下有meta標籤，點進去，在url欄位裡填入/
• 把先前完成的靜態首頁flat\templates\index.html，複製覆蓋flat\templates\pages\index.html，然後編輯它：在你想要的地方，將showprice.html裡面<div>標籤的內容貼上去。

先在本機server跑看看，沒問題，就可以送上heroku了。

#研習實作：修改mezzanine 免費主題flat

到修改後的網頁去

(p.s.做著做著，我好像是從最下面改上來。)

• about us
• 所在檔案：flat\templates\pages\menus\footer.html

• Mezzanine theme by CodingHouse. HTML template by Shapebootstrap

• 所在檔案：flat\templates\base.html

• What our clients say

• 所在檔案：flat\templates\index.html

• 將這個頁面取消：找到下圖的，在前面加<!--，在後面加-->，就可以把它註解掉。

• 圖片庫

• 小圖放在recent資料夾，注意檔名是png。大圖放在full資料夾，檔名是jpg。

• twitter is good

• 所在檔案：flat\templates\index.html

• 將這個頁面取消：找到下圖的，在前面加<!--，在後面加-->，就可以把它註解掉。

• 滑動圖片

• 所在檔案：flat\templates\index.html

替換影片：找到iframe標籤，如下，整個替換掉。

<iframe width="640" height="360" src="https://www.youtube.com/embed/pi0fqfK0jO8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>       

替換相片：到flat\static\images\slider，將裡面的3個檔案換掉。                        

• 選單

• 到127.0.0.1：8000/admin，裡面去增加。

有

Rich text page

Form

Gallery

Link

4種選項

備註：

Rich text page中，文字好像沒法給顏色，

設定也都整體設定，要分別設定的話，要自己改html。不方便。

• 網頁抬頭

• 所在檔案：flat\templates\base.html
• 找到標籤，修改。

                              <1>的標籤是<title>

                              <2>的標籤是<header>

<title>練習作業--埔里筊白筍</title>

<header class="navbar navbar-inverse navbar-fixed-top wet-asphalt" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                {% if settings.SITE_TITLE %}<a class="navbar-brand" href="https://sites.google.com/site/laomashizuo/sha-sai-de/shi-zuo-ri-zhi/django" target="_blank">作業練習--埔里筊白筍</a>{% endif %}
                {% if settings.SITE_TAGLINE %}<p class="navbar-text visible-lg">美人，美人，美人腿。</p>{% endif %}
            </div>

將mezzanine建立的內容推到heroku--以免費主題flat為例

***特別感謝鵬志好友，

提供whitenoise套件的方法，

讓我很快解決了staticfile的問題。

前置工作

• 先成功在本機安裝、執行mezzanine，請參考  這裡。
• 安裝whitenoise，這是處理staticfile的套件

pip install whitenoise

註：

1. 根目錄就是和manage.py相同的目錄
2. web18、web18toheroku是我的專案名稱和heroku上的app名稱，請改成你自己的。

本機上執行沒問題之後，再做以下步驟

添加檔案

• 在根目錄之下加三個檔案

1. runtime.txt:  就只是python的版本名稱，改成你的python版本。
2. requirements.txt：  在根目錄下，pip freeze > requirements.txt(打開檢查如果沒有gunicorn，請在最後一行加入。這個套件，本機不會用到，伺服器上要用到)
3. Procfile： 參考檔案內容(web: gunicorn web18.wsgi --log-file -)，web18是我的專案名稱，請改成你的。(請留意，有的編輯軟體會自動把它存成 .txt，這個檔案不可以有副檔名)

添加二個目錄

• 在根目錄下加一個目錄static，並且在裡面新增一個空檔案。(因為空資料夾git將不予理會，例如增加一個沒有內容的abc.txt檔。)
• 將 這裡 提到的免費主題中的flat目錄，複製到根目錄中。

修改兩個檔案

• 根目錄中有兩個檔案  .gitignore.txt  和  .hgignore 打開後，

1. 將「*.db」這幾個字刪除。也就是，dev.db是資料庫，也要上傳，否則會找不到資料表。
2. 將「/static」這幾個字刪除。因為我們要連staticfile都送上去，讓server 自動處理。
3. 存檔

heroku部份(都在根目錄操作)

• 登入heroku：  heroku login  (每次電腦重新開機後，都要重新登入)
  

按任意鍵後，會自動開啟瀏覽器登入，完成後，自己再回到命令列視窗。

• 在heroku 建app:  heroku create web18toheroku (名稱要夠亂才會通過，不取也可以，系統會給你一個怪怪的名稱)
• 建立git倉儲(repository)：   git init
• git 倉儲和heroku的app連結：  heroku git:remote -a web18toheroku
• 設定heroku上使用的語言：  heroku buildpacks:set heroku/python (一定要上面先建立連結，這行命令才有效)
  

settings.py的設定

• 在所有from ... import .. 之後，添加SECRET_KEY='1e9u0am@g^*^i6r*fiz1w@lel)2e6^_#ljq!na@*l!j*#*q69t'

請利用這個網站，產生自己的SECRET_KEY。(上面的key是範例)

• 主機名稱處填入你的主機名稱：  ALLOWED_HOSTS = ['web18toheroku.herokuapp.com']
• DATABASES中，填入下面的資訊

"ENGINE": "django.db.backends.sqlite3",

"NAME": "dev.db",

• 檢查以下路徑，必要時修改或新增。

STATIC_URL = "/static/"

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)  (必須是list 或tuple，所以那個小逗號是必須的)

• 在INSTALLED_APPS中，將 'flat' 插在第一筆
• 在MIDDLEWARE中，將  'whitenoise.middleware.WhiteNoiseMiddleware' 加在第一列

推上網站(都在根目錄操作)

1. git add .                               (將所有修正做註記，如果有出現任何訊息，請再執行一次，執行完成，不會出現任何訊息才對)
2. git commit -m "abc"          (建立本次修正的版本，雙引號內就是對版本的註解，內容自己決定)
3. git push heroku master
4. heroku open                      (以瀏覽器打開網頁)

以上3個步驟，只要有修改，都要再執行一次，再推上網站。

結果--成功了-->請看  (ps內容因實驗關係，改得亂亂的)

(p.s.用firefox開畫面比較正常)

---------------------------------------------------------------------------------------------------------
#當你了解以上步驟之後，你可以考慮參考下面簡要的步驟。加快你的布建速度。

先成功在本機執行  這裡。

pip install whitenoise

建立runtime.txt和Procfile到根目錄

pip freeze > requirements.txt(打開檢查如果沒有gunicorn，請在最後一行加入)

在根目錄下加一個目錄static，並且在裡面新增一個空檔案 abc.txt。
複製flat到根目錄中。

.gitignore.txt  和  .hgignore將「*.db」「/static」這幾個字刪除，存檔

heroku login

heroku create web18toheroku
git init
heroku git:remote -a web18toheroku
heroku buildpacks:set heroku/python

SECRET_KEY=  請利用這個網站
ALLOWED_HOSTS = ['web18toheroku.herokuapp.com']
"ENGINE": "django.db.backends.sqlite3",
"NAME": "dev.db",

STATIC_URL = "/static/"

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)  (必須是list 或tuple，所以那個小逗號是必須的)

在INSTALLED_APPS中，將 'flat' 插在第一筆
在MIDDLEWARE中，將  'whitenoise.middleware.WhiteNoiseMiddleware' 加在第一列

git add .                        
git commit -m "abc"   
git push heroku master
heroku open               

(p.s.用firefox開畫面比較正常)

把django網頁送上heroku這個免費的伺服器

ps本篇是接續  django 在本機上執行

--前提，

• 到heroku註冊一個帳號，不必登入也沒關係，因為操作不在網頁上，而是透過下面的CLI。

• 安裝git(heroku採用git發布網頁)，安裝heroku CLI，這裡，畫面如下。

(上方藍字是安裝git，右下方是安裝windows版的heroku CLI)

--先進到虛擬環境(請看上一篇)

先前的範例已經可以在本機上執行了，

先來準備額外的檔案

根目錄中要有3個檔案，requirements.txt，runtime.txt，Procfile

• runtime.txt內容就是python的版本，根據你自己的版本，3.7以上

• Procfile不可以有副檔名，內容如下

web: gunicorn herokuproj.wsgi --log-file -

(gunicorn套件本機不必安裝，但伺服器端要安裝。hefokuproj.wsgi在上一篇中有順便看過)

• requirements.txt的產生方式如下，

先用pip 指令打包已經安裝的所有套件，再用文字編輯器將gunicorn加入

開始傳送工作

--用heroku CLI登入，按任意鍵，開啟網頁登入。(登入後，網頁就可關閉，如果你已經在網頁登入了，按login就會自動完成登入。)

--在heroku建立app，名稱自取，這裡用uptoheroku1122。(盡量雜亂組合才會通過，不取名就自動給一個雜亂的名字)

上一篇提到，取好的名字，組合網站名稱，填入settings.py中

ALLOWED_HOSTS = ['uptoheroku1122.herokuapp.com',]

--建立本機app和heroku網站app之間的連結

--用git發布，app送上網站的三步驟(以後修改之後，也都是這三個步驟要做一次)

步驟1：git add .

步驟2：git commit -m "寫下這次修正的描述"(確認了本機上所有的改變)

步驟3：git push heroku master(將改變的結果推上網路的主編輯檔)

---會出一個錯，但也提供了解決方法，(collectstatic實在是很複雜，但是不用它好像也沒關係)

複製 heroku config:set DISABLE_COLLECTSTATIC=1，在命令列執行就好了。

然後重作步驟3

--打開瀏覽器看結果

還是出錯，因為在url.py中，並沒有指定對應的程式

因為網址不對，自己加上/post就可以了。

---------------------------------------------------------------------------------------------------------

#當你了解以上步驟之後，你可以考慮參考下面簡要的步驟。加快你的布建速度。

到heroku註冊一個帳號  https://www.heroku.com/

安裝heroku CLI   https://devcenter.heroku.com/articles/heroku-cli#download-and-install

安裝git   https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

python -m venv myenv

acitvate

requirements.txt

runtime.txt

Procfile

heroku login

heroku create herokuapp
git init
heroku git:remote -a herokuapp(這個名字一定不會過)
heroku buildpacks:set heroku/python

heroku config:set DISABLE_COLLECTSTATIC=1

在settings.py中

ALLOWED_HOSTS = ['herokuapp.herokuapp.com']

git add .
git commit -m "abc"   
git push heroku master
heroku open

在網址後加一下  herokuapp.herokuapp.com/post/