jekyll根据Url的Get参数动态变更内容
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)');