{% assign tags = “all” %} {% for post in site.posts %}
{% for tag in post.tags %} {% unless tags contains tag %} {% capture tags %}{{ tags }}|{{ tag }}{% endcapture %} {% endunless %} {% endfor %}
{% endfor %}
{% assign alltags = tags | split: '|' %} <ul class=“tags”> {% for tag in alltags %} <a href=“javascript:;” data-rel=“{{ tag }}” class=“filter tag {% if tag == 'all' %}active{% endif %}” >{{ tag }}</a> {% endfor %} </ul>
<!– 方法2 列出 tags –>
github_category_index.html
layout: page
<div class=“posts-list”>
{% for post in site.categories[page.category] %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle"> {{ post.subtitle }} </h3> {% endif %} </a> <p class="post-meta"> <!-- Posted on {{ post.date | date: "%B %-d, %Y" }} --> Posted on {{ post.date | date: "%Y-%m-%d" }} </p> <div class="post-entry"> {{ post.content | truncatewords: 20 | strip_html | xml_escape}} <a href="{{ post.url | prepend: site.baseurl }}" class="post-read-more">[Read More]</a> </div> </article> {% endfor %}
</div>
github_tag_index.html
layout: page
<div class=“posts-list”>
{% for post in site.tags[page.tag] %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle"> {{ post.subtitle }} </h3> {% endif %} </a> <p class="post-meta"> <!-- Posted on {{ post.date | date: "%B %-d, %Y" }} --> Posted on {{ post.date | date: "%Y-%m-%d" }} </p> <div class="post-entry"> {{ post.content | truncatewords: 20 | strip_html | xml_escape}} <a href="{{ post.url | prepend: site.baseurl }}" class="post-read-more">[Read More]</a> </div> </article> {% endfor %}
</div>
<ul class=“posts”> {% for post in site.posts %}
{% if post.categories contains 'demography' %} <li><span>{{ post.date | date_to_string }}</span> » <a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></li> {% endif %}
{% endfor %} </ul>
js 获取 liquid 变量方法:
-
先给 html里 那个变量加上个 id/或者class
-
js 里 先定义变量 .
-
然后输出就可以了.…
{% capture tags %}
{% for tag in site.tags %} {{ tag[0] }} {% endfor %}
{% endcapture %} {% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
<h3 id="{{ tag }}">{{ tag }}</h3> <ul> {% for post in site.tags[tag] %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>
{% endfor %}
{% capture tags %}
{% for tag in site.tags %} {{ tag[0] }} {% endfor %}
{% endcapture %} {% assign sortedtags = tags | split:' ' | sort %} {% for tag in sortedtags %}
<a href="/tags/{{ tag }}/">{{ tag }}</a><br>
{% endfor %} This will generate a list of links like this:
<ul>
<li><a href="/tags/.net/">.net</a></li> <li><a href="/tags/authentication/">authentication</a></li> <li><a href="/tags/backup/">backup</a></li>
</ul>
逻辑操作
如下例,可以通过条件语句调整输出结果,只有当 show_heading 为 true 时才显示 <h1>:
heading: I like cupcakes show_heading: true
…
{% if page.show_heading %}
<h1>{{ page.heading | upcase | truncate: 8 }}</h1>
{% endif %}
… 下例增加了 elsif 语句进行多个条件的判断,当 show_heading 不为真时,判断 heading 中是否包含 “cupcake”:
heading: I like cupcakes show_heading: false
…
{% if page.show_heading %}
<h1>{{ page.heading | upcase | truncate: 8 }}</h1>
{% elsif page.heading contains “cupcake” %}
<h1>I want cupcakes</h1>
{% else %}
<h1>I don't want cupcakes</h1>
{% endif %}
… 除了 if 外,Liquid 中的 for 循环也很简单:
heading: I like cupcakes show_heading: false cupcakes:
- chocolate - lemon - strawberry
… <ul>
{% for cupcake in page.cupcakes %}
<li>{{ cupcake }}</li>
{% endfor %}
</ul> … 上面,将 front matter 中定义的 “cupcakes” 循环输出到列表中。另外 case 也是支持的:
<p class=“rating”>
{% case cupcake.rating %} {% when 1 %} <img src="/images/rating/sick.png"/> {% when 2 %} <img src="/images/rating/unhappy.png"/> {% when 3 %} <img src="/images/rating/ok.png"/> {% when 4 %} <img src="/images/rating/happy.png"/> {% when 5 %} <img src="/images/rating/super_happy.png"/> {% endcase %}
</p> LIQUID 中的 FILTER
下表是 Liquid 中常用的 filter,你也可以访问 Jekyll Cheat Sheet 查看所有可用的 filter 及样例。
filter 输出 {{ “cupcake” | prepend: “chocolate ” }} chocolate cupcake {{ “lemon” | append: “ cake” }} lemon cake {{ “i like cupcakes” | capitalize }} I like cupcakes {{ “BakeryStore” | downcase }} bakerystore {{ “apple pie” | upcase }} APPLE PIE {{ “muffin&cupcake?” | cgi_escape }} muffin%26cupcake%3F {{ “<h1>Banana Split</h1>” | escape }} <h1>Banana Split</h1> {{ “blueberry muffin.html” | slugify }} blueberry-muffin-html {{ “<h1>Greentea cheesecake</h1>” | strip_html }} Greentea cheesecake {{ “**Sour dough** bread” | markdownify }} Sour dough bread {{ “I really really like cupcakes” | remove_first: 'really' }} I really like cupcakes {{ “I really really like cupcakes” | remove: 'really' }} I like cupcakes {{ “I really really like cupcakes” | replace_first: “really”, “truly” }} I truly really like cupcakes {{ “I really really like cupcakes” | replace: “really”, “truly” }} I truly truly like cupcakes {{ “Carrot cake” | size }} 11 {{ “Peanut butter cheesecake” | number_of_words }} 3 {{ “Souffle” | slice: 0 }} S {{ “Souffle” | slice: 1 }} o {{ “Souffle” | slice: -2 }} l {{ “Souffle” | slice: 2,4 }} uffl {{ “apple,banana,carrot” | split:“,” | jsonify }} [“apple”,”banana”,”carrot”] {{ “The freshest bread in San Francisco” | truncate: 15 }} The freshest… {{ “Who ate all the cupcakes?” | truncatewords: 3 }} Who ate all…
上面这个网页中,不同图片使用了不同的 filter 样式,我们可以结合 Liquid 中的 cycle 和 for 循环实现:
layout: page title: Muffins
<h1>Our cupcakes</h1>
<div class=“cupcakes”>
{% for cupcake in site.cupcakes %} <div class="cupcake"> <div class="image"> <img src="{{ cupcake.image_path }}" alt="{{ cupcake.type }}" style="-webkit-filter: {% cycle "grayscale", "sepia", "invert" %}(100%)" /> </div> <h2>{{ cupcake.type }}</h2> <p>{{ cupcake.description }}</p> </div> {% endfor %}
</div> 通过 forloop.index 还能获得当前循环的次数:
… <h2>{{ forloop.index }}. {{ cupcake.type }}</h2>
如果要从 “0” 还是计数,可以改为:
… <h2>{{ forloop.index0 }}. {{ cupcake.type }}</h2> … 另外,可以使用 reversed 使 for 循环逆向进行:
…
{% for cupcake in site.cupcakes reversed %}
… 要限制 for 循环的输出个数可以使用 limit,而要跳过前 x 个输出可以使用 offset:
…
{% for cupcake in site.cupcakes reversed limit: 3 offset: 3 %}
…
{{testpara}} {% assign xujian = site.tags %} {% capture test %} {{ "site.tags" | append: ".Jekyll" }} {% endcapture %}
test: {{ test }} {% for cab in test %}
{{cab.title}}
{% endfor %}
<hr> 哈哈
{% for ca in site.tags.AJAX %}
{{ca.title}}
{% endfor %} <hr> 爸爸
<hr> xx
<ul class=“tagsLink”>
<li class="tagLink" data-filter="all">全部文章</li> {% for tagName in post.tags.AJAX %} <a href="{{ tagName.url | prepend: site.baseurl }}"> <li class="tagLink" data-filter="{{ tagName | first }}"> {{ tagName | first }} </li> {% endfor %} </ul>
哈哈哈
<!–
这里 要改的就是 .code 改成别的 给这行加个 id标签xx 好用JavaScript 来改. 然后就是js了 别人用的 是 data-filter..... 然后js里用 data.filter.... <ul id="sidebar-tags"> <li class="sidebar-tag active" data-filter="all">全部文章</li> {% for tag in site.tags %} <li class="sidebar-tag" data-filter="{{ tag | first }}">{{ tag | first }}</li> {% endfor %} </ul> // Tags Filter $('#sidebar-tags').on('click', '.sidebar-tag', function() { var filter = $(this).data('filter'); if (filter === 'all') { toc.fadeIn(350); } else { toc.hide(); $('.toc-link[data-tags~=' + filter + ']').fadeIn(350); } $(this).addClass('active').siblings().removeClass('active'); }); --> <p class="tagFor1"> for tagName in site.tags </p> <p class="tagFor2" > {{ tagName | first }} </p> <p class="tagFor3">endfor</p>
if(window.location.hash) {
var tag = window.location.hash.split('#')[1]; console.log(tag); // 丫的 这是 一个函数啊... 而不是 jquery的 那个filter?? filter(tag);
}
<hr> 所有标签 ✔︎ <hr>
<ul class="blog-tags-list"> {% assign sorted_tags = site.tags | sort %} {% for tag in sorted_tags %} {% assign tt = tag | first %} {% assign postst = tag | last %} <li class="blog-tag-item" id="{{ tt }}-item"> <a href onclick="filter('{{ tt }}'); return false;">{{ tt }}</a> </li> {% endfor %}
</ul>
{% for tag in site.tags %} {% assign t = tag | first %} {% assign posts = tag | last %} <div class="blog-list-container hidden" id="{{ t }}-container"> <ul class="blog-list"> {% for post in posts %} {% if post.tags contains t %} <li> <span class="blog-item-date">{{ post.date | date: "%d %b %Y" }}</span> <a href="{{ post.url }}">{{ post.title }}</a> </li> {% endif %} {% endfor %} </ul> {% assign numPosts = posts | size %} {% if numPosts == 1 %} <p>{{ posts | size }} post containing tag <b>{{ t }}</b></p> {% else %} <p>{{ posts | size }} posts containing tag <b>{{ t }}</b></p> {% endif %} </div>
{% endfor %}
<hr> coe类标签✔︎ <hr>
{% for someCate in site.categories.coe %} {{ someCate.tags }} <br> {% endfor %}
<hr>
<hr> 所有类✔︎ testing <hr>
<ul class=“cateUL”>
{% for cateDiv in site.categories %}
某分类✔︎: {{ cateDiv.first }} <br> 所有标签✔︎: <br> {% for sometag in site.tags %} {{sometag.first}} {% endfor %} <br>
<!– 循环输出 所有分类 ✔︎ –>
<li class="cateLI" data-catefilter="{{cateDiv.first }}"> <a href="#" class="cateLIa"> {% capture haha %} {{ site.categories }} {% endcapture%} 类数组✔︎: <br> {{ site.categories }} <br> <!-- haha : {"code"=>[#, #], "code5"=>[#], "code2"=>[#], "jekyll"=>[#]} 某文章有两个大类 就会出现两个# 所以用,号分割不准确.用 => 来分割最好. --> 类数量✔︎: {{ site.categories | split: "," | size }} <br> </a> </li> <br> {% endfor %}
</ul> <hr>
<hr> 所有分类+文件名+url ✔︎ <hr> {% for category in site.categories %}
<span>分类:{{ category | first }}</span> <span>文章数:{{ category | last | size }}</span> <ul class="arc-list"> {% for post in category.last %} <li>{{ post.date | date:"%d/%m/%Y"}} <a href="{{ post.url }}">{{ post.title }}</a> </li> {% endfor %} </ul> <br>
{% endfor %} <hr>
<hr> 各签各文章数 方法1 ✔︎ <hr>
{% for tag in site.tags %} {% assign TagName = tag | first %} {% assign TagNum = tag | last %} {{TagName | downcase | replace:" ","-" }} has {{ TagNum | size }} posts <br> {% endfor %}
<hr>
<hr> 各签各文章数 方法2 ✔︎ <hr>
{% for tag in site.tags %} <a href="#{{ tag[0] }}">{{ tag[0] }}</a> <sup>{{ tag[1].size }}</sup> {% endfor %}
<hr>
<hr> code类标签(单标签适用)✔︎ <hr>
{% for someCate in site.categories.code %} {{ someCate.tags }} <br> {% endfor %}
<hr>
<hr> code类标签(多标签适用)✗ <hr>
{% for someCate in site.categories.code %} {{ someCate.tags }} <br> {% endfor %}
<hr>
<hr> AJAX标签文章名+url ✔︎ <hr> {% for ca in site.tags.AJAX %}
{{ ca.title }}<br> {{ ca.url }} <br>
{% endfor %} <hr>
<hr> Misc标签文章名+url ✔︎ <hr> {% for ca in site.tags.Misc %}
{{ ca.title }} <br> {{ ca.url }} <br>
{% endfor %} <hr>
<hr> 各标签文章名+url ✔︎ <hr> <ul class=“listing”>
{% for tag in site.tags %} <li class="listing-seperator" id="{{ tag[0] }}">{{ tag[0] }}</li> {% for post in tag[1] %} <li class="listing-item"> <time >{{ post.date | date:"%Y-%m-%d" }}</time> <a href="{{ post.url }}" >{{ post.title }}</a> </li> {% endfor %}
{% endfor %} </ul>
<!–
获取 code 类的长度... html 存数据. css 获取数据 然后用 capture 捕获数据 给liquid用. 一旦 jekyll 开始编译 . 就可以获得几乎所有数据. 但是 怎么把数据 保存出来. 然后在点击标签/类的时候 提取数据就可以了. 怎么保存数据. 先 定义一个数组. 定义变量试试. 然后 push 进去.... push. 怎么循环出 某标签下的所有. 分类以及确定. 分类下 第一个标签也有了. 第二个标签 怎么循环出来. 也就是某类下的 所有标签. <hr> code类标签(单标签适用)✔︎ <hr> {% for someCate in site.categories.code %} {{ someCate.tags }} <br> {% endfor %}
<hr>
怎么把一个变量 输入到 html中.….
列出所有的 大类. 把大类 储存进一个数组
然后再遍历 数组里面的每一个值.
-->
<hr> code类 所有文件名✔︎+URL <hr>
{% for ca in site.categories.code %} <a href="{{ca.url}}"> {{ ca.title }} </a> {% endfor %}
<hr>
<hr> 所有标签✔︎ <hr>
{% for tag in site.tags %} {{tag | first }} <br> {% endfor %}
<hr>
<!–
解析: 显示所有 分类. 给每一个分类 一个特别的id: 自己的分类名-cateItem 然后 一旦点击这个分类 就执行一个 函数: cateFilter() 这个函数会把当前点击的 分类名 当作参数 传入到js 函数里面进行 操作. -->
tagDiv:
div1: 全部标签 class: tags-container; id: all-tagsContainer div2: 某类标签 class: tags-container hidden; id: 某类-tagsContainer. 全部标签.点击 触发 对应的tag. 隐藏filename 下 所有的 blog-list-container . 显示某签-container .
filenameDiv:
div1: 全部文章名 class: blog-list-container; id: all-container div2: 某签文章名 class: blog-list-container hidden; id: 某签-container
{% assign finalTags = “all” %} {% for cate in site.categories %} <!– 遍历出所有的大类. –>
{% assign Ca = cate | first %} <!-- Ca 是分类名. --> {% assign PP = cate | last %} <!-- PP 是该类下的所有数据集合... --> <div class="tagDiv2-catetags" id="{{Ca}}-cate"> <!-- 给每个分类一个ID --> {% for A in PP %} {% if A.categories contains Ca %} {% unless finalTags contains A.tags %} {% capture finalTags %} {{ finalTags }}|{{ A.tags }} {% endcapture %} {% endunless %} <div class="tagDiv3-catetags" id="{{A.tags}}-cate"> <a href onclick="filter('{{ t }}'); return false;"> div2:{{ A.tags }} </a> </div> <br> {% endif %} {% endfor %}
</div>
{% endfor %}
{% for cate in site.categories %} <!– 遍历出所有的大类. –>
{% assign Ca = cate | first %} <!-- Ca 是分类名. --> {% assign PP = cate | last %} <!-- PP 是该类下的所有文章集合... --> <div class="tagDiv2-catetags" id="{{Ca}}-cate"> <!-- 给每个分类一个ID --> {% for A in PP %} <!-- 遍历每篇文章中的数据 --> {% if A.categories contains Ca %} <!-- 如果这篇文章yml信息.包含当前分类 --> <div class="tagDiv3-catetags" id="{{A.tags}}-cate"> <a href onclick="filter('{{ t }}'); return false;"> div2:{{ A.tags }}<br> <!-- 那么就输出这篇文章的 标签. --> </a> </div> <br> {% capture capturedTag %} {{A.tags}} {% endcapture %} <!-- 捕获每次遍历出来的 tags. 这里还是有重复的. 要先过滤重复的.应为你是根据文章来过滤的. 如果 遍历出所有tag先. 然后 如果tag下的文章 --> {% endif %} {% endfor %}
</div>
{% endfor %}
{% for A in site.categories %} <!– 循环处理所有的大类. –> {% assign A1 = A | first %} <!– 开始处理一个个大类 –> <hr>循环类:{{A1}}
{% for B in site.tags %} <!-- 循环处理所有标签. --> {% assign B1 = B | first %} <!-- 开始处理一个标签. --> {% assign B2 = B | last %} <!-- 第一个标签.的所有文章 --> {% for C in B2 %} <!-- 遍历 第一个标签下的所有文章 --> {% capture xxoo %} {% if C.categories contains A1 %} {{ B1 }} {% endif %} {% endcapture %} {% endfor %} <!-- 结束第一个标签下. 所有文章的处理 --> {{ xxoo }} <!-- 这个就是当前类下的 标签!!!!!! --> {% endfor %} <!-- 结束第一个大类下的. 所有标签的处理 -->
{% endfor %}
★★★★★ 这段可用. 每个类下 的标签.
<div class="tagDiv3-catetags" id="{{A.tags}}-cate"> <a href onclick="filter('{{ t }}'); return false;">
{% unless xxoo == '' %}
div2:{{xxoo}}<br>
{% endunless %}
</a> </div> <br>
{% for A in site.categories %} <!– 循环处理所有的大类. –> {% assign A1 = A | first %} <!– 开始处理一个个大类 –> <div class=“tagDiv2-catetags” id=“{{A1}}-cate”> <!– <hr>循环类:{{A1}} –>
{% for B in site.tags %} <!-- 循环处理所有标签. --> {% assign B1 = B | first %} <!-- 开始处理一个标签. --> {% assign B2 = B | last %} <!-- 第一个标签.的所有文章 --> {% for C in B2 %} <!-- 遍历 第一个标签下的所有文章 --> {% capture xxoo %} {% if C.categories contains A1 %} {{ B1 }} {% endif %} {% endcapture %} {% endfor %} <!-- 结束第一个标签下. 所有文章的处理 --> <div class="tagDiv3-catetags" id="{{B1}}-cate"> <a href onclick="filter('{{ xxoo }}'); return false;"> {% unless xxoo == '' %} <span class="delEmptyrow-C"; id="{{xxoo}}-id">{{xxoo}}</span> {% endunless %} </a> </div> {% endfor %} <!-- 结束第一个大类下的. 所有标签的处理 -->
</div>
{% endfor %}