CKAN Templates Tutorial 8(v2.9): CSS class

http://docs.ckan.org/en/2.9/theming/templates.html#html-tags-and-css-classes

CKAN 使用的 CSS class 來自：

1. Bootstrap 3.3.7
   這個版本 Bootstrap 的 HTML, CSS, JavaScript 都可在 CKAN 中使用
2. CKAN 的 development primer page
   CKAN 網站下的 /testing/primer

延續 上個 CKAN templates snippet tutorial。

調整 snippet 裡的 CSS class

修改 ckanext-example_theme/ckanext/example_theme/templates/snippets/example_theme_most_popular_groups.html 如下：

{#

Renders a list of the site's most popular groups.

groups - the list of groups to render

#}

<div class="box">

  <header class="module-heading">

    <h3>Most popular groups</h3>

  </header>

  <section class="module-content">

    <ul class="unstyled">

      {% for group in groups %}

      <li>

        <a href="{{ h.url_for('group_read', action='read', id=group.name) }}">

          <h3>{{ group.display_name }}</h3>

        </a>

        {% if group.description %}

          <p>

            {{ h.markdown_extract(group.description, extract_length=80) }}

          </p>

        {% else %}

          <p>{{ _('This group has no description') }}</p>

        {% endif %}

        {% if group.package_count %}

          <strong>{{ ungettext('{num} Dataset', '{num} Datasets', group.package_count).format(num=group.package_count) }}</strong>

        {% else %}

          <span>{{ _('0 Datasets') }}</span>

        {% endif %}

      </li>

    {% endfor %}

 </ul>

  <section>

</div>

以上加入：

• 把程式碼放進
• <div class="box">
• <header class="module-heading">
• <section class="module-content">
• 用 Bootstrap 的 class="unstyled" 移除 <ul> 前的黑點

調整 layout1.html 的 CSS class

修改 ckanext-example_theme/ckanext/example_theme/templates/home/layout1.html 如下：

{% ckan_extends %}

{% block featured_group %}

  <div class="box">

    <header class="module-heading">

      <h3>Recent activity</h3>

    </header>

    <div class="module-content">

    <ul>

        {% for stream in h.recently_changed_packages_activity_stream(limit=4) %}

            <li>stream id: {{ stream.id }}</li>

        {% endfor %}

    </ul>

    </div>

  </div>

{% endblock %}

{% block featured_organization %}

  {% snippet 'snippets/example_theme_most_popular_groups.html',

             groups=h.example_theme_most_popular_groups()  %}

{% endblock %}

重新檢視網頁：