Alist增加评论系统

需要用到alistLinkValine这个项目

alistLinkValine使用教程：

1. 参考Valine文档注册Valine账号验证邮箱并完成实名认证
2. 参考文档创建应用并获取APP ID 和 APP Key，把这两个参数对应替换进下面的jsaLinkV.js代码里

这行代码是cssaLinkV.css，把它填在 Alist前端的自定义头部 里

<style>
#vcomments{
    background-color: #fcecec;
    display: none;
    position: sticky;
    bottom:0px;
    right:0px;
    float: right;
    border-radius: 1rem;
    padding: 10px;
}
#vcbu{
    position:fixed;
    bottom:10px;
    left:0px;
    padding: 10px;
    border: 1px solid;
    border-radius: 10px;
}
</style>

这行代码是jsaLinkV.js，把它填在 Alist前端的自定义body 里

<script>
var width = window.innerWidth;
var height = window.innerHeight;
var url0 = window.location.href;
</script>
<script id="sc" src="//unpkg.com/valine/dist/Valine.min.js">
</script>
<script>
    function left() {
    var cl = document.querySelector("#root > div > div > div.overlay > div");
    cl.style.left=0+"px";
    cl.style.right='';
    cl.style.borderTopLeftRadius=0+"rem";
    cl.style.borderBottomLeftRadius=0+"rem";
    cl.style.borderTopRightRadius=0.5+"rem";
    cl.style.borderBottomRightRadius=0.5+"rem";
}
    function right() {
    var cl = document.querySelector("#root > div > div > div.overlay > div");
    cl.style.right=0+"px";
    cl.style.left='';
    cl.style.borderTopLeftRadius=0.5+"rem";
    cl.style.borderBottomLeftRadius=0.5+"rem";
    cl.style.borderTopRightRadius=0+"rem";
    cl.style.borderBottomRightRadius=0+"rem";
}
    function vlight() {
    oDiv.style.backgroundColor="#fffaf0";
    var vsys = document.getElementsByClassName("vsys");
    var vp = document.querySelectorAll('#vcomments p');
    var vinput = document.querySelectorAll('#vcomments input');
    var vtext =  document.querySelectorAll('#vcomments textarea');
    var vbutton =  document.querySelectorAll('#vcomments button');
    for (var i=0;i<vsys.length;i++){
    vsys[i].style.color="#000000";
}
    for (var i =0;i<vp.length;i++){
    vp[i].style.color="#000000";
}
    for (var i=0;i<vinput.length;i++){
    vinput[i].style.color="#000000";
}
    for (var i=0;i<vtext.length;i++){
    vtext[i].style.color="#000000";
}
    for (var i=0;i<vbutton.length;i++){
    vbutton[i].style.color="#000000";
}
}
    function vdark() {
    oDiv.style.backgroundColor="darkslategrey";
    var vsys = document.getElementsByClassName("vsys");
    var vp = document.querySelectorAll('#vcomments p');
    var vinput = document.querySelectorAll('#vcomments input');
    var vtext =  document.querySelectorAll('#vcomments textarea');
    var vbutton =  document.querySelectorAll('#vcomments button');
    for (var i=0;i<vsys.length;i++){
    vsys[i].style.color="#ffffff";
}
    for (var i =0;i<vp.length;i++){
    vp[i].style.color="#ffffff";
}
    for (var i=0;i<vinput.length;i++){
    vinput[i].style.color="#ffffff";
}
    for (var i=0;i<vtext.length;i++){
    vtext[i].style.color="#ffffff";
}
    for (var i=0;i<vbutton.length;i++){
    vbutton[i].style.color="#ffffff";
}
}
    window.onload=function () {
    setTimeout(gun(),1000);
};
    var video = document.getElementsByClassName("art-video-player");
    var oDiv = document.createElement('div');
    oDiv.id = 'vcomments';
    document.body.appendChild(oDiv);
    var obu = document.createElement('button');
    obu.id = 'vcbu';
    document.body.appendChild(obu);
    obu.innerText="留言";
    obu.onclick = function(){
    if (obu.innerText==="留言"){
    left();
    obu.innerText="收起";
    oDiv.style.display="block";
    oDiv.style.width=width/2+"px";
    if (video.length>0){
    video[0].style.display="none";
}
}else {
    right()
    obu.innerText="留言";
    oDiv.style.display="none";
    if (video.length>0){
    video[0].style.display="";
}
}
};
    window.addEventListener("click", function(){
    var bdl =document.querySelector("#root > div > div > div.overlay > div > span:nth-child(2) > button");
    var url=window.location.href;
    if (url!==url0){
    window.location.replace(url);
}
    if (obu.innerText==="收起"){
    if (bdl.ariaLabel==="切换到深色模式"){
    vlight();
}else {
    vdark();
}
}
});
    window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop)
    if (scrollTop<=height){
    oDiv.style.top = scrollTop+"px";
}
};
    var style="@-webkit-keyframes mymove {" +
    "    50% {right: "+width/4+"px;}" +
    "@keyframes mymove {" +
    "    50% {right: "+width/4+"px;}" +
    "}";
    var ele=document.createElement("style");
    ele.innerHTML=style;
    document.getElementsByTagName('head')[0].appendChild(ele)
    new Valine({
    el: '#vcomments',
    appId: '这里填入自己注册的appid',
    appKey: '这里填入自己注册的appkey',
    avatar:"hide",
    visitor: true,
    pageSize:3,
})
</script>

Alist 添加看板娘

这行代码填入 Alist前端的自定义头部 里

<!--看板娘 -->
<!--基础功能 -->
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
<!--增强功能(切换看板娘,关闭) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<!-- 更换背景图片 -->
<style>
  .chakra-ui-light {
    /*url括号后面就是背景图片链接,替换即可*/
    background-image: url(https://www.dmoe.cc/random.php);
    background-size: cover;
  }
</style>