06 January 2016

6、UmbracoNewsSite：添加新闻分类

　　上一篇做了一个简单的首页，在导航条上添加了几个新闻板块，接下来我们就添加这几个新闻板块的页面。

　　开始我们还是需要创建Document Types用来展示新闻列表。我们先做好规划，新闻列表只需要把新闻标题和图片展示出来就可以了，。

我们创建这个新闻列表的文档类型，同样是在Setting–> Document Types下面创建，创建一个名为News List的文档类型。注意这时的创建菜单中出现了一个选项 “*Master Document Type*”,这个选项的作用是如果你的这个模板的某些数据是继承自其他模板的，就选择那个模板为Master模板。之前没有出现是因为只有一个Home模板。我们的新闻页面是独立的，不需要继承，所以默认选择 “*none…*”。

　　首先创建一个名为Info的Tabs，然后添加一个Section Name的属性，用来编辑新闻列表的种类。

　　打开Home文档类型下，进入Structure选项卡中，将*Allow at root*后面的选项勾选上，作用是将Home类型设置成根节点；然后将*Allowed chile node types*后面*News List*勾选上，作用是允许News List作为Home的子节点。

　　我们回到Content功能节点，点击“首页”后面的三个小圆点按钮，可以看到我们刚刚创建的News List类型已经可以使用了。如果这里没有出现News List类型的选项，而是一些提示，那么尝试刷新一下页面，如果还没有看看Home文档类型设置里里面是否将News List类型勾选为Home类型的子节点，记得保存。

　　创建之后，进入设置界面，第一个文本框是设置这个节点的名称，而且也是网页在进入这个节点时的网址，所以一般使用英文比较好一点，因为网址中出现中文路径可能会出问题，也不太好看。

　　按照同样的方法，设置其他几个节点。

　　接下来我们将这几个页面分别链接到，上一篇中编写的首页导航条按钮中。　　回到Templates中，将Master中的代码改造一下，绑定几个新闻链接，将bootstrap导航条的代码改成：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div style="text-align:center">
                    <a href="@home.Url">
                        <image src="@(home.siteLogo)" />
                    </a>
                </div>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @if (home.Children.Any())
                    {
                        foreach (var childPage in home.Children)
                        {
                            <li><a href="@childPage.Url">@childPage.sectionName</a></li>
                        }
                    }
                </ul>
                <ul class="nav navbar-nav pull-right">
                    <li><a>登陆</a></li>
                    <li><a>注册</a></li>
                </ul>
            </div>

        </div>
    </div>