1

newbyの質問を完了してください-私はどこでも（私は.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」ドキュメントタイプです。

各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のみ）をご覧ください。

4

1 に答える 1

0

このようなものが機能するはずです：

@{
// 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>
}

UmbracoのRazor構文の詳細については、この回答をご覧ください。

于 2012-08-19T03:46:28.560 に答える