不通过客户端js如何优美的实现导航高亮?
发布于 3年前 作者 darklowly 1206 次浏览

RT

8 回复

导航设置成链接,给链接设置css

就那cnode社区来说吧,假设每个主题都有分类 假设有 代码 设计 测试这三个吧! 这部分可以动态添加. 所有分类的先后顺序都通过该分类的热度来计算。

那么可以很简单的设计一个URL模式, / 主页,显示所有主题 /channel/设计 “设计”子类,显示设计相关的主题 /channel/编码 “编码”子类,显示编码相关的主题 /channel/测试 “测试”子类,显示测试相关的主题 /channel/其他 其他的子类可以在后台添加

这里是一个需要高亮显示的地方,而且是可以后台添加

还有就是在显示分类下面的主题的时候,假设url模式是/topic/id 每个主题隶属于一个分类 所以在显示某一个主题的时候 需要通过主题的分类来高亮当前导航

这种情况下该如何优美的处理?不可能每次渲染模版的时候都把从数据库里面获取的分所有分类和通过主题获取的当前分类都传到模版当中去渲染吧 感觉不够简洁,明了。

@darklowly 两个方法:

#{#id} { color: #FFFFFF; background-color: #000000 }

或者在模版里在输出主题的循环里加个判断 jade:

if key = id 
  a.active= value
else
  a = value

@saighost 下面的言论有可能是因为我自己没有听懂你的话 造成的

我说的导航类似于verycd.的导航 在点击某个分类的时候例如: 分类 的时候高亮该分类 在点击主题的时候同样高亮该分类

因为导航是通动态根据热点排序,所以每次导航的生成应该是从数据库里面去拿。并且导航应该是通用,所以应该放到layout里面去。

那么现在问题来了。在生成每一个页面的时候,那怕是注册,登录页面的时候都需要去拿导航的数据,并且每次渲染的时候,都需要把导航的数据传入到模版页面,我觉得这一点上有点麻烦。有没有简洁的办法?还有另外一个问题就是,在每一个模版页面里面拿到当前的分类以后,还要把拿到的结果放到layout里面去判断,而且每个页面都需要这样。我也觉得这一点上有点麻烦。

@darklowly 你说的导航的数据传入到模版页面的问题可以用express的“Route Param Pre-conditions”解决也可以用helper解决。 比较的代码和导航栏我一般是放在layout里了,一个版式也只需要一个layout啊。

@darklowly 这个是我在layout里用于显示错误信息的代码,也许可以帮你理解一点。

.container
      if typeof(err)!='undefined'&&err!=null
        != partial('error', err);

@saighost 谢谢先,你说的这方法我之前考虑过。但是我感觉会破坏代码结构。心里始终觉得不那么纯洁,有点不舒服。可能是我太极端了,想寻找一种看起来非常简单。而且代码看起来分场顺畅的方法吧。

@darklowly 可以看看express-messages的实现方式,将导航包装一下。

回到顶部