JCarousel 添加 blogpost 而不是 html答案

【问题标题】：JCarousel adding blogpost instead of htmlJCarousel 添加 blogpost 而不是 html
【发布时间】：2012-07-13 13:15:17
【问题描述】：

是否可以将我的博文添加到 JCarousel 而不是 html 代码？它应该是这样的：

=> EXAMPLE

在这个网站上的内容只是 html，但我想让我的博文炫耀一下。

假设我写了 5 篇博文，那么 Slider 必须向我显示 5 篇博文。

希望有人能帮帮我！

问候

尼哥

【问题讨论】：

您可能只需要编辑模板并添加您自己的宏，以 jcarousel 可以使用的格式输出博文。你写的例子吗？
不，我没有写。我的主页想要这样的东西，只是用 blogposts 而不是 html。谢谢您的帮助。我希望我能做到这一点:) 我真的只是这方面的初学者。以前没用过Umbraco。有没有关于编写自己的宏的好教程？官方主页帮助不大...
您使用的是什么版本的 Umbraco，您是否使用特定的博客包，如 uBlogsy 或 Blog4Umbraco？
我使用版本“umbraco v 4.7.2（程序集版本：1.0.4500.21031）”。我安装了它并选择了 blog starterkit。我认为它安装了 uBlogsy（StarterKit Blog 1.2），但可能是启动器本身的一个单独的包（很难说，因为我没有找到关于它的信息）。我真的很担心这个。我希望有办法做到:(
抱歉这么久才回复你，这周很忙。

标签： umbraco umbraco-blog

【解决方案1】：

您需要创建一个宏（xslt 或 razor）来显示您的博客文章节点，然后使用 jquery 定位它们以加载 jcarousel。以下是使用您引用的example 中的代码执行此操作的 razor 脚本示例：

@using umbraco.MacroEngines
@inherits DynamicNodeContext
@try
{
    <script type="text/javascript" src="http://www.fdp-bw.de/jcarousel/lib/jquery-1.2.3.pack.js"></script>
    <script type="text/javascript" src="http://www.fdp-bw.de/jcarousel/lib/jquery.jcarousel.pack.js"></script>

    <link rel="stylesheet" type="text/css" href="http://www.fdp-bw.de/jcarousel/lib/jquery.jcarousel.css" />
    <link rel="stylesheet" type="text/css" href="http://www.fdp-bw.de/jcarousel/skins/tango/skin.css" />

    <style type="text/css">

    /**
     * Additional styles for the controls.
     */
    .jcarousel-control {
        margin-bottom: 10px;
        text-align: center;
    }

    .jcarousel-control a {
        font-size: 75%;
        text-decoration: none;
        padding: 0 5px;
        margin: 0 0 5px 0;
        border: 1px solid #fff;
        color: #eee;
        background-color: #4088b8;
        font-weight: bold;
    }

    .jcarousel-control a:focus,
    .jcarousel-control a:active {
        outline: none;
    }

    .jcarousel-scroll {
        margin-top: 10px;
        text-align: center;
    }

    .jcarousel-scroll form {
        margin: 0;
        padding: 0;
    }

    .jcarousel-scroll select {
        font-size: 75%;
    }

    #mycarousel-next,
    #mycarousel-prev {
        cursor: pointer;
        margin-bottom: -10px;
        text-decoration: underline;
        font-size: 11px;
    }

    </style>

    <script type="text/javascript">
        /**
        * We use the initCallback callback
        * to assign functionality to the controls
        */
        function mycarousel_initCallback(carousel) {
            jQuery('.jcarousel-control a').bind('click', function () {
                carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                return false;
            });

            jQuery('.jcarousel-scroll select').bind('change', function () {
                carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
                return false;
            });

            jQuery('#mycarousel-next').bind('click', function () {
                carousel.next();
                return false;
            });

            jQuery('#mycarousel-prev').bind('click', function () {
                carousel.prev();
                return false;
            });
        };

        // Ride the carousel...
        jQuery(document).ready(function () {
            jQuery("#mycarousel").jcarousel({
                scroll: 1,
                visible: 1,
                auto: 10,
                wrap: "last",
                initCallback: mycarousel_initCallback,
                // This tells jCarousel NOT to autobuild prev/next buttons
                buttonNextHTML: null,
                buttonPrevHTML: null
            });
        });

    </script>

    <div id="mycarousel" class="jcarousel-skin-tango">
        <ul>
        @foreach (var post in Model.AncestorOrSelf().Descendants("umbBlogPost"))
        {
            <li>
                <h2>@post.Name</h2>
                <div>@post.bodyText</div>
            </li>
        }
        </ul>
        <div class="jcarousel-control">
        @for (int i = 0; i < Model.AncestorOrSelf().Descendants("umbBlogPost").Count(); i++)
        {
             <a href="#">@(i + 1)</a>
        }
        </div>
    </div>

}
catch (Exception e)
{
    <!-- @e.ToString() -->
}

这会给你所有的帖子。您可能想要进行一些排序和过滤，然后获得前五名或其他：

var posts = Model.AncestorOrSelf().Descendants("umbBlogPost").OrderBy("PostDate desc").Take(5);

【讨论】：