430 Star 3K Fork 1.1K

GVP进击的皇虫 / BookStack

 / 详情

关于优化相关功能的建议

待办的
创建于  
2019-06-24 10:51

通过试用了作者的项目一段时间,提几点小建议。

一、建议对TOC实现tips,避免标题过长,不方便查看。
目前,对于已生成的文档,如果修改editor.md.js的话,需要重新保存一遍,但这是源头解决的办法;临时解决办法,增加一个函数,加载完后,批量增加<markdown-toc-list a> 的title.

function toc_tips(){var links=$(".markdown-toc-list a")
    $.each(links,function(){$(this).attr("title",$(this).text());});}
}

二、建议恢复目录分割条,便于目录标题过长时,拖拽查看。
启用原来的splitbar.js;和isFullScreen全局变量。修改目录的css,取消width,增加left和right。

$(function () {
    var splitBar = {
        // 设置当前屏幕为 840px 时将分割条隐藏
        maxWidth: 840,

        // 父元素选择器
        parentSelector: '.manual-body',

        /**
         * 初始化分割条
         */
        init: function () {
            var self = this;
            $(self.parentSelector)
            .append(
                $('\
                    <div id="manual-vsplitbar" unselectable="on"\
                    style="\
                        z-index:301;\
                        position: absolute;\
                        user-select: none;\
                        cursor: col-resize;\
                        left: 275px;\
                        height: 100%;\
                        display: block;\
                        width: 3px;">\
                        <a href="javascript:void(0)" accesskey="" tabindex="0" title="vsplitbar"></a>\
                    </div>\
                ')
                .hover(
                    function (event) {
                        event.target.style.background = '#8f949ad8';
                    },
                    function (event) {
                        event.target.style.background = '';
                    }
                )
            );

            self.loadingHtml();

            // 设置媒体查询
            mediaMatcher.set();
        },

        /**
         * 加载页面时设置分割条是否显示
         */ 
        loadingHtml: function () {
            var self = this;
            var htmlWidth = document.body.clientWidth;
            if (htmlWidth <= self.maxWidth) $('#manual-vsplitbar').css('display', 'none');
        },

        /**
         * 在打开关闭菜单事初始化左右窗口和分割条
         */
        reset: function () {
            if (!isFullScreen) {
                // 关闭菜单时,初始化左右窗口
                $('#manual-vsplitbar').css('display', 'none');
                splitBar.inMaxWidthReset();
                $('.manual-left-toggle').css('width', '278px');
            } else {
                 // 打开菜单时,初始化左右窗口
                $('#manual-vsplitbar').css('display', 'block');
                splitBar.outMaxWidthReset();
            }
        },

        /**
         * 屏幕小于等于 840px,重置左右窗口
         */
        inMaxWidthReset: function () {
            $('#manual-vsplitbar').css('display', 'none');
            $('.m-manual.manual-reader .manual-right').css('left', '0');
            $('.manual-left').css('width', '280px');
        },

        /**
         * 屏幕大于 840px,重置左右窗口
         */
        outMaxWidthReset: function () {
            $('.manual-right').css('left', '279px');
            $('.manual-left').css('width', '279px');
            $('#manual-vsplitbar').css('left', '275px').css('display', 'block');
        }
    }

    /**
     * 设置媒体查询
     * 分割条隐藏
     */
    var mediaMatcher = {
        mql: window.matchMedia('(max-width:' + splitBar.maxWidth + 'px)'),

        /**
         * 添加媒体查询监听事件
         */ 
        set: function () {
            var self = this;
            self.mql.addListener(self.mqCallback);
        },

        /**
         * 删除媒体查询监听事件
         */
        remove: function () {
            var self = this;
            self.mql.removeListener(self.mqCallback);
        },

        /**
         * 媒体查询回调函数
         */
        mqCallback: function (event) {
            if (event.target.matches) { // 宽度小于等于 840 像素
                $(".m-manual").removeClass('manual-fullscreen-active');
                splitBar.inMaxWidthReset();
            } else {                    // 宽度大于 840 像素
                splitBar.outMaxWidthReset();
            }
        }
    }

    // 初始化分割条
    splitBar.init();
    
    /**
     * 控制菜单宽度
     * 最小为 140px
     */
    $('#manual-vsplitbar').on('mousedown', function (e) {
        var bodyEle = $('.manual-body')[0];

        var leftPane = $('.manual-left')[0];
        var splitBar = $('#manual-vsplitbar')[0];
        var rightPane = $('.manual-right')[0];

        var disX = (e || event).clientX;

        splitBar.left = splitBar.offsetLeft;

        var docMouseMove = document.onmousemove;
        var docMouseUp = document.onmouseup;

        document.onmousemove = function (e) {
            var curPos = splitBar.left + ((e || event).clientX - disX);
            var maxPos = bodyEle.clientWidth - splitBar.offsetWidth;

            curPos > maxPos && (curPos = maxPos);
            curPos < 140 && (curPos = 140);

            leftPane.style.width = curPos + "px";
            splitBar.style.left = curPos - 3 + "px";
            rightPane.style.left = curPos + 3 + "px";

            return false;
        }

        document.onmouseup = function () {
            document.onmousemove = docMouseMove;
            document.onmouseup = docMouseUp;
            splitBar.releaseCapture && splitBar.releaseCapture();
        };

        splitBar.setCapture && splitBar.setCapture();
        return false;
    });

    /**
     * 关闭侧边栏时,同步分割条;
     */
    $(".article-search .pull-right").on("click", splitBar.reset);
});

三、建议发布时,对各文档重新解析一遍,避免域名或IP地址变更后,图片的地址仍为旧地址。

四、偶尔会报es的io/timeout错误。
输入图片说明![输入图片说明]
五、对友链的css进行修改,每行保留固定的链接数量,这样看起来会舒服一些。如果能对友链增加分类,然后在FOOT中,用TAB卡显示,觉得效果可能会更好一点。

以上均为使用作者原代码复现,目前正在测试中。

六、附件管理问题,建议修复不能删除和图片作为附件上传地址不正确的BUG.

评论 (0)

cnspray 创建了任务
cnspray 修改了描述
cnspray 修改了描述
展开全部操作日志

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(1)
Go
1
https://gitee.com/truthhun/BookStack.git
git@gitee.com:truthhun/BookStack.git
truthhun
BookStack
BookStack

搜索帮助