留言板 - 辣椒の酱

removeif commented 5 years ago

https://removeif.github.io/message/

留言板信息。

noisky commented 5 years ago

博客风格很好看，Github Page竟然优化的这么快，赞！

removeif commented 5 years ago

博客风格很好看，Github Page竟然优化的这么快，赞！

@noisky 谢谢😊，做了部分cdn，要快一点点儿

GaisaiYuno commented 5 years ago

问一下这样正常吗感觉我的网站哪里设置错了，导致google没有抓到

GaisaiYuno commented 5 years ago

再补一张

removeif commented 5 years ago

@GaisaiYuno 这个我也不太清楚耶，我的也和你的差不多，可能有些不符合规则，没被抓进去吧

shiyi-box commented 5 years ago

这种风格是怎么弄的啊

removeif commented 5 years ago

这种风格是怎么弄的啊

@shiyi-box 就hexo+hexo主题，然后自己改了下主题，hexo+hexo主题搭建博客可以上网搜下。此博客源码也可以参考下。

shiyi-box commented 5 years ago

hexo里还有hexo主题....

removeif commented 5 years ago

hexo里还有hexo主题....

@shiyi-box是的呢，非常多哦

shiyi-box commented 5 years ago

小哥能给个联系方式吗

removeif commented 5 years ago

小哥能给个联系方式吗

@shiyi-box 邮箱：removeif@163.com，有什么问题？

shiyi-box commented 5 years ago

我想问下你那个音乐是怎么弄的在文章里面

removeif commented 5 years ago

@shiyi-box 三言两语说不清，去fork博客源码看看吧

shiyi-box commented 5 years ago

我把那个源码都下载了。。。。。嗯我看不懂那个音乐

removeif commented 5 years ago

我把那个源码都下载了。。。。。嗯我看不懂那个音乐

@shiyi-box 那没办法了，建议去看看一些js和css的教程，或者模仿着用

ghost commented 4 years ago

蟹蟹，已经改好了

removeif commented 4 years ago

蟹蟹，已经改好了

@AngelNI 嘿嘿，不客气😊

Sanarous commented 4 years ago

这个深色主题应用的不错哦

removeif commented 4 years ago

这个深色主题应用的不错哦

@Sanarous 谢谢，就配色太难了，配了好久，还好我博客颜色不多😂

zhyjc6 commented 4 years ago

向大佬学习！

removeif commented 4 years ago

向大佬学习！

@zhyjc6 言重了，并不是大佬，互相学习🤝

betsyx commented 4 years ago

哈哈，好久没来转转了，又加了好多内容呀

removeif commented 4 years ago

哈哈，好久没来转转了，又加了好多内容呀

@IronManlife 哈哈，欢迎来转👏

idealclover commented 4 years ago

来留个脚印！感觉主题好棒哇！为什么有时候旧评论放在最前面啦www 这样要翻好久~

removeif commented 4 years ago

@idealclover 来留个脚印！感觉主题好棒哇！为什么有时候旧评论放在最前面啦www 这样要翻好久~

这个评论插件没登录的话评论就不能最新的在前面排序😂

betsyx commented 4 years ago

元旦快乐！！！

removeif commented 4 years ago

@IronManlife 元旦快乐！！！

@IronManlife 嘿嘿，新年快乐

804434940 commented 4 years ago

博主你好想请问下画廊的配置在config开启后，然后官网提供的那个代码要在哪用呢

removeif commented 4 years ago

@804434940 博主你好想请问下画廊的配置在config开启后，然后官网提供的那个代码要在哪用呢

画廊是啥，在哪？我这没画廊呀😂

804434940 commented 4 years ago

不是哈哈哈就是你的美图那个怎么搞

removeif commented 4 years ago

@804434940 不是哈哈哈就是你的美图那个怎么搞

美图是hexo new page "美图",然后把图片写到.md文件中的源码里的这个文件，可以看下

804434940 commented 4 years ago

感谢~可是为啥我的是一排下去的没有相册的效果

removeif commented 4 years ago

@804434940 感谢~可是为啥我的是一排下去的没有相册的效果

不太清楚，可能格式没写对吧，你可以把我的源码fork过去对比对比，我这边是可以的

imaegoo commented 4 years ago

访问贵站首页，动画结束时，页面总会假死5秒左右，可以滚动，不能点击。

removeif commented 4 years ago

@imaegoo 访问贵站首页，动画结束时，页面总会假死5秒左右，可以滚动，不能点击。

我也不太清楚为啥😂，猜测是异步加载评论和推荐导致的，一加载出来就好了，之前都假死，也没看到报错。异步加载应该也不会导致假死吧。

imaegoo commented 4 years ago

我也不太清楚为啥😂，猜测是异步加载评论和推荐导致的，一加载出来就好了，之前都假死，也没看到报错。异步加载应该也不会导致假死吧。

首先用Performance工具分析一下假死的原因——

发现是 writeHtmlCommentCountValueById 这个方法，耗时4秒多，再看调用栈，是在发AJAX请求，并且是同步请求。

看下这个方法怎么写的——

于是我搜索了一下“jquery getJson”，了解到jQuery通过$.ajaxSettings.async来控制同步请求还是异步请求。

然后看下贵站是怎么设置的

原因很明显了，就是同步请求造成的js阻塞，而且这还是在一个循环里面。

这个设置默认是异步，那为什么要改成同步请求？继续搜索，我看到这篇文章——

https://removeif.github.io/theme/%E5%8D%9A%E5%AE%A2%E4%B8%ADgitalk%E6%9C%80%E6%96%B0%E8%AF%84%E8%AE%BA%E7%9A%84%E8%8E%B7%E5%8F%96.html

$.ajaxSettings.async = false;
// 此处保证是最后一条，api没有排序参数，只能分页取最后一条，保证最少的数据量传输，快速处理

还是没有明白为什么要同步……

猜想，是避免同时发出去太多拿评论数的请求？

如果是这样的话，是可以用js Promise的，同步请求造成阻塞，体验就太不好了。

function writeHtmlCommentCountValueById(id) {
    return new Promise(function (resolve) { // ES6 写法，可用 jquery 提供的 promise，提高兼容性
        $.getJSON(reqCommentCountUrl + id, function (result) {
            try {
                $("#" + id).html(result[0].comments);
            } catch (e) {
                console.error(e);
            } finally {
                resolve();
            }
        });
    }
}

调用的地方也改一改~

for (i = 0; i < gitalkIdsArr.length; i++) {
    var id = gitalkIdsArr[i].innerText;
    await writeHtmlCommentCountValueById(id); // ES6 写法，可用 jquery 提供的 promise，提高兼容性
}

最后删掉

$.ajaxSettings.async = false;

没有测试。。。你可以试一下。。。

更新，去掉兼容性比较差的await

var ids = [];
for (i = 0; i < gitalkIdsArr.length; i++) {
    var id = gitalkIdsArr[i].innerText;
    ids.push(id);
}
writeHtmlCommentCountValueByIds(ids);

function writeHtmlCommentCountValueByIds (ids, index) {
    if (!ids || !ids.length) return;
    if (!index) index = 0;
    writeHtmlCommentCountValueById(ids[index])
        .then(function () {
            index++;
            if (index < ids.length) {
                writeHtmlCommentCountValueByIds(ids, index);
            }
        })
}

removeif commented 4 years ago

@imaegoo

我也不太清楚为啥😂，猜测是异步加载评论和推荐导致的，一加载出来就好了，之前都假死，也没看到报错。异步加载应该也不会导致假死吧。

首先用Performance工具分析一下假死的原因——

发现是 writeHtmlCommentCountValueById 这个方法，耗时4秒多，再看调用栈，是在发AJAX请求，并且是同步请求。

看下这个方法怎么写的——

于是我搜索了一下“jquery getJson”，了解到jQuery通过$.ajaxSettings.async来控制同步请求还是异步请求。

然后看下贵站是怎么设置的

原因很明显了，就是同步请求造成的js阻塞，而且这还是在一个循环里面。

这个设置默认是异步，那为什么要改成同步请求？继续搜索，我看到这篇文章——

https://removeif.github.io/theme/%E5%8D%9A%E5%AE%A2%E4%B8%ADgitalk%E6%9C%80%E6%96%B0%E8%AF%84%E8%AE%BA%E7%9A%84%E8%8E%B7%E5%8F%96.html
$.ajaxSettings.async = false;
// 此处保证是最后一条，api没有排序参数，只能分页取最后一条，保证最少的数据量传输，快速处理
还是没有明白为什么要同步……

猜想，是避免同时发出去太多拿评论数的请求？

如果是这样的话，是可以用js Promise的，同步请求造成阻塞，体验就太不好了。
function writeHtmlCommentCountValueById(id) {
    return new Promise(function (resolve) { // ES6 写法，可用 jquery 提供的 promise，提高兼容性
        $.getJSON(reqCommentCountUrl + id, function (result) {
            try {
                $("#" + id).html(result[0].comments);
            } catch (e) {
                console.error(e);
            } finally {
                resolve();
            }
        });
    }
}
调用的地方也改一改~
for (i = 0; i < gitalkIdsArr.length; i++) {
    var id = gitalkIdsArr[i].innerText;
    await writeHtmlCommentCountValueById(id); // ES6 写法，可用 jquery 提供的 promise，提高兼容性
}
最后删掉
$.ajaxSettings.async = false;
没有测试。。。你可以试一下。。。

更新，去掉兼容性比较差的await
var ids = [];
for (i = 0; i < gitalkIdsArr.length; i++) {
    var id = gitalkIdsArr[i].innerText;
    ids.push(id);
}
writeHtmlCommentCountValueByIds(ids);

function writeHtmlCommentCountValueByIds (ids, index) {
    if (!ids || !ids.length) return;
    if (!index) index = 0;
    writeHtmlCommentCountValueById(ids[index])
        .then(function () {
            index++;
            if (index < ids.length) {
                writeHtmlCommentCountValueByIds(ids, index);
            }
        })
}

感谢百忙之中还抽时间帮忙看问题，上面同步的考虑是为了加载完请求的评论数据在进行渲染，前端也不太懂就写成那样了，现在改了改要好些了，把同步的去掉了如下

// 评论issues仓库 by.removeif https://removeif.github.io/
var repoIssuesUrl = "https://api.github.com/repos/removeif/blog_comment/issues";
// 对应仓库 clientId、clientSecret 关于这两个参数的安全问题，查看 https://removeif.github.io/2019/09/19/博客源码分享.html#1-热门推荐，最新评论：
var clientId = "46a9f3481b46ea0129d8";
var clientSecret = "79c7c9cb847e141757d7864453bcbf89f0655b24";
// 写comment count值
var reqCommentCountUrl = repoIssuesUrl + "?client_id=" + clientId + "&client_secret=" + clientSecret + "&t=" + new Date().getTime() + "&labels=Gitalk,";
// 评论缓存key
var COMMENT_CACHE_KEY = "commentKey";

function writeHtmlCommentCountValueById(id) {
    $.getJSON(reqCommentCountUrl + id, function (result) {
        try {
            if(result.length>0){
                $("#" + id).html(result[0].comments);
            }
        } catch (e) {
            console.error(e);
        }
    });
}

// 加载最新评论数据
function loadCommentDataAndRender() {
    // sort=comments可以按评论数排序，此处更适合按更新时间排序,可以根据updated排序，但是0条评论的也会出来，所以此处还是全部查出来，内存排序
    // per_page 每页数量，根据需求配置
    var resultArr = [];
    $.getJSON(repoIssuesUrl + "/comments?sort=created&direction=desc&per_page=7&page=1&client_id=" + clientId + "&client_secret=" + clientSecret, function (result) {
        var endIndex = result.length - 1;
        $.each(result, function (i, item) {
            var contentStr = item.body.trim();
            var isSubStr = true;
            contentStr = contentStr.replace(" ", "");
            contentStr = contentStr.replace("&nbsp;", "");
            // 第一次进来就有空格的情况
            let splitStr = "\n\n";
            let firstComm = contentStr.indexOf(">") > -1;
            let conArr = contentStr.split(splitStr);

            if (conArr.length == 2 && firstComm) {
                contentStr = conArr[1];
            } else if (conArr.length > 2 && firstComm) {
                contentStr = contentStr.substr(contentStr.indexOf(splitStr) + 4);
            } else {

                contentStr = contentStr.replace(/(-)+>/g, " to ");
                while (isSubStr) {
                    if (contentStr.lastIndexOf(">") != -1) {
                        var temp = contentStr.substr(contentStr.lastIndexOf(">") + 1);
                        if (temp == undefined || temp == "") {
                            isSubStr = true;
                            contentStr = contentStr.substr(0, contentStr.lastIndexOf(">") - 1);
                        } else {
                            isSubStr = false;
                            contentStr = temp;
                        }
                    } else {
                        isSubStr = false;
                    }
                }

            }

            if (contentStr == undefined || contentStr == "") {
                contentStr = "内容为空！";
            }

            // 替换图片
            contentStr = contentStr.replace(/![\s\w\](?:http(s)?:\/\/)+[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+\)/g, "[图片]");

            // 替换网址
            contentStr = contentStr.replace(/(?:http(s)?:\/\/)+[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+/g, "[网址]");
            if (contentStr.length > 50) {
                contentStr = contentStr.substr(0, 60);
                contentStr += "...";

            }

            // 获取跳转url
            var itemUrl = "";
            $.getJSON(item.issue_url + "?client_id=" + clientId + "&client_secret=" + clientSecret, function (result) {
                itemUrl = result.body.substr(0, result.body.indexOf("\n") - 1);
                // 放入
                resultArr.push({
                    "content": contentStr,
                    "date": item.created_at,
                    "userName": item["user"].login,
                    "userUrl": item["user"].html_url,
                    "userAvatar": item["user"].avatar_url,
                    "url": itemUrl
                });
                // 请求完之后渲染
                if(endIndex == i){
                    renderCommentData(resultArr);
                    // 存入缓存
                    var resultMap = {};
                    resultMap["date"] = new Date().getTime();
                    resultMap["data"] = resultArr;
                    if (resultArr.length > 0) {
                        localStorage.setItem(COMMENT_CACHE_KEY, JSON.stringify(resultMap));
                    }
                }
            });

        });
    });
}

// 渲染评论数据
function renderCommentData(COMMENT_ARR) {
    if (COMMENT_ARR.length > 0) {
        // 热门评论内容
        var htmlContentWidget = "<div class='comment-content'>";
        for (var i = 0; i < COMMENT_ARR.length; i++) {
            var item = COMMENT_ARR[i];
            var contentStr = item.content;
            htmlContentWidget +=
                "<div class='card-comment-item'>" + "<a href=\"" + item.userUrl + "\"target=\"_blank\">" + "<img class='ava' src='" + item.userAvatar + "'>" +
                "<div class=\"item-text\">" + item.userName + "</a>&nbsp;发表于" + getDateDiff(new Date(item.date).getTime()) + "<br>" + "<a href =\"" + item.url + '#comment-container' + "\"target=\"_blank\">" + contentStr + "</a></div>" +
                "</div><br>";
        }
        htmlContentWidget += "</div>"
        $(".body_hot_comment").html(htmlContentWidget);
    } else {
        $(".body_hot_comment").html("无数据记录！");
    }
}

// 加载热门推荐数据
function loadIndexHotData() {
    var classDiv = "";
    var hotContent = "";
    if ($("#index_hot_div").length > 0) {
        var hotDiv = $("#index_hot_div");
        $.ajaxSettings.async = false;
        $.getJSON(repoIssuesUrl + "?per_page=6&sort=comments&client_id=" + clientId + "&client_secret=" + clientSecret, function (result) {
            $.each(result, function (i, item) {
                // 标签配色
                if (i >= 0 & i < 4) {
                    classDiv = "class=\"item level3\"";
                } else if (i >= 4 & i < 7) {
                    classDiv = "class=\"item level2\"";
                } else if (i >= 7 & i < 9) {
                    classDiv = "class=\"item level1\"";
                } else {
                    classDiv = "class=\"item level0\"";
                }
                hotContent += "<a href =\"" + item.body.substr(0, item.body.indexOf("\n") - 1) + "\"target=\"_blank\"" + classDiv + ">" + item.title.substr(0, item.title.indexOf("-") - 1) + "&nbsp;🔥" + (item.comments * 101) + "</a>&nbsp;&nbsp;"
            })
            hotDiv.html("");
            if (hotContent == "") {
                hotDiv.append("无数据记录！");
            } else {
                hotDiv.append(hotContent);
            }
        });
    }
}

$(document).ready(setTimeout(function () { // 延迟1s执行，保证其余的先加载
        var COMMENT_ARR = {};
        var COMMENT_CACHE = localStorage.getItem(COMMENT_CACHE_KEY);
        var COMMENT = {};

        if (COMMENT_CACHE != '' || COMMENT_CACHE != null) {
            // 异常不影响结果，继续往下执行
            try {
                COMMENT = JSON.parse(COMMENT_CACHE);
                COMMENT_ARR = COMMENT["data"];
            } catch (e) {
                COMMENT_CACHE = '';
                console.error(e);
            }
        }

        if (COMMENT_CACHE == '' || COMMENT_CACHE == null || new Date().getTime() - COMMENT["date"] > 30 * 1000) { // request per 10 minutes
            console.log("req data...");
            loadCommentDataAndRender();
        } else {
            console.log("load cache data...");
            // 渲染评论数据
            renderCommentData(COMMENT_ARR);
        }

        // 首页热门推荐
        loadIndexHotData();

        // 装载评论数到文章对应位置
        var gitalkIdsArr = document.getElementsByClassName('display-none-class');
        if (gitalkIdsArr != undefined && gitalkIdsArr.length > 0) {
            for (i = 0; i < gitalkIdsArr.length; i++) {
                var id = gitalkIdsArr[i].innerText;
                writeHtmlCommentCountValueById(id);
            }
        }

        // console.clear();
        console.log("~~~~xiu xiu xiu 欢迎光临~~~");
        console.log("~~~~唉，控制台太多报错了，呜呜呜呜~~~");
        console.log("~~~~记得有时间多来看看哦，https://removeif.github.io/")
    }
    ,
    500
))
;

回头再试下你建议的方法，再次感谢

804434940 commented 4 years ago

为什么你们聊天我的邮箱一直响😂

removeif commented 4 years ago

@804434940 为什么你们聊天我的邮箱一直响😂

找到对应的「留言板 - 辣椒の酱#3」这个issue，点击取消订阅就好了。如图

removeif commented 4 years ago

@imaegoo 访问贵站首页，动画结束时，页面总会假死5秒左右，可以滚动，不能点击。

我现在博客已经上了最新icarus3.0，以及最新评论方法也去掉了同步的代码，但是感觉还是会假死😂

suzhigao commented 4 years ago

请问大佬怎样做到两个主题在线切换的

removeif commented 4 years ago

@suzhigao 请问大佬怎样做到两个主题在线切换的

没有两个主题在线切换呢，我这就一个深色模式，通过js改变css样式实现。还有可能就是另开一个网站地址，部署另外一套主题，然后切换就访问另一个网站。

suzhigao commented 4 years ago

@removeif

@suzhigao 请问大佬怎样做到两个主题在线切换的

没有两个主题在线切换呢，我这就一个深色模式，通过js改变css样式实现。还有可能就是另开一个网站地址，部署另外一套主题，然后切换就访问另一个网站。

怎么我看你的两个主题icarus和next是在同一个域名下的哈哈

removeif commented 4 years ago

@suzhigao

@removeif

@suzhigao 请问大佬怎样做到两个主题在线切换的

没有两个主题在线切换呢，我这就一个深色模式，通过js改变css样式实现。还有可能就是另开一个网站地址，部署另外一套主题，然后切换就访问另一个网站。

怎么我看你的两个主题icarus和next是在同一个域名下的哈哈

那个是两个网站，两个仓库了

suzhigao commented 4 years ago

好的，谢谢

februarysea commented 4 years ago

大佬你好，博客太酷了，请问优化访问的cdn有推荐吗，阿里云和腾讯云都需要备案过的域名才可以用。

removeif commented 4 years ago

@februarysea 大佬你好，博客太酷了，请问优化访问的cdn有推荐吗，阿里云和腾讯云都需要备案过的域名才可以用。

cdn这块我用的免费的jsDeliver，其余的也没用过，不太了解。

so1ve commented 4 years ago

汗啊。。请问您这个邮件订阅是怎么做的?

so1ve commented 4 years ago

Oh NO..原来Icarus已经有3.0了。。。博主您是怎么迁移的？？？

removeif commented 4 years ago

@FFRaycoder Oh NO..原来Icarus已经有3.0了。。。博主您是怎么迁移的？？？

Icarus dev分支是3.0的代码，fork过来改成自己的就好了。

removeif / blog_comment

留言板 - 辣椒の酱 #3