Umbraco，宏，将内容渲染到从文档到站点模板部分的列表中

Question

完整的新问题 - 我到处寻找（因为我不是 .NET 开发人员，发现很难）创建一个宏，将信息从创建的内容项中提取到一个列表中。

这里是我想介绍的信息：

<style>
ul#showcase {
  position: absolute;
  left: 0px;
  list-style: none;
  margin: 0px;
  padding: 0px;
  text-align: right;
}

.showbox {
  border: 2px solid #ffd83d;
  border-color: #ffd83d;
  border-radius: 2px;
  background-color: #660000;
  padding: 1em 2em;
  width: 190px;
  height: 152px;
  margin-left: -110px;
  box-shadow: 4px 4px 4px -1.5px rgba(62,99,125,.8);
}
.showbox a{
  color: #ffd83d;
  text-align: right;
}
.showbox:hover {
  -moz-transition: margin-left,background-color;
  -moz-transition-duration: 3s;
  -webkit-transition: margin-left,background-color;
  -webkit-transition-duration: 3s;
  -o-transition: margin-left,background-color;
  -o-transition-duration: 3s;
  transition: margin-left,background-color;
  transition-duration:3s;
  margin-left: 0px;
  background-color:#ffd83d;
}

.showbox:hover a  {
  position: relative;
  -moz-transition: color;
  -moz-transition-duration: 3s;
  -webkit-transition: color;
  -webkit-transition-duration: 3s;
  transition: color;
  transition-duration:3s;
  color: #333333;
}

.showbox a:hover  {
  -moz-transition: color;
  -moz-transition-duration: 1s;
  -webkit-transition: color;
  -webkit-transition-duration: 1s;
  -o-transition: color;
  -o-transition-duration: 1s;
  transition: color;
  transition-duration:1s;
  color: #660000;
}

.showbox-inner {
  position: relative;
  border: 0px solid red;
  border-radius: 4px;
  background-color: #333333;
  width: 110px;
  height: 120px;
  padding: 0px 90px 0px 10px;
  margin: 0px 0px 0px 0px;
}
.showbox-inner:hover {
  -moz-transition: margin-left,background-color;
  -moz-transition-duration: 3s;
  -webkit-transition: margin-left,background-color;
  -webkit-transition-duration: 3s;
  -o-transition-: margin-left,background-color;
  -o-transition--duration: 3s;
  transition: margin-left,background-color;
  transition-duration:3s;
  margin-left: 0px;
  background-color:#333333;
}

.showbox-inner p  {
  float: left;
  width: 75px;
  margin-left: 5px;
  padding: 5px 10px 5px 0px;
  margin: 0px 15px 5px 0px;
  text-align: left;
  color: white;
    }
  .showbox-image img{
  position: absolute;
  margin: 5px -10px;
  padding: 0px -10px;
   }

.showbox-inner:hover p {
  -moz-transition:color;
  -moz-transition-duration: 3s;
  -webkit-transition: color;
  -webkit-transition-duration: 3s;
  -o-transition-: color;
  -o-transition--duration: 3s;
  transition: color;
  transition-duration:3s;
  margin-left: 0px;
  color:#ffd83d;
}



</style>

<div>
  <ul id="showcase">
</li>
    <li>
      <div class="showbox"><a href="http://www.moomookwan.org"      target="blank">MooMooKwan</a>
      <div class="showbox-inner">
  <p>Korean MooMooKwan Hapkido Association Australia</p>
      <div class="showbox-image"><img src="../media/11698/MMK.png" width=110px height=110 /></div>
      </div>
      <a href="http://www.moomookwan.org" target="blank">Click to Visit</a>
            </div></li>
    <li>
      <div class="showbox"><a href="http://www.hapkido.co" target="blank">H.I.A</a>
      <div class="showbox-inner">
  <p>Hapkido International Association Australia</p>
      <div class="showbox-image"><img src="../media/11692/HIA-Logo.png" width=110px height=110 /></img></div>
      </div>
      <a href="http://www.hapkido.co" target="blank">Click to Visit</a>
            </div></li>
<li>
      <div class="showbox"><a href="http://www.martialartsgoldcoast.net" target="blank">Warrior Hapkido</a>
      <div class="showbox-inner">
      <p>Warrior Hapkido GoldCoast, QLD</p>
      <div class="showbox-image"><img src="../media/11710/warriorhapkido.png" width=110px height=110 /></div>
      </div>
      <a href="http://www.martialartsgoldcoast.net" target="blank">Click to Visit</a>
            </div></li>
<li>
      <div class="showbox"><a href="http://www.steveshapkido.com.au" target="blank">Steve's Hapkido</a>
      <div class="showbox-inner">
      <p>Steve's Hapkido Brisbane, QLD</p>
      <div class="showbox-image"><img src="../media/11704/SHA-Bris.png" width=110px height=110 /></div>
      </div>
       <a href="http://www.steveshapkido.com.au" target="blank">Click to Visit</a>
        </div></li>
  </ul> 
</div>

我已经包含了样式（即使这将是一个单独的样式表）我遇到的问题是每次我创建一个变量来显示我想要的项目时，我似乎把它弄得一团糟。

我要显示的项目都是我在根节点外的“showcaseFolder”下创建的所有“showcaseItem”文档类型。

我想从每个展示项目中显示的属性是：

dojangName - 文本字符串

dojangUrl - 文本字符串

dojangDescription - 简单的编辑器

dojangImage - 图像选择器（来自媒体）

看 - 显然我迷路了，理想情况下这是我想呈现的“类型”信息......

<li>
<div class="showbox"><a href="http://@showcaseItem.dojangUrl" target="blank">showcaseItem.dojangName</a>
<div class="showbox-inner">
<p>showcaseItem.dojangDescription</p>
<div class="showbox-image"><img src="showcaseItem.dojangImage" width=110px height=110 />    </div>
</div>
<a href="http://@showcaseItem.dojangUrl" target="blank">Click to Visit</a>
</div></li>

但我只是不知道从这里去哪里，所以我可以：

1. 列出父文件夹下的每个子文件夹
2. 将列表限制为 5 个随机变化的项目（愿望项目）

谁能帮忙？

看看我的虚拟网站http://propertymj.com（仅限chrome或firefox）。

Answer 1

这样的事情应该可以工作：

@{
// Get showcaseFolder:
var showcaseFolder = Library.NodeById(folderId);

// For debugging, output the name:
@showcaseFolder.Name

// Get five children at random:
var showcaseItems = showcaseFolder.Children.Random(5);

// For debugging, output the count:
@showcaseItems.Count()

// Iterate through items:
<ul>
@foreach (var item in showcaseItems)
{
    <li>
        <div class="showbox"><a href="http://@item.dojangUrl" target="blank">@item.dojangName</a>
            <div class="showbox-inner">
                <p>@item.dojangDescription</p>
                <div class="showbox-image"><img src="@Library.MediaById(item.dojangImage).umbracoFile" width=110px height=110 /></div>
            </div>
            <a href="http://@item.dojangUrl" target="blank">Click to Visit</a>
        </div>
    </li>
}
</ul>
}

查看this answer，了解更多关于 Umbraco 的 Razor 语法的优秀资源。