自行設計網站

教學FileZilla，上傳、下載

點選螢幕左下角，開啟如圖FileZilla

image-1680746935442.png

開啟點選後，點選坐上角站台管理員

image-1680747224087.png

設定主機、使用者、密碼，設定完按下確定

image-1680747544593.png

如圖按下確認

image-1680747695561.png

進入成功後會連線到遠端站台。
備註：紅色匡是本地站台{你目前所在的目錄位址}
           紫色匡是遠端站台{遠端所在的目錄位址}

image-1680747924050.png

把設定遠端{1}的html下載到本機{2}
備註：請注意路徑一定要正確

image-1680762929188.png

把設定完本機{1}的html上傳到遠端{2}
備註：請注意路徑一定要正確

image-1680762866892.png

完成後請往下一張

登入Epower的管理後台

首先請先登入EPower給予的網址，輸入給予您的帳號與密碼。

image-1680751468313.png

點選擇您的服務

image-1680751590442.png

點選進去後➝基本設定➝選擇您要的設定

image-1681264520486.png

登入到以下畫面完成。

image-1681264308776.png

完成後請往下一張

如何切頁頭、頁尾

首先請先點開家目錄➝點如圖資料夾{templates➝t4}➝點選如圖index.html

image-1680758745266.png

image-1680758802473.png

image-1680759564631.png

首先處理頁頭如圖把文字複製起來{<head></head>}➝
備註：頁頭的部份

新增分頁把剛剛複製的貼上，按下存檔

image-1680760255500.png

image-1680760262292.png

image-1680760406698.png

如圖輸入檔名.html➝按下Save

image-1680760682756.png

再回到剛剛index.html檔把複製的刪掉➝新增 {% include 'header.html' %}

image-1680761129548.png

首先處理頁頭如圖把文字複製起來{<footer></footer>}➝
備註：頁尾的部份，往下拉到底

新增分頁把剛剛複製的貼上，按下存檔

image-1680761381392.png

image-1680761567144.png

image-1680761716405.png

如圖輸入檔名.html➝按下Save

image-1680761833296.png

再回到剛剛index.html檔把複製的刪掉➝新增 {% include 'footer.html' %}

image-1680761961436.png

完成後請往下一張

如何處理路徑

切完頁頭、頁尾後登入網址，還是沒辦法有完整頁面，需要把圖片路徑改正

image-1680854920845.png

首先請先點header.html

image-1680855109810.png

點選搜尋css/，插入{{ templates }}，插入完所有{{ templates }}/後，存檔上傳到遠端
備註：搜尋時請查找assets/、js/、css/、images/等等，前面部要有網址，
存檔後上傳到遠端注意路徑要一致

image-1680855309765.png

image-1680855472658.png

首先請先點footer.html

image-1680855910427.png

點選搜尋js/，插入{{ templates }}，插入完所有{{ templates }}/後，存檔上傳到遠端
備註：搜尋時請查找assets/、js/、css/、images/等等，前面部要有網址，
存檔後上傳到遠端注意路徑要一致

image-1680855949745.png

image-1680856084998.png

首先請先點index.html

image-1680856295042.png

點選搜尋images/，插入{{ templates }}，插入完所有{{ templates }}/後，存檔上傳到遠端
備註：搜尋時請查找assets/、js/、css/、images/等等，前面部要有網址，
存檔後上傳到遠端注意路徑要一致

image-1680856394435.png

image-1680856591678.png

上傳完後重新登入網址，看是否成功有完整頁面

image-1680856757071.png

套用資料庫參數

首先請點開footer.html
備註：已footer.html為範例

image-1680847725770.png

一般參數：
備註：選好要更改的地方，套用資料庫裡的參數

原本：
備註：選好要更改的地方，準備套用資料庫裡的參數

image-1680848128686.png

更改後：
備註：插入
{{ cms_about_us_f00 }}      
{{ cms_about_us_f03 }}
{{ cms_social_link_f03 }}    

image-1680848029697.png

圖片：


原本：

image-1680848520020.png


更改後：

image-1680848565618.png

迴圈：
備註：選好要更改的地方，套用資料庫裡的迴圈參數

原本：
備註：準備套入迴圈參數

image-1680849315714.png

更改後：
備註：插入
{% for cms_menu_c in cms_menu_c_list %}
<li><a href="{{ cms_menu_c.f02 }}"><span class="fa fa-chevron-right mr-2"></span>{{ cms_menu_c.f00 }}</a></li>
{% endfor %}

image-1680849099286.png

圖片：


原本：

image-1680849745195.png

更改後：

image-1680849779782.png

完成後請往下一張

選單管理

選單管理➝主選單
{% for cms_menu_a in cms_menu_a_list %}
     $cms_menu_a_list[]
{% endfor %}

選單管理➝頁底選單1
{% for cms_menu_b in cms_menu_b_list %}
     $cms_menu_b_list[]
{% endfor %}

選單管理➝頁底選單2
{% for cms_menu_c in cms_menu_c_list %}
     $cms_menu_c_list[]
{% endfor %}

 

header

網站標題
{{ cms_config_f00 }}

網站Logo
{{ cms_config_f02 }}

公司電話
{{ cms_config_f06 }}

 關於我們➝聯絡地址
{{ cms_about_us_f05 }}

社群連結➝FB官方連結
{{ cms_social_link_f00 }}

社群連結➝Twitter官方連結
{{ cms_social_link_f03 }}

社群連結➝LINE官方連結
{{ cms_social_link_f04 }}


選單管理➝主選單
{% for cms_menu_a in cms_menu_a_list %}
{% endfor %}

 

首頁index

首頁廣告➝廣告管理
{% for cms_banner_admin in cms_banner_admin_list %}
{% endfor %}

基本設定➝累積成果
{% for cms_marketing in cms_marketing_list %}
{% endfor %}

客戶回饋➝回饋管理
{% for cms_feedback_admin in cms_feedback_admin_list %}
{% endfor %}

團隊成員➝團隊管理
{% for cms_team_admin in cms_team_admin_list %}
{% endfor %}

最新消息➝文章管理
{% for cms_news_admin in cms_news_admin_list %}
{% endfor %}

案例分享➝案例管理
{% for cms_case_admin in cms_case_admin_list %}
{% endfor %}

方案計畫➝方案管理
{% for cms_pricing_admin in cms_pricing_admin_list %}
{% endfor %}

產品特色➝特色管理
{% for cms_feature_admin in cms_feature_admin_list %}
{% endfor %}

合作夥伴➝夥伴管理
{% for cms_customers_admin in cms_customers_admin_list %}
{% endfor %}

 

 

 

footer

基本設定➝關於我們➝公司名稱
{{ cms_about_us_f00 }}

基本設定➝關於我們➝公司簡介
{{ cms_about_us_f03 }}

選單管理➝頁底選單2
{% for cms_menu_c in cms_menu_c_list %}
{% endfor %}

選單管理➝頁底選單1
{% for cms_menu_b in cms_menu_b_list %}
{% endfor %}

社群連結➝FB官方連結
{{ cms_social_link_f00 }}

社群連結➝IG官方連結
{{ cms_social_link_f01 }}

社群連結➝YouTube官方連結
{{ cms_social_link_f02 }}

社群連結➝Twitter官方連結
{{ cms_social_link_f03 }}

社群連結➝LINE官方連結
{{ cms_social_link_f04 }}

基本設定➝關於我們➝聯絡地址
{{ cms_about_us_f05 }}

基本設定➝網站設定➝聯絡電話
{{ cms_config_f06 }}

基本設定➝網站設定➝客服信箱
{{ cms_config_f05 }}

基本設定➝關於我們➝公司名稱
{{ cms_about_us_f00 }}

 

最新消息

最新消息➝文章管理
{% for cms_news_admin in cms_news_admin_list %}
{% endfor %}

 

 

服務項目

服務項目➝項目管理
{% for cms_services_admin in cms_services_admin_list %}
{% endfor %}

服務項目➝項目管理➝名稱
{{ cms_services_admin.f00 }}

服務項目➝項目管理➝簡介
{{ cms_services_admin.f01 }}

服務項目➝項目管理➝圖片
{{ cms_services_admin.f02 }}

 

常見問題

常見問題➝問題管理
{% for cms_faq_admin in cms_faq_admin_list %}
{% endfor %}

團隊成員➝團隊管理
{% for cms_team_admin in cms_team_admin_list %}
{% endfor %}

關於我們

基本設定➝累積成果
{% for cms_marketing in cms_marketing_list %}
{% endfor %}

客戶回饋➝回饋管理
{% for cms_feedback_admin in cms_feedback_admin_list %}
{% endfor %}

案例分享➝案例管理
{% for cms_case_admin in cms_case_admin_list %}
{% endfor %}

 

 

聯絡我們

聯絡我們➝公司地址
{{ cms_contact_us_f01 }}

聯絡我們➝客服信箱
{{ cms_contact_us_f04 }}

聯絡我們➝公司電話
{{ cms_contact_us_f02 }}

社群連結➝FB官方連結
{{ cms_social_link_f00 }}

社群連結➝IG官方連結
{{ cms_social_link_f02 }}

社群連結➝YouTube官方連結
{{ cms_social_link_f02 }}

社群連結➝Twitter官方連結
{{ cms_social_link_f03 }}

社群連結➝LINE官方連結
{{ cms_social_link_f04 }}

補充1：查詢資料庫參數

請點選左側按到基本設定的網站設定
備註：已網站設定為例

image-1680752226095.png

如圖新增資料➝確認完再按確認

image-1680753662749.png

複製上方網址的參數

image-1680752662026.png

到PHP資料庫把剛剛複製參數{1}貼上，點選參數{2}

image-1680753038738.png

點選後進入參數裡的資料做查看
備註：紅匡是後台{Epower}輸入資料的參數欄位

image-1680753459853.png

完成後請前往下一張

教學主選單連結

進入網頁，主選單對應的連結是錯誤的，要去做修正
備註：已ABOUT為例，點選進入，會跳出錯誤資訊

image-1681258813044.png

image-1681258820257.png

如何把對應位址找出來，首先打開家目錄，對應如圖複製index.php內容
備註：通常圖上其他.php是沒有的，只會有index.php，要去做新的.php

image-1681259676099.png

在空白地方貼上，複製index.php，會跳出如圖，再把檔名修改，按鍵盤enter
備註：創建新的php

image-1681260286383.png

成功後如圖，點選如圖

image-1681261070309.png

請修改about-us.html，確認好後存檔
備註：原本是index.html

image-1681261441969.png

上傳到遠端站台
備註：注意好對應路徑位址

image-1681261632511.png

接下來html，請先到您對應目錄位址，點選如圖
備註：

image-1681262152149.png