Modx & blogging part 2: Searching and Security


Articles, Modx, Searching, Security

In part 1 of this series we looked at the Articles add-on as a blogging platform for Modx, covering the initial installation and setup. In part 2 we are going to add in a simple search facility, using, not surprisingly, the SimpleSearch add-on. And then we're going to fix what I consider to be a security flaw - namely the blogger's username is exposed in the blog.

Copying some elements

Up to this point, we have been using the default Articles Templates and Chunks. But from now on we will be making necessary changes to these. Before continuing, it is necessary to make copies of a few of the Articles elements so that future updates to Articles don't destroy our changes. Initially, we will be copying three elements: the sample.ArticlesContainerTemplate and sample.ArticleTemplate templates as well as the sample.ArticleRowTpl chunk.

I created new categories for these which I called rg. To create your own, right click on the Templates element and select New Category. Name it what you like and then do the same for the Chunks element. Then, for each of the elements we are duplicating, right click on it and select Duplicate. I used the same names but substituted 'rg' for 'sample'. These will be copied into the same category as the original. To move them into your own categories, click on the new duplicate and in the RH panel change the category by selecting your new category.

The final step is to change the Blog container to use these new elements. Back on the Resources tab, click on your Blog resource, then click on the Templates tab. Change each template and the chunk to reflect the one you have copied. The resulting Element tree and Template page should look something like this:

Blog template changed

Installing the SimpleSearch add-on

SimpleSearch is installed like any other add-on via the System/ Package Management option in the Manager.

Configuring Simplesearch

SimpleSearch has 2 snippets - one to display a form (SimpleSearchForm), and the other to display search results (SimpleSearch). We are going to place the form in the ArticleContainerTemplate and the results on a new Search Results page that we'll create next.

The new page needs a template so we'll create that first. I haven't been concerned about the look of the blog while getting the functionality working, so I just made a copy of the ArticlesContainerTemplate and called it Search Results. I put it in my rg category. Next, create a new resource and call it Search Results. Take note of the document id (mine is 6). Edit the Search Results document so that it uses the new SearchResults template we just created.

To add the search form, edit the ArticlesContainerTemplate (the copy - not the Articles sample) and find the <main> tag. Add the following line immediately above the Content chunk:

[[!SimpleSearchForm? &landing=`6`]]

Change the landing id to be the id of the page you created. The result should look like this:

[[!SimpleSearchForm? &landing=`6`]] [[*content]]

It doesn't get much easier. Save the template. Now go to your Blog page and check out the results (you may need to clear cache first). It should look like this:

Article blog summary page with search

Not very pretty, but that will come later.

We now have the search form set up, but there is not yet anywhere for the search results to go. We need to add the SearchResults chunk to our results page. We do this by editing the Search Results template we created earlier. Open this up, and find the div with the class=main. It currently contains the content chunk, which we will now replace with a Simple Search chunk as follows:

[[!SimpleSearch? &ids=`2` &idType=`parents` &depth=`50`
  &hideMenu=`1` &highlightTag=`strong` &tpl`SearchResult`]]. 

Again, you will need to change the ids property value to reflect your site.

The code should now look like this:

[[!SimpleSearch? &ids=`2` &idType=`parents` &depth=`50` &hideMenu=`1` &highlightTag=`strong` &tpl=`SearchResult`]]

So what does all that mean. Breaking it down:

&ids=`2` means a list of IDs to restrict the search to. As our blog is contained within the Blog resource (id of 2) that is all we need here.

&idType=`parents` means the type of restriction for the ids parameter. If parents, will add all the children of the IDs in the ids parameter to the search. If documents, will only use the specified IDs in the search.

&depth=`50` means that if the idtype is set to parents, the depth down the Resource tree that will be searched with the specified IDs.

&hideMenu=`1` means whether or not to return Resources that have hidemenu on. 0 shows only visible Resources, 1 shows only hidden Resources, 2 shows both. All Articles resources that are blog entries are hidden.

&highlightTag=`strong` means the html tag to wrap the highlighted term with in search results.

&tpl=`SearchResult` means the chunk that will be used to display the contents of each search result. "SearchResult" is the default chunk, but I added it in case I later want to change the chunk.

This is only a handful of the available properties. A full list can be found here.

Now when we actually perform a search, the results should be shown on the Search Results page. Try it. The results should look like this (I searched for the word 'lorem'):

Search results page - needs work

Ok. This doesn't look so good. Just as well we're not too concerned with how things look at this point. We'll leave searching for now, and address the other issue of hiding the blogger's username.

Hiding the username

There are two ways to do this. If you are the only blogger on the site (and likely to remain so) one answer is to remove Posted by altogether. But if you are one of many bloggers using the site, then you'll need to change the name. Both methods are described next.

Remove Posted by username

The name displayed on the blog pages is defined in the ArticleTemplate template and the ArticleRowTpl chunk (the ones we copied, not the original samples). To remove Posted by we'll need to edit both templates.

Open the ArticleTemplate. Find and remove only the following code:

by <a href="[[~[[*parent]]]]author/[[*publishedby:userinfo=`username`]]">[[*publishedby:userinfo=`username`]]</a>

Open the ArticleRowTpl. Find and remove only the following code:

class="post-info">[[%articles.posted_by]] <a href="[[~[[*id]]]]author/[[+createdby:userinfo=`username`]]">[[+createdby:userinfo=`username`]]</a>

This will permanently remove the name.

Change Posted by username

The name displayed on the blog pages is defined in the ArticleTemplate template and the ArticleRowTpl chunk (the ones we copied, not the original samples). The trick here is to find and change all occurrences of username to something else. But what else? Username is being pulled from your user profile, which can be maintained under User/ Profile. If you look in there the obvious candidate to replace username is fullname.

You could do this if you want, but it may be too formal for a blog (you may prefer to use a nickname) and this field should probably reflect the user's real name. So I decided to use one of the other fields - fax to display my blog handle (it is not defined as a numeric field, so you can put anything in it.)

Whatever field you decide to use, update your user profile and then update ArticleTemplate and ArticleRowTpl replacing username with fax or fullname (there are four places to make changes - two in the template and two in the chunk).

Coming up in part 3

Next we'll take a look at how to insert and format source code in your blog.

Add a Comment