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

相关文章

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

git

https://github.com/ZzzSimon/e...
喜欢就点个赞吧!

正文

模板继承

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

官方文档: https://nunjucks.bootcss.com/...

页面设计

功能设计

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

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

父模板parent.tpl代码(包含导航条)

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




    
    
    
    {% block head %}{% endblock %}




{% block content %}{% endblock %}
{% block script %}{% endblock %}

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

  1. 标签处,可以添加</code>和一些<code>静态资源</code>,此处需要注意的是,父模板中已经引入的静态资源,如bootstrap,<strong><em>不要</em></strong>再次在子模板中重复引用,否则有可能会不生效。</li> <li> <code><div class="container"></code>标签处,此处可以理解为<code><body></code>中的内容,为页面的主要内容。</li> <li> <code><script></code>标签处,可以添加js代码。</li> </ol> <h2>首页home.tpl继承parent.tpl</h2> <p>我们创建<code>/app/view/home/home.tpl</code>文件:</p> <pre><code>{% extends "parent.tpl" %} {% block head %} <title>首页 {% 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,即可看到如页面设计中的图。

    结尾

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

你可能感兴趣的:(node.js,html5,css,javascript)