從無到有建立CMS-Blog

部落格

從無到有建立CMS-Blog

新建 CMS 專案（以 MAC 為例）

1. Install Django CMS

首先使用 terminal 先建立一個虛擬環境：

conda create -n DjangoCMS python=3.7

(其中「DjangoCMS」可以自己改名，Python 環境是使用 python 3.7)

進入該虛擬環境：

conda activate DjangoCMS

2. 下載 djangocms-installer，並創建新的資料夾，並進入

pip install djangocms-installer
mkdir tutorial-project
cd tutorial-project

3. 創建一個名稱為 mysite 的新專案

djangocms mysite

4. runserver

python manage.py runserver

接著在你的瀏覽器輸入 http://localhost:8000/，此時應為登入畫面，輸入帳號：admin、密碼：admin 之後，進入頁面就代表安裝成功啦！

Template 樣式設定

網路上有些地方提供已經做好的 template (模板)，可以到 w3layout 下載喜歡的。下載完，將載下來的資料夾打開，其中 index.html 為主要 html 存放的地方，而其他檔案如：css、fonts、images，存的是網頁排版、字體、影像檔。

首先，先將 html 檔(這裡是 index.html )放入創建好的 CMS 專案中，放入的位置是: /你的專案名稱/templates (這裡是：/mysite/templates) 並把 index.html 重新命名為 base.html。接著，將其他檔案(css、fonts、images)放入創建好的 CMS 專案中，放入的位置是: /你的專案名稱/static (這裡是/mysite/ static)

接下來我們需要編輯

首先在檔案的一開頭我們需要 load 相關的 tags 進來

{% load cms_tags menu_tags seikizai_tags staticfiles %}

接著分別在 head 的結尾與 body 的一開始與 body 結尾的上端分別加入以下程式碼

<html>
<head>
{% render_block “css” %}
</head>
<body>
{% cms_toolbar %}
{% render_block “js” %}
</body>
</html>

但是現在回到頁面重整後卻還是和之前相同，因為我們需要更改檔案抓取的路徑，將原本的 href = '...'、src = '...';，改成如下{% static "css/bootstrap.css" %}，是 Django 提供的 tag ，目的就是要匯入剛剛我們複製去的 files。「css/bootstrap.css」則是路徑，圖檔也是使用相同的方式。(ex: src="{% static 'image/ab.png' %}")

這個時候我們回到 browser 重新整理後，就可以看到漂漂亮亮的頁面！

Blog 的應用

1. Basic installation

 pip install aldryn-newsblog

2. Django settings

(1).把以下加入 settings.py 的 INSTALLED_APPS，有可能某些已經有，則不需要重複加入

# you will probably need to add:
 'aldryn_apphooks_config',
 'aldryn_boilerplates',
 'aldryn_categories',
 'aldryn_common',
 'aldryn_newsblog',
 'aldryn_people',
 'aldryn_reversion',
 'djangocms_text_ckeditor',
 'parler',
 'sortedm2m',
 'taggit',

# and you will probably find the following already listed:
  'easy_thumbnails',
  'filer',
  'reversion',

(2).THUMBNAIL_PROCESSORS

 THUMBNAIL_PROCESSORS = (

     'easy_thumbnails.processors.colorspace',
     'easy_thumbnails.processors.autocrop',
     # 'easy_thumbnails.processors.scale_and_crop',  # disable this one
     'filer.thumbnail_processors.scale_and_crop_with_subject_location',
     'easy_thumbnails.processors.filters',

)

(3).ALDRYN_BOILERPLATE_NAME

  ALDRYN_BOILERPLATE_NAME='bootstrap3'

(4).STATICFIKLES_FINDERS

STATICFILES_FINDERS 並未在 settings.py 裡，複製貼上即可

 STATICFILES_FINDERS = [
     'django.contrib.staticfiles.finders.FileSystemFinder',
     'aldryn_boilerplates.staticfile_finders.AppDirectoriesFinder',
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
 ]

3. Migrate the database

  python manage.py migrate

4. Apphook

(1).找個適當的樣板，將想要顯示文章的區域加入 {% block content %}{% endblock content %}，這個 block 會在 Apphook 後顯示出文章清單 (2).使用改好的樣板，開啟 server 創建一個使用此樣板的頁面，然後進入頁面高級設定，模板選擇剛剛使用樣板的 html ，再將「應用」選擇「News&Blog」。 (3).如果資料庫有文章的話，就會有文章清單出現在我們剛剛挖好{% block content %}的地方另外，此 Blog Plugin 支援讓一個網站擁有不只一個 Blog ，創建一個新的頁面再 Apphook 一次，因此可以去「應用程序設定」選擇或新增新的設定值來當作不同的 Blog，可以在不同的 Blog 下新增不同的文章。

更改 Blog 樣式

Apphook 整個 Blog 功能進來後，會發現預設的樣式太單調，因此我們需要來更改一下套件的樣板來美化一下，以下介紹如何快速更改樣式。

1. 因為可以有不只一個 Blog，因此也支援不同 Blog 頁也可以有不同的樣式。先去「應用程序設定」新增了一個想要的名字(假設命名為 blog)，然後在「PREFIX FOR TEMPLATE DIRS」的值(預設是空白)，改成前面的命名(例如 blog)

2. 因為樣板指向變了的關係，Django 找不到樣板來 render，因此網站會壞掉，所以要在指定路徑上先創好 Plugin 樣板組。在 templates 資料夾下創一個 aldryn_newsblog 資料夾，然後再創一個剛剛在「PREFIX FOR TEMPLATE DIRS」設定值一樣名子的資料夾(例如 blog)，並將套件內預設的所有樣板複製過去。 (套件預設的樣板可在[虛擬環境位置]/lib/python3.7/site-packages/aldryn_newsblog/templates/aldryn_newsblog/預設的 html)

3. 這樣只要編輯這個資料夾內的 html 檔，網頁上樣式就會改變(備註: Blog 設定的”PREFIX FOR TEMPLATE DIRS” 是 “blog” 的才會變)。接下來就先改 Blog 清單頁的樣式，編輯 article_list.html 更改成自己想要的即可。

如此一來，就能打照自己喜歡的樣式囉！

點擊立即下載此篇文章 PDF

稍後下載閱讀，或與好友分享

留言

f5t87g6d8ty45d@gmail.com

請問,有影片教學嗎? 有問題的地方: ------------------------ https://drive.google.com/file/d/1eq9AnlAQf5AOX8qR3g77Ruxgxzm8S5wr/view?usp=drive_link https://drive.google.com/file/d/1WTo0YLHXc-NRduNe7EHE6q_aeT2dJpn1/view?usp=drive_link --------------------------

nsjzqbv@outlook.com

從無到有建立CMS-Blog - blog tbthlbkhp http://www.g46927y7n776lwn32p93y4oyie7m9glps.org/ <a href="http://www.g46927y7n776lwn32p93y4oyie7m9glps.org/">atbthlbkhp</a> [url=http://www.g46927y7n776lwn32p93y4oyie7m9glps.org/]utbthlbkhp[/url]

pcjctrn@outlook.com

從無到有建立CMS-Blog - blog [url=http://www.ge2515v2v4j2k6ntpwp398m6ox5034qms.org/]uclwxpgejxz[/url] clwxpgejxz http://www.ge2515v2v4j2k6ntpwp398m6ox5034qms.org/ <a href="http://www.ge2515v2v4j2k6ntpwp398m6ox5034qms.org/">aclwxpgejxz</a>

Bom-Joit25@trytrip.click

Just here to explore discussions, exchange ideas, and pick up new insights along the way. I'm interested in learning from different perspectives and sharing my input when it's helpful. Interested in hearing new ideas and meeting like-minded people. There's my website-<a href="https://automisto24.com.ua/">AutoMisto24</a> https://automisto24.com.ua/

vaauowu@outlook.com

從無到有建立CMS-Blog - blog tdfmmkqfln http://www.g7lkmb98n0uqlm2493w96jk8385s7y8ds.org/ [url=http://www.g7lkmb98n0uqlm2493w96jk8385s7y8ds.org/]utdfmmkqfln[/url] <a href="http://www.g7lkmb98n0uqlm2493w96jk8385s7y8ds.org/">atdfmmkqfln</a>

部落格