October CMS, Wordpress'e alternatif arayanlar için yılın CMS'si seçilmiş bir platform (platform demek yanlış olmaz sanırım). Ancak kullanması benim gördüğüm kadarıyla son kullanıcının biraz kod bilmesini gerektiriyor. Öyle Wordpress gibi tek tuşla kurayım hemen yazımı yayınlayayım durumu yok. Biraz ince ayar çekmek gerekiyor. 

Anasayfamda kullandığım kayan son yazılar için hem bir eklenti kullandım hem de Bootstrap Carousel'den faydalandım. Şimdi bu yapılanları tek tek ele alalım. 

Sitemde yazılarımı yayınlamak için Rainlab Blog Eklentisi kullanıyorum. 

Blog A robust blogging platform.

Blog eklentisi ile yazılan yazıları saydırmak ve en çok tıklananı göstermek için de ayrı bir eklenti gerekiyor. (her ihtiyaç için birşeyler ekleme mantığı var Octaber CMS'de. yamalaya yamalaya gidiyor)

Most Visited Posts | Register visits to RainLab Blog Publications and create a list of the most visited or most viewed posts in a period of time

ilgili eklentiyi de  October CMS'ye yükledikten sonra gelelim işin kod yazım kısmına. 

Sitenizde BOOTSTRAP 4 kodlarının ekli olması gerekli eğer yüklü değilse linkten gerekli dosyaları sayfanıza eklemelisiniz (Ben tema partials dosyalarında head.htm içerisine yazdım). Çünkü temel olarak Bootstrap 4 Carousel kullanacağız.  

Tüm bu kurulumları yaptıktan sonra aşağıda vereceğim kodu temanızın partials klasörü içerisine cokokunan.htm dosyası olarak kaydedin.

description = "Sitede En Çok Okunan  İçerik"
[viewBag]

[topPosts]

period = 5

category = 0

postPerPage = 5

postPage = "post"

slug = "{{ :slug }}"

==

<div id="carouselExampleIndicators" class="carousel slide col-lg-6" data-ride="carousel">

<h5 class="text-center"> En Çok Okunanlar </h5>

  <ol class="carousel-indicators">

    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>

    <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>

  </ol>

  <div class="carousel-inner">

  {% for post in mostVisitedPosts %}

    <div class="carousel-item {%if (loop.first)%}active{% endif %}">

      <img class="d-block img-fluid img-rounded" style="height:350; width:auto;" src="{{post.featured_images[0].path}}" alt="{{post.title}}">

  <div class="carousel-caption d-none d-md-block text-light bg-dark">

    <h5>{{post.title}}</h5>

    <p><a href="{{post.url}}">Devamını Oku...</a></p>

</div>

    </div>

{% endfor %}

  </div>

  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Önceki</span>

  </a>

  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Sonraki</span>

 </a>

</div>

Sitenizde kullacağınız alana 

{% partial 'cokokunan' %}

olarak ekliyoruz