move 'Blog' on the top-right

[novel]

I would move the "blog" section on the top-right corner, near "contact".

I'm able to do this, but now I want to understand how edit the "page.ftl" file.

when I open the link, I would open the general page of the blog and not just a single page.

The question is how to edit this:

<li> <a href="${url.context}/blog/?????"> {$ msg ('????')}</ a> </ li>

Thanks so much.

[bremmington]

If by "general page" you mean the section landing page then the URL is just "${url.context}/blog/".

The value that goes into the call to the msg function is the key that you have added into the common.properties file. "blog.link=Blogs", for instance.

As an aside, I don't really recommend that you do this, since you are effectively taking away the ability to manage your site in Share. If you want to extend that top area, I would recommend that you create a new asset collection in the root section, and change the template to render that asset collection. Place the contact page and the index page of the blog section into that asset collection.

[novel]

I think I haven't understand how to do this second solution.

I was able to extend the top-right menu by editing  "common.properties" and "page.ftl" file, but how do I do the second method that you say?

I need more information about.

Thanks

[bremmington]

Sorry for the delay in coming back to you.

There are two parts needed to achieve a managed list of links on the top right of each page. The first is to create an asset collection that holds the set of assets that you want to include in the list. To do this:

1. In Share, navigate to "Quick Start Editorial/root/collections" and create a new folder named, for example, "access.menu"


2. Edit the metadata on that new folder (which is now an asset collection), click on the Web Assets "Select" button, and choose the assets that you want to appear on your page (perhaps "/contact/contact.html" and "/blog/index.html", for instance)


3. Finally, make sure that each asset that you have selected has a title ("Contact Us" and "Blogs", for example)

The next step is to alter the page template to render the new asset collection. There are a couple of ways of doing this, but I will describe the way that is easiest to explain (rather than the way that is perhaps more "pure"):

1. Cut (remove) the following snippet out of "page.ftl" and paste it into the top of "box.get.html.ftl":

        <div class="link-menu">
            <ul>                
                <!–<li><a href="#">${msg('links.accessibility')}</a></li>–>
                <li><a href="${url.context}/contact/contact.html">${msg('links.contact')}</a></li>
            </ul>
        </div>
‍‍‍‍‍‍‍‍



2. Replace the part inside the <ul> tag with this:

<#list accessLinks.assets as asset>      
        <li><a href="<@makeurl asset=asset force='long'/>">${asset.title!asset.name}</a></li>
</#list>
‍‍‍‍‍


so that "box.get.html.ftl" now looks like this:


<div class="link-menu">
    <ul>
<#list accessLinks.assets as asset>      
        <li><a href="<@makeurl asset=asset force='long'/>">${asset.title!asset.name}</a></li>
</#list>
    </ul>
</div>
<form action="${url.context}/search.html" method="get">
    <fieldset class="search-fieldset">
        <input type="hidden" value="${webSite.rootSection.id}" name="sectionId" />
        <input type="text" class="search-input" value="<#if phrase??>${phrase?html}<#else>${msg('search.box.search')?html}</#if>" name="phrase" id="search-phrase" maxlength="100"/>
        <input type="submit" value="" class="input-arrow" />
    </fieldset>
</form>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍



3. Edit "box.get.js", and add the following at the bottom of it:

model.accessLinks = webSite.rootSection.getAssetCollection('access.menu');
‍‍‍

That's it. You should now find that the links above the search box on each page are driven from your new asset collection.

[novel]

I have just try this …houston we have a problem! 

I followed step by step, but now is no longer displayed the search box and even the various links.
"Sorry, there Seems to be a problem with this part of the page."


I suppose you've already tested this method.
Therefore, I've done something wrong :?

[bremmington]

Yes, I did this myself, so I'm sure it's correct. In the error message there should be a link that will show more technical detail of the problem. Hopefully that will provide the necessary clues.

[novel]

there isn't any link .. only thing that I can see in the resulting HTML is:

<div id="body-wrapper">
    <div class="clearfix">
      <div id="logo"> 
            <a href="/my_site/"></a>
        </div>
      
"'></a></script>
<!– above dodgy HTML is required to end any open tags, script etc. before further script injection –>
 
    <div class="theme-color-2" style="padding: 16px; margin: 8px; border: 1px dashed #D7D7D7;">
       <div class="theme-color-4" >
            Sorry, there seems to be a problem with this part of the page.
       </div>
    </div>
    </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[bremmington]

The equivalent HTML that I see in my example (just using the WQS out of the box with the changes I described above) is:

<div id="body-wrapper">
    <div class="clearfix">
        <div id="logo"> 
            <a href="/wcmqs/">Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Quisque volutpat condimeum velit. Eos no sale dolore vituperatoribus</a>
            <p class="logo-desc">Alfresco Web Quick Start</p>
        </div>
<div class="link-menu">
    <ul>
        <li><a href="/wcmqs/blog/index.html">Blogs</a></li>
        <li><a href="/wcmqs/contact/contact.html">Contact Us</a></li>
    </ul>
</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Check the changes that you've made carefully, and look in the log files to see if you can find the error.