jekyll本身是预处理成静态页面,所以是不支持的。如果还是只用静态页面服务器的话,要支持只能从js上想办法。

JS获得GET参数

location.search可以获取get参数, 如?b=qq&c=dd,然后将其转化为json对象,我用的是字符串替换+JSON.parse

let urlParams = JSON.parse('{"'+location.search.substring(1).replace(/=/g,'":"').replace(/&/g,'","')+'"}')

对单个DOM元素在JS中修改

给DOM元素加id,再通过js修改即可。

  document.getElementById('name').innerText = someNewName

按GET参数不同显示不同的post

可以先在css中设置class,属性是display:none将元素隐藏,然后将所有的post按打上不同的class标记,再在js中遍历post的元素,将需要显示的class标记删除。
css:

.qq,.tr{
display:none;
}

预处理前的liquid代码

<li class="{{post.b}}"> ....</li>

js代码

    var all = document.getElementsByClassName(urlParams.b);
    console.log(all.length)
    //这儿删除了 i++, 因为 每次使用classList.remove, 都会让当前的all[i]从all的数组中删除, 数组会不断变短直至为0
    for (var i = 0; i < all.length;) { 
      all[i].classList.remove(urlParams.b)
    }

批量修改class颜色

可以通过css变量
参考:https://stackoverflow.com/questions/9436123/javascript-changing-a-class-style/65471649

:root {
    --some-color: red;
}

.someClass {
    color: var(--some-color);
}

Then you can change the variable's value in Javascript with

document.documentElement.style.setProperty('--some-color', '(random color)');

标签: none 阅读量: 1362

添加新评论