阅读 1410

md在web良好展示的处理,三种实现定位时平缓滚动的方法(vue + Element ui + mark.js)

项目地址 https://github.com/liangxh0523/md_web_display

先上成果图

网页的布局

网页布局分为三部分,分别是

  • 头部header,固定定位
  • 侧边栏aside,固定定位,margin-top的值是header的高度
  • 内容contain,静态定位, margin-top值为header的高度,margin-left的值为aside的宽度,是router-view的出口。分为两部分:
    • 主内容,显示md转换后的html页面,margin-right值为md目录的宽度值
    • 提取markdown的h1和h2目录,用于标题导航,固定定位

功能

为了md能在网页上良好的展示,应具备以下功能:

  1. 点击左侧的菜单,可以获取到相应的md内容(字符串格式),将md内容转成html,为一级、二级标题加锚点id
  2. 为html增加md的格式,引入一个css即可,参考网址
  3. 提取md中的一级二级标题,在右侧显示文章目录
  4. 点击右侧文章目录,左侧内容可定位到相应的位置,还要做平滑滚动处理,增强用户体验,ps:主要讲这个功能的三种实现方法,分别是
    • 原生JS的方法,优点是兼容性好,几乎所有浏览器都支持,缺点是代码不优雅
    • css的scroll-behavior方法,优点是代码简单、优美,缺点是不支持safari(可能更多,只测试了opera、chrome、firefox)
    • js的scrollIntoView方法,优点是不需要锚点定位,代码简单。缺点也是浏览器兼容性问题,不支持safari
  5. 左侧内容滚动时,右侧目录的激活项随之动态变化

md转成html

我使用了marked.js将md转成html

//  先安装marked.js到本地
npm install marked --save
//  在组件内引入marked
import marked from 'marked';
//  marked的基本设置
marked.setOptions({
    renderer: rendererMD,
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
});
//  实例化
let rendererMD = new marked.Renderer();
watch: {
    '$route.path': {
        immediate:true,
        handler: function(newValue) {
            this.mode = newValue.slice(1);
            let index = 0;
            //  在rendererMD.heading里有自己的作用域,用this访问不到
            let mode = this.mode
            // 这里的处理只是为了同时展示多个demo,三种方法需要不同的处理方法
            rendererMD.heading = function(text, level) {
                if (level < 3) {
                    return `<h${level} id="${index++}" class="jump" >${text}</h${level}>`;
                } else {
                    return `<h${level}>${text}</h${level}>`;
                }
            };
            document.getElementsByTagName("html")[0].style['scroll-behavior'] = this.mode === 'css_demo' ? 'smooth' : '';
            this.compiledMarkdown = marked(str);
        }
    }
}
复制代码

在html中,用v-html绑定此计算属性即可

<div class="markdown-body" ref="content" id="content" v-html="compiledMarkdown">
复制代码

提取标题

getTitle(content) {
    let nav = [];
    let navLevel = [1, 2];
    let tempArr = [];
    content
        .replace(/```/g, function(match) {
            return '\f';
        })
        .replace(/\f[^\f]*?\f/g, function(match) {
            return '';
        })
        .replace(/\r|\n+/g, function(match) {
            return '\n';
        })
        // 以至少一个#开始,紧接非换行符外任意个字符进行惰性匹配,然后是一个换行符
        .replace(/(#+)[^#][^\n]*?(?:\n)/g, function(match, m1) {
            let title = match.replace('\n', '');
            let level = m1.length;
            tempArr.push({
                title: title.replace(/^#+/, '').replace(/\([^)]*?\)/, ''),
                level: level,
                children: []
            });
        });
    //  tempArr得到的是全部1-6级标题,将一级和二级过滤出来
    nav = tempArr.filter(_ => _.level <= 2);
    let index = 0;
    //  在此处加index值,这里和标签里绑定的id是对应的
    nav = nav.map(_ => {
        _.index = index++;
        return _;
    });
    let retNavs = [];
    let toAppendNavList;
    navLevel.forEach(level => {
        // 遍历一级和二级标题,将同一级的元素组成一个新数组
        toAppendNavList = this.find(nav, {
            level: level
        });
        if (retNavs.length === 0) {
            // 处理一级标题
            retNavs = retNavs.concat(toAppendNavList);
        } else {
            // 处理二级标题,把二级标题加到相应的父节点的children中
            toAppendNavList.forEach(_ => {
                _ = Object.assign(_);
                let parentNavIndex = this.getParentIndex(nav, _.index);
                return this.appendToParentNav(retNavs, parentNavIndex, _);
            });
        }
    });
    //  此处的retNavs就是处理后的树
    return retNavs;
},
//  处理属于同一级的标题,组成数组
find(arr, condition) {
    return arr.filter(_ => {
        for (let key in condition) {
            if (condition.hasOwnProperty(key) && condition[key] !== _[key]) {
                return false;
            }
        }
        return true;
    });
},
//  获取此节点的父节点
getParentIndex(nav, endIndex) {
    //  从当前的index开始找 1.距离自己最近的(递减体现) 2.level比本身小的(越小越高)
    for (var i = endIndex - 1; i >= 0; i--) {
        if (nav[endIndex].level > nav[i].level) {
            return nav[i].index;
        }
    }
},
//  找到同一个父节点的所有子节点
appendToParentNav(nav, parentIndex, newNav) {
    //  找到每一个二级标题的傅标题的index值
    let index = this.findIndex(nav, {
        index: parentIndex
    });
    if (index === -1) {
        // 这里处理的是三级及以下标题
        // 如果在一级标题里没找到父节点,就去每一个一级标题里的children里找
        let subNav;
        for (var i = 0; i < nav.length; i++) {
            // 处理没有父节点的情况
            subNav = nav[i];
            subNav.children.length && this.appendToParentNav(subNav.children, parentIndex, newNav);
        }
    } else {
        nav[index].children = nav[index].children.concat(newNav);
    }
},
//  找符合条件的数组中的成员
findIndex(arr, condition) {
    let ret = -1;
    arr.forEach((item, index) => {
        for (var key in condition) {
            if (condition.hasOwnProperty(key) && condition[key] !== item[key]) { // 不进行深比较
                return false;
            }
        }
        ret = index;
    });
    return ret;
},
复制代码

md目录的展示和锚点定位

<div id="menu">
    <ul class="nav-list">
        <li v-for="(nav, index) in contentMenu" :key="index">
            <a :href="'#' + nav.index" :class="{'active': highlightIndex === nav.index}" @click="handleHighlight(nav.index)" :key="nav.index">{{nav.title}}
            </a>
            <template v-if="nav.children.length > 0">
                <ul class="nav-list">
                    <li v-for="(item, index) in nav.children" :key="index">
                        <a :href="'#' + item.index" :class="{active: highlightIndex === item.index}" :key="item.index" @click="handleHighlight(item.index)">{{item.title}}
                        </a>
                    </li>
                </ul>
            </template>
        </li>
    </ul>
</div>
复制代码

平滑滚动

这里有三种方法实现平滑滚动

1. js原生的方法

当点击右侧的滚动条时,处理点击事件,根据点击元素的offsetTop和scrollTop值的差,确定需要滚动的距离

handleHighlight(item) {
    this.highlightIndex = item;
    if (this.mode === 'raw_js_demo') {
        this.rawJsScroll(item);
    } else if (this.mode === 'scroll_into_view') {
        let jump = document.querySelectorAll('.jump');
        jump[item].scrollIntoView({
            block: 'start',
            behavior: "smooth"
        });
    }
},
rawJsScroll(item) {
    let jump = document.querySelectorAll('.jump');
    //  这里的60是header的高度值
    let total = jump[item].offsetTop - 60;
    let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    // 平滑滚动,时长500ms,每10ms一跳,共50跳
    let step = total / 50;
    if (total > distance) {
        smoothDown();
    } else {
        let newTotal = distance - total;
        step = newTotal / 50;
        smoothUp();
    }
    function smoothDown() {
        if (distance < total) {
            distance += step;
            window.scrollTo(0, distance);
            setTimeout(smoothDown, 10);
        } else {
            window.scrollTo(0, total);
        }
    }
    function smoothUp() {
        if (distance > total) {
            distance -= step;
            window.scrollTo(0, distance);
            setTimeout(smoothUp, 10);
        } else {
            window.scrollTo(0, total);
        }
    }
}
复制代码

2. css的方式

如果是css的方式,滚动条的容器处的scroll-behavior属性设置为smooth值

document.getElementsByTagName("html")[0].style['scroll-behavior'] = this.mode === 'css_demo' ? 'smooth' : '';
复制代码

由于这里有header,所以需要锚点定位时进行偏移处理,所以对于需要定位到的元素h1、h2前面插入一个元素,这个元素的标签内绑定锚点值,它的padding-top和margin-top设置为相反数,值为头部的高度,这样就完成了定位元素的偏移处理。

rendererMD.heading = function(text, level) {
    if (level < 3) {
        return <div class="jump offset" id="${index++}"></div><h${level}>${text}</h${level}>`;
    } else {
        return `<h${level}>${text}</h${level}>`;
    }
};

div .offset {
    position: relative;
    padding-top: 40px;
    margin-top: -40px;
    visibility: hidden;
}
复制代码

3. JS的scrollIntoView()方法

如果使用scrollIntoView()的方法,就不需要加锚点值进行定位了,在目录项的点击事件中,使用当前选中元素,设置scrollIntoView()方法的block和behavior值,直接平滑滚动到指定的位置

rendererMD.heading = function(text, level) {
    if (level < 3) {
        return <div class="jump offset" id="${index++}"></div><h${level}>${text}</h${level}>`;
    } else {
        return `<h${level}>${text}</h${level}>`;
    }
};
handleHighlight(item) {
    let jump = document.querySelectorAll('.jump');
    jump[item].scrollIntoView({
        block: 'start',
        behavior: "smooth"
    });
}
复制代码

主内容滚动,目录高亮

在阅读md内容时,随着滚动条的变化,目录的高亮项也随着变化,这里有注意:

  • 在mounted的钩子函数中增加scroll的监听事件
  • 由于scroll是全局性的,所以,离开当前组件之前,应该移除此监听事件
mounted() {
    this.$nextTick(function() {
        window.addEventListener('scroll', this.onScroll);
    });
},
beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
},
methods: {
    onScroll() {
        let top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
        let items = document.getElementById('content').getElementsByClassName('jump');
        let currentId = '';
        for (let i = 0; i < items.length; i++) {
            let _item = items[i];
                let _itemTop = _item.offsetTop;
                //  处理三种平滑滚动处理方式时的偏移量不同
                let height = this.mode === 'raw_js_demo' ? 75 : (this.mode === 'css_demo' ? 10 : 0);
                if (top > _itemTop - height) {
                    currentId = i;
                } else {
                    break;
                }
        }
        if (currentId) {
            //  这里的currentOId是字符串,必须转换成数字,否则高亮项的全等无法匹配
            this.highlightIndex = parseInt(currentId);
        }
    }
}
复制代码

Summary

以上就是如何让md在网页上良好展示的全部功能,谷歌了多次,感谢分享经验的艾瑞巴dei,开源万岁~!

待改进的点有:

  • 如何避免非标题的#的正则匹配,比如// #这不是标题 格式的内容
  • md中h1和h2标签的处理,md中是允许html的,现在不能满足匹配h1、h2的标签

觉得有用的话请点赞~你的赞就是我更新最大的动力~!

关注下面的标签,发现更多相似文章
评论