@hjkl6/dumi-theme-antv/dist/layouts/DocLayout.js

[](https://npmjs.org/package/@antv/dumi-theme-antv) [](https://npmjs.org/package/@antv/dumi

import { useLocation, useOutlet, useSiteData } from 'dumi';
import React, { useEffect } from 'react';
import { getCurrentPathname } from "../slots/utils";
import { Index } from "./entry/Index";
import { Manual } from "./entry/Manual";

// 用户手动添加自己的
import "../slots/_.less";
import "../slots/global";

/**
 * DocuLayout 是 dumi2 的内置 layout 入口，在这里使用页面路径进行区分成自己不同的 Layout。
 */
export default (function () {
  var _useSiteData = useSiteData(),
    themeConfig = _useSiteData.themeConfig,
    loading = _useSiteData.loading;
  var navs = themeConfig.navs;

  // 打印控制台文案
  useEffect(function () {
    console.log('%cAntV 让数据栩栩如生', 'color:#5B7102; font-size: 20px;'), console.log('%c新一代数据可视化解决方案', 'color:#5B7102;'), console.log('--------------------------'), console.log('%c关注我们的微信公众号 %c“数据可视化 AntV”%c，获取我们团队最新的进展、动态、分享，也欢迎加入我们！', 'color: red', 'color: pink', 'color: red');
  }, []);
  var outlet = useOutlet();
  var _useLocation = useLocation(),
    hash = _useLocation.hash;

  // 监听 hash 变更，跳转到锚点位置
  // 同时监听页面 loading 状态，因为路由按需加载时需要等待页面渲染完毕才能找到锚点位置
  useEffect(function () {
    var id = hash.replace('#', '');
    if (id) {
      var elm = document.getElementById(decodeURIComponent(id));
      if (elm) document.documentElement.scrollTo(0, elm.offsetTop - 80);
    }
  }, [loading, hash]);
  var p = getCurrentPathname();
  // 首页
  if (p === '/' || p === '/zh' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null);

  // 匹配 navs 中的 docs 路由
  var docsRoutes = navs.filter(function (nav) {
    return nav.slug && nav.slug.startsWith('docs/');
  }).map(function (nav) {
    return nav.slug && nav.slug.split('/').find(function (item) {
      return item !== 'docs';
    });
  });
  if (docsRoutes.some(function (route) {
    return p.startsWith("/".concat(route)) || p.startsWith("/docs/".concat(route));
  })) {
    return /*#__PURE__*/React.createElement(Manual, null, outlet);
  }
  return outlet;
});