智慧生活科技專業社群: #將mobirise產生的網頁，融入django。

2019年12月29日星期日

#將mobirise產生的網頁，融入django。

摘要：
1. 在mobirise中拉一拉模組，再調一下模組內的小零件，漂亮的網頁架構就好了。
2. 用notepad++的巨集功能，一鍵搞定調整的工作，融入django環境
3. django本身的必要設定，urls.py，views.py

上面3個步驟，django就有一個自建的主題網頁出來了。

至於要什麼功能，就看使用者自己加囉！

***開始工作***
#1 mobirise的操作

(介紹文)

成果是會產生一些html檔案和一個assets資料夾，

拷貝到django相關目錄，如下。(這裡的專案叫forgo)

其中html檔，檔名是mobirise因增刪而自動調整出來的，
需要的話也可以自行修改，但也要把檔案內的連結一起修改。(需要的話，參考下面notepad++<2>的方法)
這裡是上面檔案的 zip檔，你也玩玩看，超連結請按GO喔。

#2 notepad++部份的操作

<1>在notepad++中把

index.html
page5.html
page6.html
page7.html
page8.html

打開編輯，如下圖(其它檔案請先關閉，因為要做多檔案的取代)

<2>取代方法一律使用「在所有開啟文件中取代」

取代的內容如下，

第一部份html超連結的取代

index.html--> /
page5.html--> /5/
page6.html--> /6/
page7.html--> /7/
page8.html--> /8/

第二部份css，js，jpg，png等靜態檔案的取代

<!DOCTYPE html> --> <!DOCTYPE html>{% load static %}
"assets --> "{% static "assets
.jpg" --> .jpg" %}
.png" --> .png" %}
.js" --> .js" %}
.css" --> .css" %}

(已經完成調整html檔案的 zip檔案，你也玩玩看。)

操作範例圖示

notepad++操作小結：

將以上<2>的步驟錄製成巨集，日後如果在mobirise中有修改，只要執行巨集，就能立即融入django中使用。

如下圖顯示，已經錄製儲存成mobirise2djago巨集，

日後如果要再執行以上的取代步驟，只要點選 mobirise2django的巨集即可。

#3 django部份的操作

--建立好自己的project和app

--在urls.py中加入

#myapp是你自己的app名稱
from myapp.views import page5,page6,page7,page8,index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',index),
    path('5/',page5),
    path('6/',page6),
    path('7/',page7),
    path('8/',page8),
]

**以上都是放在網址下第一層，你也可以自行調整，例如path('5/6/',page6)
**views中的名字都取和html一樣的檔名，方便管理。

--在views.py中加入

def index(request):
    pass
    return render(request,"index.html")
def page5(request):
    pass
    return render(request,"page5.html")
def page6(request):
    pass
    return render(request,"page6.html")
def page7(request):
    pass
    return render(request,"page7.html")
def page8(request):
    pass
    return render(request,"page8.html")

以上只是測試連結，沒有任何動作，要有什麼功能，就要自己加囉！

#完成