基于阿里egg框架搭建博客（5）——置顶导航条

相关文章

基于阿里egg框架搭建博客（1）——开发准备
基于阿里egg框架搭建博客（2）——Hello World
基于阿里egg框架搭建博客（3）——注册与登录
基于阿里egg框架搭建博客（4）——权限控制
基于阿里egg框架搭建博客（5）——置顶导航条
基于阿里egg框架搭建博客（6）——浏览、发表文章
基于阿里egg框架搭建博客（7）——编辑文章

git

https://github.com/ZzzSimon/egg-example
喜欢就点个赞吧！

正文

模板继承

导航条是博客不可或缺的一部分，几乎每一个页面都有置顶导航条。我们不可能在每个页面都复制一份相同的代码，因为这样代码变得冗余，而且当需要修改导航条时，改动量会非常之大。所幸的是，我们使用了nunjucks作为view模板，其提供的模板继承功能可以解决这个问题。

官方文档：https://nunjucks.bootcss.com/templating.html#part-2cf2ea1f8614528d

页面设计

功能设计

如页面设计图中所示，导航条共有6块功能：

1. 站点名称，点击后可以回到首页
2. 文章按钮，点击后可以查看文章列表
3. 搜索框，可以按文章名称搜索文章
4. 发表文章按钮，顾名思义，可以发表博文
5. 用户头像下拉按钮，我的文章可以查看自己的文章或重新编辑
6. 设置，可以修改个人信息
7. 注销，注销用户，删除session，返回登录

父模板parent.tpl代码（包含导航条）

我们创建/app/view/parent.tpl文件：

    
    
    
    {% block head %}{% endblock %}




    

        

            

                妖云小离
            

            

                

                    
文章
                    

                        预留 
                        

                            
Action
                            
Another action
                            
Something else here
                            

                            
Separated link
                            

                            
One more separated link
                        
                    
                
                

                    

                        
                        
                            
                                
                            
                        
                    
                
                

                    
 发表文章
                    
                    

                        
                            
                            
                        

                            
我的文章
                            
设置
                            

                            
注销
                        
                    
                
            

        
    



    {% block content %}{% endblock %}



{% block script %}{% endblock %}

父模板中可以继承重写的地方有3处：

1. 标签处，可以添加 {% endblock %} {% block content %}
   hello ! {{user.username}} {{helper.formatTime(time)}}
   {% endblock %}

   HomeController

   我们在/app/controller/home.js中添加以下内容：

       async index() {
           const {ctx, service} = this;
               const userInfo = ctx.session.user;
               ctx.logger.info('session:: %j',userInfo);
               await ctx.render('home/home.tpl',
                   {
                       time: new Date(),
                       user:userInfo
                   });
       }
   

   router.js

   我们在/app/router.js中添加以下内容：

   router.get('/', controller.home.index);
   

   结果

   打开浏览器输入http://127.0.0.1:7001，即可看到如页面设计中的图。

   结尾

   如果看完觉得有用，请给作者一个喜欢吧！谢谢啦！