給我的博客添加後臺管理友鏈與全站公告功能

給我的博客網站添加了友情連接與全站公告通知功能，寫篇文章記錄一下。

首先考慮了使用Django的模板標籤，也是爲了練練手，相關知識能夠去查看Django官方文檔。下面是具體實現。

友情連接功能

模型

其實友情連接直接在首頁頁面html裏面寫就能夠（到如今我尚未友鏈呢~），可是我想經過後臺來管理這個數據，索性專門建了個名爲extras的app。

python manage.py startapp extras

編輯models.py文件：

from django.db import models
from model_utils.models import TimeStampedModel
from django.utils.translation import gettext_lazy as _

# Create your models here.
class FriendLink(TimeStampedModel):
    site_name = models.CharField(_('site_name'), max_length=100)
    site_domain = models.URLField(_('site_domain'))

    def __str__(self):
        return self.site_name

TimeStampedModel是一個提供自更新的建立與修改字段的抽象基類。這裏的gettext_lazy是用來作國際化的，對個人小破站其實沒什麼用，之因此有這個是由於這段是我從追夢人物的開源代碼上覆制來的，懶得改了。

寫完代碼可別忘了模型遷移。

模板標籤

這裏使用的是包含標籤，首先要在app目錄下建立templatetags目錄，並在其中建立__init__.py文件使之成爲一個包。接着建立sidebar_tags.py，在其中編寫咱們的Python代碼。

from django import template
from ..models import FriendLink


register = template.Library()

@register.inclusion_tag('inclusions/_friend_link.html', takes_context=True)
def show_friend_links(context, num=5):
    friend_link_list = FriendLink.objects.all()[:num]
    return {
            'friend_link_list': friend_link_list
    }

默認顯示5條數據，Django模板標籤能夠接收參數，像{% show_friend_links 5 %}這樣使用。

注意這裏使用的是包含標籤，@register.inclusion_tag('inclusions/_friend_link.html', takes_context=True)在裝飾器裏寫上了須要包含的模板路徑。包含標籤經過渲染這個包含的模板去顯示數據。

因此要在放置模板的templates文件夾中新建相應的文件：

<div class="card mb-4 hvr-glow" style="display: flex">
    <div class="card-body">
        <p class="card-title text-muted">
            <i class="fas fa-link" style="color: lightpink;"></i> 友情連接
        </p>
        {% if friend_link_list %}
            {% for link in friend_link_list %}
            <p class="card-text hvr-forward col-12">
                <a href="{{ link.site_domain }}" target="_blank" class="text-muted no-underline">
                    {{ link.site_name }}
                </a>
            </p>
            {% endfor %}
        {% endif %}
    </div>
</div>

用了bootstrap的card樣式，仍是比較好看的。

接下來在須要使用的地方用{% load sidebar_tags %}載入標籤，在須要添加的地方使用{% show_friend_links %}就能夠了。

全站公告功能

一樣，這個也放到擴展功能app裏面去。

模型

class SiteMessage(TimeStampedModel):
    content = models.TextField(verbose_name="正文")
    
    class Meta:
        verbose_name_plural = '通知'

    def __str__(self):
        return self.content[:20]

一樣使用TimeStampedModel免得寫建立時間，程序員就是要偷懶，啦啦啦~

一樣地在寫完後要遷移。

標籤

# 要加上導入這個SiteMessage類
from ..models import FriendLink, SiteMessage


@register.inclusion_tag('inclusions/_site_message.html', takes_context=True)
def show_site_message(context):
    try:
        message = SiteMessage.objects.last()
        data = {
                'content': message.content.replace("\r\n", "<br/>"),
                'created': message.created.strftime("%Y/%m/%d"),
        }
    except:
        data = {
                "content": "o(╥﹏╥)o服務器鏈接失敗~"
        }
    return data

經過SiteMessage.objects.last()每次只取最新的數據。使用方法同上。

效果圖

關於網頁結構

爲了讓頁面顯示協調一點，我花了很多時間，前端真的是博大精深（太難了）。

1. 最開始我有兩個base.html文件，一個有側邊欄，一個沒有，按須要繼承。
2. 接着我將base.html修改，固定了側邊欄，放在{% block side %}{% endblock side %}中，而且將兩個標籤都放進去，在文章詳情頁面，側邊欄須要目錄，目錄下面用{% block.super %}來顯示父級的內容。
3. 以前想着讓目錄側邊欄隨着鼠標滾動固定在頁面上，而另兩個側邊內容自動消失，使用bootstrap的滾動監聽，不事後來發現側邊欄內容仍是要多顯示比較好，與全都放到粘性側邊欄裏了。
4. 最後仍是隻有一個base.html文件（寫這篇文的時候發現我忘了刪除沒用的那個。。。），而且把側邊欄block給去掉了。

代碼都放在了Github上，關注公衆號在底部菜單查看Github地址。

掃碼關注公子政的宅平常第一時間查看最新推送：