给个人博客添加后台管理友链与全站公告功能

创建于：2020/4/21发布于：2020/12/19文集：随笔

给个人博客网站添加了友情链接与全站公告通知功能，写篇文章记录一下。

首先考虑了使用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()每次只取最新的数据。使用方法同上。

效果图

关于网页结构

为了让页面显示协调一点，我花了不少时间，前端真的是博大精深（太难了）。

最开始我有两个base.html文件，一个有侧边栏，一个没有，按需要继承。
接着我将base.html修改，固定了侧边栏，放在{% block side %}{% endblock side %}中，并且将两个标签都放进去，在文章详情页面，侧边栏需要目录，目录下面用{% block.super %}来显示父级的内容。
之前想着让目录侧边栏随着鼠标滚动固定在页面上，而另两个侧边内容自动消失，使用bootstrap的滚动监听，不过后来发现侧边栏内容还是要多显示比较好，与全都放到粘性侧边栏里了。
最后还是只有一个base.html文件（写这篇文的时候发现我忘了删除没用的那个。。。），并且把侧边栏block给去掉了。

代码都放在了Github上，关注公众号在底部菜单查看Github地址。