Thread: [Cppcms-users] Navigation template - Set "active" on corresponding entry

Brought to you by: artyom-beilis

cppcms-users

[Cppcms-users] Navigation template - Set "active" on corresponding entry

From: <jo...@em...> - 2020-10-12 20:26:29

Hi guys!

I started evaluating CppCMS for a project a few days ago. Right now I am trying to build a very simple user management back-end as a proof of concept.


I am implementing a simple portal using CppCMS. The master page has a simple sidebar for navigational purposes based on the W3C example (https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp).

My master template looks like this (mainly the sidebar template is of interest):

<% c++ #include "data/content.hpp" %>
<% skin defskin %>
<% view master uses content::master %>
<% template title() %>
    <%= title %>
<% end template %>
<% template page_content() %>
    Override  Me
<% end template %>
<% template sidebar() %>
    <div class="sidebar">
      <a class="active" href='<% url "/" %>'>Home</a>
      <a href='<% url "/news" %>'>News</a>
      <a href='<% url "/users" %>'>Users</a>
    </div>
<% end template %>
<% template render() %>
    <html>
        <head>
            <link rel="stylesheet" href="/css/style.css">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title><% include title() %></title>
        </head>
    <body>
        <% include sidebar() %>
        <div class="content">
            <h1><% include title() %></h1>
            <% include page_content() %>
        </div>
    </body>
</html>
<% end template %>
<% end view %>
<% end skin %>

What is the appropriate/recommended way of setting the class="active" attribute for the URL of the current view/page?
Is there a mechanism in the template engine that allows me to set the attribute on the appropriate menu item in the master template?

Note: I've posted this also on GitHub issues but by now I figured I might have more luck here.


Best regards,
~ Joel

Re: [Cppcms-users] Navigation template - Set "active" on corresponding entry

From: <ye...@ye...> - 2020-10-13 01:38:40

Hi Joel:
I encountered the same problem as you during the development of my blog site, but I did not find a solution for cppcms. However, the good news is that I implemented this feature using javascript, and it looks like this:


<script type="text/javascript"&gt;
$(document).ready(function()
{
&nbsp; &nbsp; &nbsp;var url = window.location.protocol + "//" + window.location.host + window.location.pathname;


&nbsp; &nbsp; &nbsp;$("#main-menu-navigation").find('a').each(function(){
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (this.href === url) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).parent().addClass('active');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp;});
});
</script&gt;


Because my project uses jquery, you can change it to a form that does not use jquery, which is very simple. I used the congruent judgment here. Of course, this does not work for some URLs. You can change it to indexOf() or search() to retrieve whether the URL is included.


Finally, I am sorry that my English is poor, so I have to use Google Translate to reply to this email.


good luck.

&nbsp;
&nbsp;
-  -  -  -  -  -  -  -  -  原版的  -  -  -  -  -  -  -  -  - 
来自： &nbsp;“ joel” <jo...@em...&gt;;
日期： &nbsp;2020年10月13日，星期二04:26 AM
收件人： &nbsp;“ cppcms-users” <cpp...@li...&gt;;

主题： &nbsp;[Cppcms-用户]导航模板-在相应条目上设置“活动”

&nbsp;

嗨，大家好！

几天前，我开始为一个项目评估CppCMS。现在，我正在尝试构建一个非常简单的用户管理后端作为概念证明。


我正在使用CppCMS实现一个简单的门户。该母版页基于W3C示例（https://www.w3schools.com/howto/howto_css_sidebar_sensitive.asp），具有用于导航目的的简单边栏。

我的主模板看起来像这样（主要是侧边栏模板很有趣）：

<％c ++ #include“ data / content.hpp”％&gt; 
<％skin defskin％&gt; 
<％视图母版使用content :: master％&gt; 
<％模板title（）％&gt; 
&nbsp;&nbsp;&nbsp; <％= title％&gt; 
<％最终模板％&gt; 
<％模板page_content（）％&gt;
&nbsp;&nbsp;&nbsp; 覆盖我
<％最终模板％&gt;

&nbsp;&nbsp;&nbsp; <div class =“ sidebar”&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class="active" href='<% url "/" %&gt;'&gt;主页</a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href='<% url "/news" %&gt;'&gt;新闻</a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href='<% url "/users" %&gt;'&gt;用户</a&gt; 
&nbsp;&nbsp;&nbsp; </ div&gt; 
<％最终模板％&gt; 
<％template render（）％&gt; 
&nbsp;&nbsp;&nbsp; <html&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <head&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <链接rel =“ stylesheet” href =“ / css / style.css”&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <meta name =“ viewport” content =“ width = device-width，initial-scale = 1.0”&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <title&gt; <％include title（）％ &gt; </ title&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </ head&gt; 
&nbsp;&nbsp;&nbsp; <body&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <％include sidebar（）％&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class =“ content”&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <h1&gt; <％include title（）％&gt; </ h1&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <％include page_content（）％&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </ div&gt;
&nbsp;&nbsp;&nbsp; </ body&gt; 
</ html&gt; 
<％最终模板％&gt; 
<％最终视图％&gt; 
<％最终皮肤％&gt;

什么是为当前视图的URL设置class =“ active”属性的适当/建议方法/页？
模板引擎中是否有一种机制可以让我在主模板中的相应菜单项上设置属性？

注意：我也已经在GitHub问题上发布了此内容，但到目前为止，我认为我在这里可能还有更多的运气。


最好的问候，
〜乔尔



_______________________________________________ 
Cppcms用户邮件列表
Cpp...@li... 
https://lists.sourceforge.net/lists/listinfo/cppcms-users

Re: [Cppcms-users] Navigation template - Set "active" on corresponding entry

From: Artyom B. <art...@gm...> - 2020-10-13 09:43:19

I assume you have several templates derived from base one that provide
different page_content

You can also short template home_class, news_class and include it from
sidebar

      <a <% include home_class() %> href='<% url "/" %>'>Home</a>
      <a <% include news_class() %> href='<% url "/news" %>'>News</a>
      <a <% include users_class() %> href='<% url "/users" %>'>Users</a>

Define these templates in master as empty

<% template home_class() %><% end template %>
<% template news_class() %><% end template %>
...

Now at the level of the implementation of Home template derived from master
override the home class
<% template home_class() %>class="active" <% end template %>

It is little bit long but most generic and does not require from you to
modify C++ code.

Artyom


On Mon, Oct 12, 2020 at 11:27 PM <jo...@em...> wrote:

> Hi guys!
>
> I started evaluating CppCMS for a project a few days ago. Right now I am
> trying to build a very simple user management back-end as a proof of
> concept.
>
>
> I am implementing a simple portal using CppCMS. The master page has a
> simple sidebar for navigational purposes based on the W3C example (
> https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp).
>
> My master template looks like this (mainly the sidebar template is of
> interest):
>
> <% c++ #include "data/content.hpp" %>
> <% skin defskin %>
> <% view master uses content::master %>
> <% template title() %>
>     <%= title %>
> <% end template %>
> <% template page_content() %>
>     Override  Me
> <% end template %>
> <% template sidebar() %>
>     <div class="sidebar">
>       <a class="active" href='<% url "/" %>'>Home</a>
>       <a href='<% url "/news" %>'>News</a>
>       <a href='<% url "/users" %>'>Users</a>
>     </div>
> <% end template %>
> <% template render() %>
>     <html>
>         <head>
>             <link rel="stylesheet" href="/css/style.css">
>             <meta name="viewport" content="width=device-width,
> initial-scale=1.0">
>             <title><% include title() %></title>
>         </head>
>     <body>
>         <% include sidebar() %>
>         <div class="content">
>             <h1><% include title() %></h1>
>             <% include page_content() %>
>         </div>
>     </body>
> </html>
> <% end template %>
> <% end view %>
> <% end skin %>
>
> What is the appropriate/recommended way of setting the class="active"
> attribute for the URL of the current view/page?
> Is there a mechanism in the template engine that allows me to set the
> attribute on the appropriate menu item in the master template?
>
> Note: I've posted this also on GitHub issues but by now I figured I might
> have more luck here.
>
>
> Best regards,
> ~ Joel
>
>
>
> _______________________________________________
> Cppcms-users mailing list
> Cpp...@li...
> https://lists.sourceforge.net/lists/listinfo/cppcms-users
>

Re: [Cppcms-users] Navigation template - Set "active" on corresponding entry

From: <jo...@em...> - 2020-10-13 10:15:34

This works very well. Thank you a lot!

 

Please keep up the good work with CppCMS. I know that I’m fairly late to the party but I really hope that this framework will continue to develop and live a long & healthy life!

 

 

Best regards,

~ Joel 

 

From: Artyom Beilis <art...@gm...> 
Sent: Tuesday, 13 October 2020 11:32
To: cpp...@li...
Subject: Re: [Cppcms-users] Navigation template - Set "active" on corresponding entry

 

I assume you have several templates derived from base one that provide different page_content 

 

You can also short template home_class, news_class and include it from sidebar

 

      <a <% include home_class() %> href='<% url "/" %>'>Home</a>
      <a <% include news_class() %> href='<% url "/news" %>'>News</a>
      <a <% include users_class() %> href='<% url "/users" %>'>Users</a>

 

Define these templates in master as empty

 

<% template home_class() %><% end template %>

<% template news_class() %><% end template %>

...

 

Now at the level of the implementation of Home template derived from master override the home class

<% template home_class() %>class="active" <% end template %>

 

It is little bit long but most generic and does not require from you to modify C++ code.

 

Artyom

 

 

On Mon, Oct 12, 2020 at 11:27 PM <jo...@em... <mailto:jo...@em...> > wrote:

Hi guys!

I started evaluating CppCMS for a project a few days ago. Right now I am trying to build a very simple user management back-end as a proof of concept.


I am implementing a simple portal using CppCMS. The master page has a simple sidebar for navigational purposes based on the W3C example (https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp).

My master template looks like this (mainly the sidebar template is of interest):

<% c++ #include "data/content.hpp" %>
<% skin defskin %>
<% view master uses content::master %>
<% template title() %>
    <%= title %>
<% end template %>
<% template page_content() %>
    Override  Me
<% end template %>
<% template sidebar() %>
    <div class="sidebar">
      <a class="active" href='<% url "/" %>'>Home</a>
      <a href='<% url "/news" %>'>News</a>
      <a href='<% url "/users" %>'>Users</a>
    </div>
<% end template %>
<% template render() %>
    <html>
        <head>
            <link rel="stylesheet" href="/css/style.css">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title><% include title() %></title>
        </head>
    <body>
        <% include sidebar() %>
        <div class="content">
            <h1><% include title() %></h1>
            <% include page_content() %>
        </div>
    </body>
</html>
<% end template %>
<% end view %>
<% end skin %>

What is the appropriate/recommended way of setting the class="active" attribute for the URL of the current view/page?
Is there a mechanism in the template engine that allows me to set the attribute on the appropriate menu item in the master template?

Note: I've posted this also on GitHub issues but by now I figured I might have more luck here.


Best regards,
~ Joel



_______________________________________________
Cppcms-users mailing list
Cpp...@li... <mailto:Cpp...@li...> 
https://lists.sourceforge.net/lists/listinfo/cppcms-users