个人网站搭建（Day 10）— 博客页面右侧小栏，博文搜索功能的实现

在写了好几篇博文后，查看博客列表的页面的时候，便会发现有点过于单一，仔细思考，我们可以在右侧添加一个区域来添加不同的功能，使得我们的博客页面不会过于单调。

说干就干，我们目前添加的三个功能分别是博文搜索，作者推荐以及随机推荐，后续想到其他有趣的Ideas再更新上去，这里先说说三个功能的实现：

1.博文搜索

功能的话我们做的比较简单，仅仅是查找标题中包含我们搜索的关键字的博文，不过也基本能够满足我们的需求。

1. urls设计：

path('search_blog/', views.search_blog, name = 'search_blog'),

2 后台视图函数：

def search_blog(request):
    try:
        wd = request.GET['wd']
        if not wd:
            return HttpResponseRedirect(reverse('blog:blog_index'))
    
        blogs = Blog.objects.filter(caption__icontains=wd)
        pages, blogs = getPages(request, blogs)
        return blog_list_show(request, pages, blogs)
    except Exception:
        raise Http404

3. 前端代码设计：

<div class="col-md-3" style="float:left; padding:0px; margin-bottom: 10px">
    <form action="{% url 'blog:search_blog'%}">
        <input name="wd" type="text" placeholder="  查找博客" class="form-control-button">
        <button type="submit"> <span class="glyphicon glyphicon-search"></span>
    </button>
    </form>
</div>

2. 随机推荐与作者推荐

这两个功能比较简单，封装成两个函数处理即可

1. 后台视图函数：

def random_recommend():
    blogs = Blog.objects.all()
    num = 7 if len(blogs) >= 7 else len(blogs) 
    random_blogs = random.sample(list(blogs), num)
    return sorted(random_blogs, key=lambda x: x.publish_time, reverse=True)

def author_recommend():
    blogs = Blog.objects.filter(recommend=True)
    num = 7 if len(blogs) >= 7 else len(blogs) 
    author_blogs = random.sample(list(blogs), num)
    return sorted(author_blogs, key=lambda x: x.publish_time, reverse=True)

def blog_list_show(request, pages, blogs):
    random_blogs = random_recommend()    
    recommend_blogs = author_recommend()

    context = { 
        'blogs': blogs, 
        'pages': pages,  
        'random_blogs': random_blogs, 
        'recommend_blogs': recommend_blogs,
    }
    return render(request, 'blog/blog_list.html', context)

前端显示：

<div class="col-md-3" style="float:left; padding:0px">
    <div class="blog-border">
        <div class="blog-title" style="padding: 10px; margin: 0px">
            <span class="lnr lnr-book"></span> 作者推荐
            <hr/ style="margin: 5px">
        </div>
        {% for blog in recommend_blogs %}
        <div style="padding-left: 10px">
            <a href="{% url 'blog:blog_show' blog.id %}" style="color: #4682b4">
              {{ blog.caption|truncatechars:20 }}
            </a>
        </div>
        {% endfor %}
        <br/>
        <div class="blog-title" style="padding: 10px; margin: 0px">
            <span class="lnr lnr-book"></span> 随机推荐
            <hr/ style="margin: 5px">
        </div>
        {% for blog in random_blogs %}
        <div style="padding-left: 10px">
            <a href="{% url 'blog:blog_show' blog.id %}" style="color: #4682b4">
              {{ blog.caption|truncatechars:20 }}
            </a>
        </div>
        {% endfor %}
        <br/>
    </div>
</div>

修改后的效果：

个人网站搭建（Day 10）— 博客页面右侧小栏，博文搜索功能的实现

看起来还是挺不错的2333 վ'ᴗ' ի

个人网站搭建（Day 10）— 博客页面右侧小栏，博文搜索功能的实现

相关推荐