Continuing from where we left off last time, we’re going to continue trying to focus on the UI for our site. The first thing we’ll do is create a user control for our top menu. We’ll put the basic navigation for our site up there and we’ll load it all from the BlogMenuItem table. In our UserControls folder (in our Views) we’re going to add a new View User Control named UcTopBar. The markup for this control is pretty simple:
1: <div id="topBarMenu" align="center">
2: <ul id="topMenu">
3: <% foreach (BlogMenuItem item in Model.blogMenuItems)
4: { %>
5: <li>
6: <%= (item.IsView ?
7: VeritasForm.ActionLink(item.LinkText, item.ViewName, "Home")
8: :
9: VeritasForm.ActionLink(item.LinkText, "ViewContent/"+item.ViewName, "Home"))
10: %>
11: </li>
12: <% } %>
13: </ul>
14: <b id="topMenuBottom" style="padding-left:0px"></b>
15: </div>The only really important thing here is the unordered list topMenu. Within that we’re iterating over the BlogMenuItems. For each one it’s either a View or a link to something we’ll display using the ViewContent page. That’s it. The topMenuBottom bold tag is just used as a line to underline the menu. That’s it for our navigation menu. In order to show this View User Control we’ll add this to the master page right under contentcolumn:
<% Html.RenderPartial("~/Views/UserControls/UcTopBar.ascx"); %>
Next, we’ll do the same thing on the side and create a Side Bar View User Control. Before we get into what this control will look like, we need to figure out what we’re going to put on it. We’re certainly going to want to put Syndication information so we’ll add a link to our RSS feed. We’ll also want to have the ability to link to Twitter and Facebook and maybe some others. We’ll want to show a list of all the categories that our entries fall into. Lastly, we’ll want to show ads. We might add more later but this is a good start for now. One interesting thing to note for the RSS feed is that we want the ability to display our feed through where we’re going to host it and also through Feedburner (if we’re going to use that).
1: <div class="syndication">
2: <%--Blog Entry Feed--%>
3: <%= string.IsNullOrEmpty(Model.blogConfig.FeedburnerName) ?
4: "<a href=\"" + VeritasForm.Content("~/Syndication/rss.aspx") + "\"><img src=\""
5: + VeritasForm.Content("~/Content/Media/feed.png")
6: +"\" alt=\"Site Feed\" style=\"border-width:0px;\" /> RSS (blog)</a>"
7: :
8: "<a href=\"http://feeds.feedburner.com/"+ Model.blogConfig.FeedburnerName + "\"><img src=\"" +
9: VeritasForm.Content("~/Content/Media/feed.png") +"\" alt=\"Site Feed\" style=\"border-width:0px;\" /> RSS</a>"
10: %>
11: <%--Blog Feedback Feed--%>
12: <% if (Model.blogConfig.EnableFeedbackRssFeed)
13: { %>
14: <br /><a href="<%= VeritasForm.Content("~/Syndication/commentRss.aspx") %>">
15: <img src="<%= VeritasForm.Content("~/Content/Media/feed.png") %>"
16: alt="RSS Feed" style="border-width:0px;" /> RSS (comment)</a>
17: <% } %>
18: <%--Social Networks--%>
19: <% if (!string.IsNullOrEmpty(Model.blogConfig.FacebookUrl))
20: { %>
21: <a href='<%= Model.blogConfig.FacebookUrl %>'><img src=
22: "../../Content/Media/facebook_logo.png" /></a>
23: <br />
24: <% } %>
25: <% if (!string.IsNullOrEmpty(Model.blogConfig.TwitterUrl))
26: { %>
27: <a href='<%= Model.blogConfig.TwitterUrl %>'><img src=
28: "../../Content/Media/twitter_logo.png" /></a>
29: <br />
30: <% } %>
31: </div>
32: <%-- Tags --%>
33: <div class="sideBarTags">
34: <% Html.RenderPartial("~/Views/UserControls/UcTagCloud.ascx"); %>
35: </div>
36: <%--Side bar ads--%>
37: <div class="sideBarAds">
38: <% if (Model.blogConfig.BlogMarketingInfo.ShowSideBarAds) { %>
39: <%= Model.blogConfig.BlogMarketingInfo.AdScriptSideBar %>
40: <% } %>
41: </div>
Nothing surprising here. In the RSS feed part, we’re checking to see if we should show the blog’s rss feed directly or use feedburner. Then we’re checking to see if we want to show a link to the feedback (comment) rss feed. All of this links to pages we haven’t actually created yet but eventually will. Then we’re choosing whether or not to show the facebook and twitter links based off of the blog config. Then we’re showing a new user control called the Tag Cloud. Lastly, we’re checking to see if we should show an ad script specific to the side bar. The last piece we’ll cover today is the tag cloud. The tag cloud is primarily just a list of the categories we’ve associated with our entries. However, we want each categories text to be proportional to how many entries are associated with it. So for example, if I have ten entries associated with “.Net” and one entry associated with “MVC” then ".Net” will be in bigger text. We’re going to accomplish this by putting specific classes on our html links depending on the association counts.
1: <div align="center">
2: <span id="categoriesHeader">Categories</span>
3: <div id="tags">
4: <%
5: foreach (var categoryTag in Model.blogCategoryTags)
6: {%>
7: <%= "<a href=\"" + VeritasForm.Content("~/Category/" + categoryTag.CategoryTitle)
8: + "\" title=\"" + categoryTag.CategoryTitle + "\" class=\""
9: + VeritasForm.GetTagClass(categoryTag.CategoryUseCount, categoryTag.TotalArticles)
10: + "\">" + categoryTag.CategoryTitle + "</a>"%>
11:
12: <% }%>
13: </div>
14: </div>
Again, nothing special. Each link is being built and makes use of the GetTagClass method within the VeritasForm object. This method will return something like “tag1” or “tag4” dependent upon the popularity of the category. These class names will then map to our CSS file where we will change the text size from lower (for “tag1”) to higher (for > 1).
In addition to everything we did above, we’re also going to set up our About page and the Contact page. I won’t go over this in detail here as it’s all pretty straight forward and should (if you’ve been keeping up so far) be very easy to read and understand. As always, you can download the latest Veritas code to review yourself.
