keystonejs / keystone-classic

Node.js CMS and web app framework
http://v4.keystonejs.com
MIT License
14.65k stars 2.21k forks source link

What I did on implementing page tree and navigation is this , this is simple but i think it could be somehow a solution #4941

Open jelordreygulle opened 5 years ago

jelordreygulle commented 5 years ago

What I did on implementing page tree and navigation is this , this is simple but i think it could be somehow a solution

Page Model

Pages.add({
    name: { type: String, required: true },
    key: { type: String, required: false },
    link_destination : { type: Types.Url, require: true},
    second_level_page: { type: Types.Relationship, ref: 'SecondLevelPage', many: true },
    publishedDate: { type: Types.Date, index: true, dependsOn: { state: 'published' } },
    state: { type: Types.Select, options: 'draft, published, archived', default: 'draft', index: true },

});

Second Level Page Model

SecondLevelPage.add({
    title: { type: String, required: true },
    link_destination : { type: Types.Url, require: true},
    state: { type: Types.Select, options: 'draft, published, archived', default: 'draft', index: true },
    author: { type: Types.Relationship, ref: 'User', index: true },
    publishedDate: { type: Types.Date, index: true },
    content: {
      html: { type: Types.Html, wysiwyg: true, height: 600 }
    },

  });

And then in the views


//Load the top level pages including the second level
    view.on('init', function (next) {

        var q = keystone.list('Pages').paginate({
            page: req.query.page || 1,
            perPage: 10,
            maxPages: 10,
            filters: {
                state: 'published',
            },
        })
            .sort('publishedDate')
            .populate('second_level_page')

        q.exec(function (err, results) {
            locals.data.toplevelpages = results;
            console.log("Response Data:", locals.data.toplevelpages)
            next(err);
        });
    });

And then on the template

                            {% for page in data.toplevelpages.results %}

                            <li class="{{ 'active' if page.key == section else '' }} dropdown ">
                                <a class="" data-href="/"
                                    href="/{{ page.link_destination }}" id="homePage" title="{{ page.key }}"
                                    aria-label="Home"
                                    onclick="TrackNavigationClick('topNav', this);">{{ page.name }} </a>

                                    <div class="dropdown-content">
                                        {%for second_level in page.second_level_page %}
                                        <a href="/{{ second_level.link_destination }}" style="color:white;font-size:12.5px;text-align: left; padding: 12px 16px;text-transform: capitalize ;">{{ second_level.title }}</a>
                                        {% endfor %}
                                    </div>
                            </li>
                            {% endfor %}

On the admin add your pages and then set the second level page to a page.

Originally posted by @jelordreygulle in https://github.com/keystonejs/keystone/issues/428#issuecomment-511253788