Orchard分類Taxonomies圖文教程

　　Orchard分類和標簽都實現對內容的分類管理，兩者區別是分類的子項之間是具有級別（同級、上下級）關系，而標簽是很隨意的，子項之間可以有關系也可以沒有，今天給大家分享分類的使用方法。

 

一、環境說明

　　Orchard版本1.9.2，主題默認TheThemeMachine

 

二、建立分類

　　打開Orchard，切換到Dashboard，在左側菜單欄找到Taxonomies並單擊，在頁面右擊找到“Add a Taxonomiy”並單擊，由於分類本身也是個類型，所以不支持中文，我們先建一個Subject，保存。

如果想使用中文，可以點擊Edit，輸入中文名稱即可。分類目錄可以點Terms進行添加，在這里我使用Import方式批量添加目錄。

根據已有文件夾生成文本的代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.IO;
using System.Xml;


namespace 根據目錄生成文件
{
    class Program
    {
        private const string ImgPath = @"J:\Users\CXR\Documents\Visual Studio 2013\Projects\Orchard-1.9.2\src\Orchard.Web\Media\Default\專業目錄";
        static void Main(string[] args)
        {
            GetTerms();
            Console.Read();
        }

        static void GetTerms()
        {
            DirectoryInfo di = new DirectoryInfo(ImgPath);
            StringBuilder sb = new StringBuilder();
            foreach (var d1 in di.GetDirectories())
            {
                sb.Append(d1.Name).Append("\r\n");
                foreach (var d2 in d1.GetDirectories())
                {
                    sb.Append("\t").Append(d2.Name).Append("\r\n");
                    foreach (var d3 in d2.GetDirectories())
                    {
                        sb.Append("\t\t").Append(d3.Name).Append("\r\n");                                           
                    }
                }
            }
            File.AppendAllText(Environment.CurrentDirectory + "\\Terms.txt", sb.ToString());
        }
    }
}

 生成的文件如下，大家可以直接復制我的文本

哲學
	哲學類
		倫理學
		哲學
		宗教學
		邏輯學
教育類
	體育學類
		休閑體育
		體育教育
		武術與民族傳統體育
		社會體育指導與管理
		運動人體科學
		運動康復
		運動訓練
	教育學類
		人文教育
		華文教育
		學前教育
		小學教育
		教育學
		教育技術學
		特殊教育
		科學教育
		藝術教育
經濟學
	經濟與貿易類
		國際經濟與貿易
		貿易經濟
	經濟學類
		商務經濟學
		國民經濟管理
		經濟學
		經濟統計學
		能源經濟
		資源與環境經濟學
	財政學類
		稅收學
		財政學
	金融學類
		保險學
		信用管理
		投資學
		經濟與金融
		金融學
		金融工程
		金融數學

 單擊Import，將上面的文本復制到導入區，單擊Import，完成分類目錄的導入。

 

 建立好的分類如下圖，需要調整可以點Actions里的Remove或Move來操作

至此，我們已經建立一個名為“Subject”，且包含三級目錄的分類。

 

三、使用分類

　　切換到ContentType頁面，Create Type，名稱：Book，單擊Create，切換到下一頁后勾選TitlePart，BodyPart，AutoRoutePart，最后點Save。

在Parts選擇界面，勾選AutoRoute，點擊保存。

切換到類型編輯頁面，點Add Field，輸入字段名稱BookSubject，Field Type選成Taxonomiy Field，最后保存。

再次來到類型編輯頁面，點BookSubject左側三角，把分類選成Subject，同時勾選前四項

在此我們看到Orchard強大之處，AutoComplete只要勾選就出來了！

　　我們希望將來添加Book的Url包含分類信息，需要對AutoRoute設置，在頁面最下方找到AutoRoute，單擊左邊三角，Name隨便填，Pattern填/{Content.Fields.Book.BookSubject.Terms:0.DisplayUrl}/{Content.Id}，如下圖：

全部設置好后，記得點頁面最下方Save。

 

四、展示分類

　　通過第三步我們已經可以在添加內容時選取分類，下面我們要把分類展示出來，切換到Navigation，Add a new menu，輸入分類導航菜單后點Save。

將菜單切換到我們剛建的分類導航菜單（如下圖），單擊右下角Taxonomy Link的Add

繼續如下圖操作

此時分類導航已經完成，下面我們把它放到頁面的左側。

切換到Widgets，單擊AsideFirst的Add，選擇Menu Widget

設置Title為leftNav，並且取消勾選Check to render the title on the front-end, uncheck to hide，改變For Menu的值為我們的“分類導航菜單”，最后點Save。

這時我們切換到網站首頁就可以看到我們建立的導航

 

五、樣式調整

　　經過上面的四步，分類導航雖然已經出來，但是樣式很丑，我們對它進行最終調整，涉及CSS和JQ，這里不作詳解，直接貼出最終代碼，大家可以復制到主題下使用

文件名：Parts.MenuWidget.cshtml（本文件會同樣影響到Home菜單），位於Themes/TheThemeMachine/Views下

<style type="text/css">    
.left_menu_div {
    height: 500px;
    WIDTH: 235px;
    BACKGROUND: #efefef;
    BORDER-BOTTOM: rgb(41,92,144) 5px solid;
    FLOAT: left;
    PADDING-BOTTOM: 5px;
    PADDING-TOP: 5px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
}


.allsort {
    WIDTH: 235px;
    POSITION: relative;
    Z-INDEX: 120;
}

    .allsort .item {
        HEIGHT: 28px;
        WIDTH: 235px;
        LINE-HEIGHT: 28px;
    }
  
    .allsort .item-list {
        HEIGHT: 28px;
        WIDTH: 235px;
        POSITION: relative;
        Z-INDEX: 1;
        DISPLAY: block;
    }

        .allsort .item-list span {
            FONT-SIZE: 14px;
            HEIGHT: 32px;
            COLOR: #70706e;
            MARGIN-LEFT: 8px;
            DISPLAY: block;
            LINE-HEIGHT: 32px;
        }
   
    .allsort .hover .item-list A {
        TEXT-DECORATION: none;
        COLOR: #295c90;
    }

    .allsort .item .i-mc {
        OVERFLOW: hidden;
        BORDER-TOP: #295c90 1px solid;
        BORDER-RIGHT: #295c90 1px solid;
        WIDTH: 724px;
        BACKGROUND: #ffffff;
        BORDER-BOTTOM: #295c90 1px solid;
        POSITION: absolute;
        LEFT: 234px;
        BORDER-LEFT: #295c90 1px solid;
        DISPLAY: none;
        TOP: -6px;
    }

    .allsort .subitem {
        WIDTH: 725px;
        FLOAT: left;
        MARGIN: 10px 0px 10px -10px;
    }

        .allsort .subitem .fore {
            OVERFLOW: hidden;
            WIDTH: 315px;
            ZOOM: 1;
            FLOAT: left;
            PADDING-BOTTOM: 10px;
            PADDING-TOP: 0px;
            PADDING-LEFT: 25px;
            PADDING-RIGHT: 10px;
        }

        .allsort .subitem DT {
            HEIGHT: 28px;
            BORDER-BOTTOM: #ededed 2px solid;
            FONT-WEIGHT: bold;
            LINE-HEIGHT: 24px;
        }

        .allsort .subitem DD {
            OVERFLOW: hidden;
            ZOOM: 1;
            PADDING-TOP: 5px;
        }

        .allsort .subitem DT A {
            HEIGHT: 28px;
            BORDER-BOTTOM: #1292ec 2px solid;
            FLOAT: left;
            COLOR: #295c90;
            DISPLAY: block;
        }

        .allsort .subitem dd A {
            COLOR: #70706e;
        }
            .allsort .subitem dd A:hover {
                COLOR: #295c90;
                BORDER-BOTTOM: #1292ec 2px solid;
            }

        .allsort .subitem DIV {
            HEIGHT: 14px;
            WHITE-SPACE: nowrap;
            WORD-BREAK: keep-all;
            FLOAT: left;
            PADDING-BOTTOM: 0px;
            PADDING-TOP: 0px;
            PADDING-LEFT: 8px;
            MARGIN: 6px 0px;
            BORDER-LEFT: #b5b5b5 1px solid;
            LINE-HEIGHT: 14px;
            PADDING-RIGHT: 8px;
        }

    .allsort .hover .item-list {
        OVERFLOW: hidden;
        BORDER-TOP: #295c90 1px solid;
        BORDER-RIGHT: #ffffff 1px solid;
        WIDTH: 233px;
        BORDER-BOTTOM: #295c90 1px solid;
        FONT-WEIGHT: bold;
        BORDER-LEFT: #295c90 1px solid;
        Z-INDEX: 102;
        BACKGROUND-COLOR: #ffffff;
        _height: 30px;
    }

    .allsort .hover .i-mc {
        Z-INDEX: 101;
        DISPLAY: block;
    }

</style>

<script type="text/javascript">
    (function ($) {
        $.fn.hideMenu = function () {
            var item = $(this);
            item.find("div.i-mc").hide();
            item.attr("class", "item fore");
        };
        $.fn.showMenu = function () {
            var item = $(this);
            var subItem = item.find("div.i-mc");
            var num = item.attr("num");
            var curheight = num * 28 + 5;
            var curheight_hidden = subItem.height();
            if (curheight > curheight_hidden) {
                var top = num * 28 + 5 - curheight_hidden;
                subItem.css("top", top);
            }
            subItem.show();
            item.attr("class", "item fore hover");
        };
    })(jQuery);

    $(function () {
        $("div.item").on("mousemove", function (e) {
                $(this).showMenu();
        }).on("mouseleave", function () {
            $(this).hideMenu();
        });

    });


</script>
<div class="left_menu_div">
    <div class="allsort">
        @{int i = 0;}
        @foreach (var item_1 in Model.Menu.Items)
        {i++;
        <div class="item" num="@i">
            <div class="item-list">
                <span>@item_1.Text</span>
            </div>
            <div class="i-mc">
                <div class="subitem">
                    @foreach (var item_2 in item_1.Items)
                    {
                    <dl class="fore">
                        <dt><a href="@item_2.Href">@item_2.Text</a></dt>
                        <dd>
                            @foreach (var item_3 in item_2.Items)
                            {
                            <div><a href="@item_3.Href">@item_3.Text</a></div>
                            }
                        </dd>
                    </dl>
                    }
                </div>
            </div>
        </div>
        }
    </div>
</div>

同時要添加對Jq的引用，打開Themes/TheThemeMachine/Views/Layout.cshtml，修改Style.Include("//fonts.googleapis.com/css?family=Lobster&subset=latin");為Script.Require("jQuery").AtHead();
打開首頁，即可看到最終效果圖：