db.json

{"meta":{"version":1,"warehouse":"4.0.1"},"models":{"Asset":[{"_id":"themes/matery/source/favicon.png","path":"favicon.png","modified":0,"renderable":1},{"_id":"themes/matery/source/css/bb.css","path":"css/bb.css","modified":0,"renderable":1},{"_id":"themes/matery/source/css/gitment.css","path":"css/gitment.css","modified":0,"renderable":1},{"_id":"themes/matery/source/css/matery.css","path":"css/matery.css","modified":0,"renderable":1},{"_id":"themes/matery/source/css/my-gitalk.css","path":"css/my-gitalk.css","modified":0,"renderable":1},{"_id":"themes/matery/source/css/my.css","path":"css/my.css","modified":0,"renderable":1},{"_id":"themes/matery/source/js/matery.js","path":"js/matery.js","modified":0,"renderable":1},{"_id":"themes/matery/source/js/search.js","path":"js/search.js","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/avatar.png","path":"medias/avatar.png","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/comment_bg.png","path":"medias/comment_bg.png","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/contact.png","path":"medias/contact.png","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/cover.jpg","path":"medias/cover.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/icp.png","path":"medias/icp.png","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/logo.png","path":"medias/logo.png","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/animate/animate.min.css","path":"libs/animate/animate.min.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/aos/aos.css","path":"libs/aos/aos.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/aos/aos.js","path":"libs/aos/aos.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/aplayer/APlayer.min.css","path":"libs/aplayer/APlayer.min.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/aplayer/APlayer.min.js","path":"libs/aplayer/APlayer.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/background/canvas-nest.js","path":"libs/background/canvas-nest.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/background/ribbon-dynamic.js","path":"libs/background/ribbon-dynamic.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/background/ribbon-refresh.min.js","path":"libs/background/ribbon-refresh.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/background/ribbon.min.js","path":"libs/background/ribbon.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/codeBlock/codeBlockFuction.js","path":"libs/codeBlock/codeBlockFuction.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/codeBlock/codeCopy.js","path":"libs/codeBlock/codeCopy.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/codeBlock/codeLang.js","path":"libs/codeBlock/codeLang.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/codeBlock/codeShrink.js","path":"libs/codeBlock/codeShrink.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/cryptojs/crypto-js.min.js","path":"libs/cryptojs/crypto-js.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/dplayer/DPlayer.min.css","path":"libs/dplayer/DPlayer.min.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/dplayer/DPlayer.min.js","path":"libs/dplayer/DPlayer.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/echarts/echarts.min.js","path":"libs/echarts/echarts.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/gitalk/gitalk.css","path":"libs/gitalk/gitalk.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/gitalk/gitalk.min.js","path":"libs/gitalk/gitalk.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/gitment/gitment-default.css","path":"libs/gitment/gitment-default.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/gitment/gitment.js","path":"libs/gitment/gitment.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/instantpage/instantpage.js","path":"libs/instantpage/instantpage.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/jqcloud/jqcloud-1.0.4.min.js","path":"libs/jqcloud/jqcloud-1.0.4.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/jqcloud/jqcloud.css","path":"libs/jqcloud/jqcloud.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/jquery/jquery.min.js","path":"libs/jquery/jquery.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/masonry/masonry.pkgd.min.js","path":"libs/masonry/masonry.pkgd.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/materialize/materialize.min.css","path":"libs/materialize/materialize.min.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/materialize/materialize.min.js","path":"libs/materialize/materialize.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/minivaline/MiniValine.js","path":"libs/minivaline/MiniValine.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/others/busuanzi.pure.mini.js","path":"libs/others/busuanzi.pure.mini.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/others/clicklove.js","path":"libs/others/clicklove.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/prism/prism.css","path":"libs/prism/prism.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/scrollprogress/scrollProgress.min.js","path":"libs/scrollprogress/scrollProgress.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/tocbot/tocbot.css","path":"libs/tocbot/tocbot.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/tocbot/tocbot.min.js","path":"libs/tocbot/tocbot.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/valine/Valine.min.js","path":"libs/valine/Valine.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/valine/av-min.js","path":"libs/valine/av-min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/banner/0.jpg","path":"medias/banner/0.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/banner/1.jpg","path":"medias/banner/1.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/banner/2.jpg","path":"medias/banner/2.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/banner/3.jpg","path":"medias/banner/3.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/banner/4.jpg","path":"medias/banner/4.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/banner/5.jpg","path":"medias/banner/5.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/banner/6.jpg","path":"medias/banner/6.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/0.jpg","path":"medias/featureimages/0.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/1.jpg","path":"medias/featureimages/1.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/10.jpg","path":"medias/featureimages/10.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/11.jpg","path":"medias/featureimages/11.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/12.jpg","path":"medias/featureimages/12.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/13.jpg","path":"medias/featureimages/13.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/14.jpg","path":"medias/featureimages/14.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/15.jpg","path":"medias/featureimages/15.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/16.jpg","path":"medias/featureimages/16.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/17.jpg","path":"medias/featureimages/17.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/18.jpg","path":"medias/featureimages/18.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/19.jpg","path":"medias/featureimages/19.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/2.jpg","path":"medias/featureimages/2.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/20.jpg","path":"medias/featureimages/20.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/21.jpg","path":"medias/featureimages/21.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/22.jpg","path":"medias/featureimages/22.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/23.jpg","path":"medias/featureimages/23.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/3.jpg","path":"medias/featureimages/3.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/4.jpg","path":"medias/featureimages/4.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/5.jpg","path":"medias/featureimages/5.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/6.jpg","path":"medias/featureimages/6.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/7.jpg","path":"medias/featureimages/7.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/8.jpg","path":"medias/featureimages/8.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/featureimages/9.jpg","path":"medias/featureimages/9.jpg","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/reward/alipay.png","path":"medias/reward/alipay.png","modified":0,"renderable":1},{"_id":"themes/matery/source/medias/reward/wechat.png","path":"medias/reward/wechat.png","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/css/all.css","path":"libs/awesome/css/all.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.eot","path":"libs/awesome/webfonts/fa-brands-400.eot","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.svg","path":"libs/awesome/webfonts/fa-brands-400.svg","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.ttf","path":"libs/awesome/webfonts/fa-brands-400.ttf","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.woff","path":"libs/awesome/webfonts/fa-brands-400.woff","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.woff2","path":"libs/awesome/webfonts/fa-brands-400.woff2","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.eot","path":"libs/awesome/webfonts/fa-regular-400.eot","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.svg","path":"libs/awesome/webfonts/fa-regular-400.svg","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.ttf","path":"libs/awesome/webfonts/fa-regular-400.ttf","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.woff","path":"libs/awesome/webfonts/fa-regular-400.woff","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.woff2","path":"libs/awesome/webfonts/fa-regular-400.woff2","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.eot","path":"libs/awesome/webfonts/fa-solid-900.eot","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.svg","path":"libs/awesome/webfonts/fa-solid-900.svg","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.ttf","path":"libs/awesome/webfonts/fa-solid-900.ttf","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.woff","path":"libs/awesome/webfonts/fa-solid-900.woff","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.woff2","path":"libs/awesome/webfonts/fa-solid-900.woff2","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/css/lightgallery.min.css","path":"libs/lightGallery/css/lightgallery.min.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/fonts/lg.eot","path":"libs/lightGallery/fonts/lg.eot","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/fonts/lg.svg","path":"libs/lightGallery/fonts/lg.svg","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/fonts/lg.ttf","path":"libs/lightGallery/fonts/lg.ttf","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/fonts/lg.woff","path":"libs/lightGallery/fonts/lg.woff","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/img/loading.gif","path":"libs/lightGallery/img/loading.gif","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/img/video-play.png","path":"libs/lightGallery/img/video-play.png","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/img/vimeo-play.png","path":"libs/lightGallery/img/vimeo-play.png","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/img/youtube-play.png","path":"libs/lightGallery/img/youtube-play.png","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/lightGallery/js/lightgallery-all.min.js","path":"libs/lightGallery/js/lightgallery-all.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/share/css/share.min.css","path":"libs/share/css/share.min.css","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/share/fonts/iconfont.eot","path":"libs/share/fonts/iconfont.eot","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/share/fonts/iconfont.svg","path":"libs/share/fonts/iconfont.svg","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/share/fonts/iconfont.ttf","path":"libs/share/fonts/iconfont.ttf","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/share/fonts/iconfont.woff","path":"libs/share/fonts/iconfont.woff","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/share/js/jquery.share.min.js","path":"libs/share/js/jquery.share.min.js","modified":0,"renderable":1},{"_id":"themes/matery/source/libs/share/js/social-share.min.js","path":"libs/share/js/social-share.min.js","modified":0,"renderable":1}],"Cache":[{"_id":"source/_posts/Event的几种坐标取值.md","hash":"a1b71cec10ee779409f096a65beb1df92907310a","modified":1657350097936},{"_id":"source/_posts/Flex布局.md","hash":"031d4e6b68b6af68e15bb5a28db71a9d6bd3918f","modified":1657344766568},{"_id":"source/_posts/React-事件用法.md","hash":"e095baded51e2063ae88bb051a0bf27b66f3a555","modified":1657350116371},{"_id":"source/_posts/create-react-app配置多页应用.md","hash":"8b5783b7382bdadec22c7c196f4776c0944071f3","modified":1657350042185},{"_id":"source/about/index.md","hash":"3e4ca0d7e44460a8af80466550d2394d8fd31d13","modified":1657343591693},{"_id":"source/categories/index.md","hash":"b83dc982c3abd207ebe1a027492ab93608b5e20d","modified":1657343591693},{"_id":"source/tags/index.md","hash":"563d07373c27748dd7d4cd6520af4292fe731b82","modified":1657343591694},{"_id":"themes/matery/.gitignore","hash":"5340c994462c7345373e075529f40e60c1952f00","modified":1657343591753},{"_id":"themes/matery/CHANGELOG.md","hash":"484a703733b839bd98e016ddb015f028c2593fef","modified":1657343591753},{"_id":"themes/matery/LICENSE","hash":"b314c7ebb7d599944981908b7f3ed33a30e78f3a","modified":1657343591753},{"_id":"themes/matery/README.md","hash":"3cf955698147323913705be823ae834ae2f1ad00","modified":1657343591754},{"_id":"themes/matery/README_CN.md","hash":"7e41e2fe86021a4db8e2e05f977a22f107c75d6c","modified":1657343591754},{"_id":"themes/matery/_config.yml","hash":"123f767c223277dd91ec869079e6977aa733d89a","modified":1657355356061},{"_id":"themes/matery/languages/default.yml","hash":"9baf9370d0d7494e8575934e4bd0fa6d24484052","modified":1657343591757},{"_id":"themes/matery/languages/zh-CN.yml","hash":"13ce732a54ce08b0ca01f14fd09cbe8fc418de21","modified":1657343591757},{"_id":"themes/matery/languages/zh-HK.yml","hash":"ae34ac0e175c3037675722e436637efbceea32f0","modified":1657343591758},{"_id":"themes/matery/layout/404.ejs","hash":"162136ceca6c95928c90a1adef8fabc2161d5c0e","modified":1657343591758},{"_id":"themes/matery/layout/about.ejs","hash":"88e23163aae5dff7a2e7050f55c3754f0e76ae68","modified":1657343591770},{"_id":"themes/matery/layout/archive.ejs","hash":"57733d52d17361e735fcc95f875e0b1b9ebdcbd8","modified":1657343591770},{"_id":"themes/matery/layout/bb.ejs","hash":"6deb819e47fe11edd2fc87a6296cae725a0275f9","modified":1657343591771},{"_id":"themes/matery/layout/categories.ejs","hash":"c431e772d0f7700592228bbd9502793bdc28a893","modified":1657343591771},{"_id":"themes/matery/layout/category.ejs","hash":"4ac716d15d84e7c37f07308a5ec008a2ac090c9b","modified":1657343591771},{"_id":"themes/matery/layout/contact.ejs","hash":"19d62e521c4253496db559478db5164ddfd2480e","modified":1657343591772},{"_id":"themes/matery/layout/friends.ejs","hash":"a709898778c161dcb6d5bea047b8cb921628040c","modified":1657343591772},{"_id":"themes/matery/layout/index.ejs","hash":"e6e6ab8624081e0f5e2d459427ca5069d7435c19","modified":1657343591772},{"_id":"themes/matery/layout/layout.ejs","hash":"3ed55e0437a21b7ffd10dac5da79ce48a25b753a","modified":1657343591772},{"_id":"themes/matery/layout/post.ejs","hash":"3783bb4d7807e3a3701d67499a878c69a0a872d6","modified":1657343591773},{"_id":"themes/matery/layout/tag.ejs","hash":"058eb27ff10f5314d8b9e334c54419b9a6572315","modified":1657343591773},{"_id":"themes/matery/layout/tags.ejs","hash":"851c0ee599e91e7b1d657673859e8b6ff79cf50b","modified":1657343591773},{"_id":"themes/matery/source/favicon.png","hash":"774fee8c6d0be9dbb010b20f36c06848d06e3da0","modified":1657343591775},{"_id":"themes/matery/layout/_partial/back-top.ejs","hash":"be527741c39c9dc4a13ad712b49fe8db0147fe1e","modified":1657343591758},{"_id":"themes/matery/layout/_partial/background.ejs","hash":"6b4341fbba291c53de91babb2a0d69940a8d6547","modified":1657343591759},{"_id":"themes/matery/layout/_partial/baidu-analytics.ejs","hash":"4b01030b7136192bdbd704e29a0fe12f92767551","modified":1657343591759},{"_id":"themes/matery/layout/_partial/baidu-push.ejs","hash":"2841870e0c625787de348221e5ddb7bbe99ec5a2","modified":1657343591759},{"_id":"themes/matery/layout/_partial/bg-cover-content.ejs","hash":"58a7a07f8ab81ecc19a78d897955ca1ad73defb3","modified":1657343591759},{"_id":"themes/matery/layout/_partial/bg-cover.ejs","hash":"d5a7b9bb96e04c0a3485dd873748f19c50a6a04f","modified":1657343591760},{"_id":"themes/matery/layout/_partial/changyan.ejs","hash":"cd919d31564e118c2ee8d5cbfb7d51ee6da15d82","modified":1657343591760},{"_id":"themes/matery/layout/_partial/disqus.ejs","hash":"1b392f2160f962f62f3ddf5e1155c7f2f4888e1d","modified":1657343591760},{"_id":"themes/matery/layout/_partial/footer.ejs","hash":"2b33ec86be58152e0af06adcf66b1bf867940e20","modified":1657343591760},{"_id":"themes/matery/layout/_partial/gitalk.ejs","hash":"27764936791ce36b527bea63689435346bbfb425","modified":1657343591761},{"_id":"themes/matery/layout/_partial/github-link.ejs","hash":"fd4034bca2eb3987dcf113e6477260bee97eb1e7","modified":1657343591761},{"_id":"themes/matery/layout/_partial/gitment.ejs","hash":"90888c945384aa1ee4650bd43bd7ea670f25828c","modified":1657343591761},{"_id":"themes/matery/layout/_partial/google-analytics.ejs","hash":"890c8f04c1f4905dfceb3ea9fd6efdd040d79c01","modified":1657343591761},{"_id":"themes/matery/layout/_partial/head.ejs","hash":"baf823506b71f257a42b44adaa52d42344b9cb65","modified":1657343591761},{"_id":"themes/matery/layout/_partial/header.ejs","hash":"4bcdbd27273dd1b7098d4cfa6479b5d6b138cd12","modified":1657343591762},{"_id":"themes/matery/layout/_partial/index-cover.ejs","hash":"624d9cb78a5507895ab50d20f3f0c497a5025d08","modified":1657343591762},{"_id":"themes/matery/layout/_partial/livere.ejs","hash":"42728561c09589f79b698eb059ab4def53ed3642","modified":1657343591762},{"_id":"themes/matery/layout/_partial/minivaline.ejs","hash":"e1264587db510ae1885405aed433592291ae74c4","modified":1657343591762},{"_id":"themes/matery/layout/_partial/mobile-nav.ejs","hash":"8ce2974b19765e1f05d935a4f18abf7c84a980da","modified":1657343591763},{"_id":"themes/matery/layout/_partial/navigation.ejs","hash":"5a2179a9a3de6f56b0aaa154a11919b8f34fcbf9","modified":1657343591763},{"_id":"themes/matery/layout/_partial/paging.ejs","hash":"d8773abab5d0b672b70a9df20a8f9f7f6b0a2dae","modified":1657343591763},{"_id":"themes/matery/layout/_partial/post-cover.ejs","hash":"7f583c935253e2bf6421791715ee9de4989add6e","modified":1657343591763},{"_id":"themes/matery/layout/_partial/post-detail-toc.ejs","hash":"4c552a47ed5abda4f3f28fc55899e6008007a996","modified":1657343591764},{"_id":"themes/matery/layout/_partial/post-detail.ejs","hash":"89045a73ce4c486084c8a3ade686676e5d12e5e7","modified":1657343591764},{"_id":"themes/matery/layout/_partial/post-statis.ejs","hash":"de0d5763ddd64463f43135678b64c044884b8406","modified":1657343591764},{"_id":"themes/matery/layout/_partial/prev-next.ejs","hash":"1fb43f421de58aa24458f7d4a4cda44b8a3d62cc","modified":1657343591765},{"_id":"themes/matery/layout/_partial/reprint-statement.ejs","hash":"f67bc52bc5a2464ebe30f42c65c0ee38eeec2fda","modified":1657343591765},{"_id":"themes/matery/layout/_partial/reward.ejs","hash":"90c2ab31492f8226454537d6b987e9399119047d","modified":1657343591765},{"_id":"themes/matery/layout/_partial/search.ejs","hash":"4218ed406c43ed781fe78ad8bf1834fa4b76b049","modified":1657343591765},{"_id":"themes/matery/layout/_partial/share.ejs","hash":"e50fae64b6cfdbed18861eb49eca5018a920c7a4","modified":1657343591766},{"_id":"themes/matery/layout/_partial/social-link.ejs","hash":"f640583d45179abc1ef57951e7f61fb9e10f44c9","modified":1657343591766},{"_id":"themes/matery/layout/_partial/valine.ejs","hash":"ef335be75e3f26580583af8699b8497f350ae200","modified":1657343591766},{"_id":"themes/matery/layout/_widget/artitalk.ejs","hash":"b14e486f12b9ac42a273b80e4d785fcb94cf04b2","modified":1657343591766},{"_id":"themes/matery/layout/_widget/category-cloud.ejs","hash":"3ef458166041a8a12e493cc5963a5af5d98c1dfc","modified":1657343591767},{"_id":"themes/matery/layout/_widget/category-radar.ejs","hash":"131e2eabf6b216210efd0746300889adfee357be","modified":1657343591767},{"_id":"themes/matery/layout/_widget/dream.ejs","hash":"d6692f8c81013191fce59f47df1b6171649181ca","modified":1657343591767},{"_id":"themes/matery/layout/_widget/music.ejs","hash":"8fc0e6172abbed7084b06e3ed637ad37e2752c48","modified":1657343591767},{"_id":"themes/matery/layout/_widget/my-gallery.ejs","hash":"f5259f18a906f2862fe72b90c28125b5f6b7d0b1","modified":1657343591768},{"_id":"themes/matery/layout/_widget/my-projects.ejs","hash":"141f19a8aa41b7a21436f23ce114bd5fda932512","modified":1657343591768},{"_id":"themes/matery/layout/_widget/my-skills.ejs","hash":"9edbeb1ec6212762d597ae7a05b5a219f72c8f98","modified":1657343591768},{"_id":"themes/matery/layout/_widget/post-calendar.ejs","hash":"fb5ee7674070956d134ddca6890a9bd3f398cc0f","modified":1657343591769},{"_id":"themes/matery/layout/_widget/post-charts.ejs","hash":"20f0b6155eee348276dd91790f6a52b1005a0518","modified":1657343591769},{"_id":"themes/matery/layout/_widget/recommend.ejs","hash":"5f64edd00d0a7c3b5e90d5ff99c9ebba61482d75","modified":1657343591769},{"_id":"themes/matery/layout/_widget/tag-cloud.ejs","hash":"d32898104477acef56c33d00a68b48db15dcf2e6","modified":1657343591769},{"_id":"themes/matery/layout/_widget/tag-wordcloud.ejs","hash":"03dcd0a7a9fdbcc2bc38a99a8fad96ae17a340fa","modified":1657343591770},{"_id":"themes/matery/layout/_widget/video.ejs","hash":"6eaab5fccff9ad69d1d877a0f0585e2fcb89ba52","modified":1657343591770},{"_id":"themes/matery/source/css/bb.css","hash":"328a49b26ce663d9824c53aced118db4d55f2ac7","modified":1657343591774},{"_id":"themes/matery/source/css/gitment.css","hash":"d5ef623065d1fbc897119f7b70ccf7563e329917","modified":1657343591774},{"_id":"themes/matery/source/css/matery.css","hash":"0dbd96e75506ee8a25c2b97c67f04e63e6721c64","modified":1657343591774},{"_id":"themes/matery/source/css/my-gitalk.css","hash":"52b3b36a0ed3db3bdf8bf1f999e37731078c485b","modified":1657343591775},{"_id":"themes/matery/source/css/my.css","hash":"37683a9f11c68903a53e2b8593ca8c095a721896","modified":1657343591775},{"_id":"themes/matery/source/js/matery.js","hash":"ddfef10e80a09b8efb48c52ede773e71d5890c78","modified":1657343591776},{"_id":"themes/matery/source/js/search.js","hash":"02e6072d766c6f631b5b75e1d774409103605491","modified":1657343591776},{"_id":"themes/matery/source/medias/comment_bg.png","hash":"dfc93d24081884fbc58cab0f8fd19e77d31d6123","modified":1657343591834},{"_id":"themes/matery/source/medias/contact.png","hash":"443ea472dd49b74d9d70295837eb381c8c64f02c","modified":1657343591834},{"_id":"themes/matery/source/medias/icp.png","hash":"27a96f31f7d0413c6ade6f40e06f021f501151c7","modified":1657343591851},{"_id":"themes/matery/source/medias/logo.png","hash":"d9095f5ea8719374d9d1ff020279426f5b2a1396","modified":1657343591851},{"_id":"themes/matery/source/libs/animate/animate.min.css","hash":"5dfcbcee866e9dc564916416281885f3e320871e","modified":1657343591777},{"_id":"themes/matery/source/libs/aos/aos.css","hash":"ded9739f803d114c9168d3351fded72b3b478b4c","modified":1657343591777},{"_id":"themes/matery/source/libs/aos/aos.js","hash":"5a8e6d07ffa55642418ab3fd4b263aa08284b77a","modified":1657343591777},{"_id":"themes/matery/source/libs/aplayer/APlayer.min.css","hash":"7f4f8913f2d46ade2def5134e2cc8684a4b87939","modified":1657343591778},{"_id":"themes/matery/source/libs/aplayer/APlayer.min.js","hash":"70c0c4a9bf698747b7c058c21287ad617355e5dd","modified":1657343591779},{"_id":"themes/matery/source/libs/background/canvas-nest.js","hash":"d2569ef80127ed2f4af7ef4d9f82b037794eec69","modified":1657343591801},{"_id":"themes/matery/source/libs/background/ribbon-dynamic.js","hash":"8f53dbd5f9a40c377664bf8ca0d5d5ed75b91757","modified":1657343591802},{"_id":"themes/matery/source/libs/background/ribbon-refresh.min.js","hash":"6d98692b2cad8c746a562db18b170b35c24402f4","modified":1657343591802},{"_id":"themes/matery/source/libs/background/ribbon.min.js","hash":"6a99d494c030388f96f6086a7aaa0f03f3fe532e","modified":1657343591802},{"_id":"themes/matery/source/libs/codeBlock/codeBlockFuction.js","hash":"a8133367d48199e7505c2d831ca848b4202b9ba6","modified":1657343591802},{"_id":"themes/matery/source/libs/codeBlock/codeCopy.js","hash":"6ab7871d36cab438bbd4d781bc1fe7618b46b6e7","modified":1657343591802},{"_id":"themes/matery/source/libs/codeBlock/codeLang.js","hash":"066d2c89ad429e44f6467b9267da782ccaad57de","modified":1657343591803},{"_id":"themes/matery/source/libs/codeBlock/codeShrink.js","hash":"3edbe498f7bb9e7daa77f9db30e1b5eeab40e067","modified":1657343591803},{"_id":"themes/matery/source/libs/cryptojs/crypto-js.min.js","hash":"33810b2b757fc4327bc1d3b83bb5e0d3dc1fec5b","modified":1657343591804},{"_id":"themes/matery/source/libs/dplayer/DPlayer.min.css","hash":"5d52d3b34fceb9d7e11f1beaf7ed380b4249dec4","modified":1657343591804},{"_id":"themes/matery/source/libs/gitalk/gitalk.css","hash":"9c0bacfbd4519d3859e3bbb06128ba241804d8b1","modified":1657343591809},{"_id":"themes/matery/source/libs/gitment/gitment-default.css","hash":"a0625d8b432af8bdc820f8768d36cde439e7257c","modified":1657343591811},{"_id":"themes/matery/source/libs/instantpage/instantpage.js","hash":"043eba3c85c2e2009a9fabf3c4fc55537852fd86","modified":1657343591812},{"_id":"themes/matery/source/libs/jqcloud/jqcloud-1.0.4.min.js","hash":"26849509f196a2d21bbfd15696e5d5153163b8f1","modified":1657343591812},{"_id":"themes/matery/source/libs/jqcloud/jqcloud.css","hash":"4e6538c8312aeeab845d361c37a8c1a0931241f0","modified":1657343591812},{"_id":"themes/matery/source/libs/masonry/masonry.pkgd.min.js","hash":"f81cd7bfcf7aa2d043bd3e6077df42656fc44b82","modified":1657343591816},{"_id":"themes/matery/source/libs/minivaline/MiniValine.js","hash":"005185ce5c8250503a75c370a9eb8f044f016c78","modified":1657343591819},{"_id":"themes/matery/source/libs/others/busuanzi.pure.mini.js","hash":"6e41f31100ae7eb3a6f23f2c168f6dd56e7f7a9a","modified":1657343591819},{"_id":"themes/matery/source/libs/others/clicklove.js","hash":"6a39b8c683ba5dcd92f70c6ab45d1cfac3213e8e","modified":1657343591819},{"_id":"themes/matery/source/libs/prism/prism.css","hash":"f48db880f583ad8d078ebaaa7afe60c2991e2997","modified":1657343591820},{"_id":"themes/matery/source/libs/scrollprogress/scrollProgress.min.js","hash":"777ffe5d07e85a14fbe97d846f45ffc0087251cc","modified":1657343591820},{"_id":"themes/matery/source/libs/tocbot/tocbot.css","hash":"9783581bec83e6bd6cd279f0af23a2862f46a587","modified":1657343591823},{"_id":"themes/matery/source/libs/tocbot/tocbot.min.js","hash":"5ec27317f0270b8cf6b884c6f12025700b9a565c","modified":1657343591823},{"_id":"themes/matery/source/medias/featureimages/10.jpg","hash":"98e7f6fd9c97d4de9044b6871ca08ebf14db11b9","modified":1657343591838},{"_id":"themes/matery/source/medias/featureimages/13.jpg","hash":"35a320174f8e316e3eadaec658024276b651c6e9","modified":1657343591840},{"_id":"themes/matery/source/medias/featureimages/15.jpg","hash":"da0fbee3b7bde1607eace377ddf834c0be99edfe","modified":1657343591841},{"_id":"themes/matery/source/medias/featureimages/16.jpg","hash":"97a829c4bc94f9d2929b20a1a9b798c57b9f7205","modified":1657343591842},{"_id":"themes/matery/source/medias/featureimages/2.jpg","hash":"4bba691cf71a517ecaeaf42afd3e8f8b31e346c1","modified":1657343591844},{"_id":"themes/matery/source/medias/featureimages/21.jpg","hash":"b26edb128bb0bf58b23fd2f014e9555e89a2ca3b","modified":1657343591845},{"_id":"themes/matery/source/medias/featureimages/22.jpg","hash":"754579747a3e99747d890fca3162f370b96a7941","modified":1657343591846},{"_id":"themes/matery/source/medias/featureimages/23.jpg","hash":"7d7f37da3fa7128343adac23866449eb2c6a549a","modified":1657343591847},{"_id":"themes/matery/source/medias/featureimages/3.jpg","hash":"6ec646c2a70f5f11edacf225c1477f2200a37a96","modified":1657343591847},{"_id":"themes/matery/source/medias/featureimages/5.jpg","hash":"41ca20129a37fedc573eec28dd7d7b9e5b09228a","modified":1657343591848},{"_id":"themes/matery/source/medias/featureimages/7.jpg","hash":"7975141cd64e875122c0ea33daaca1a06bf00b8e","modified":1657343591850},{"_id":"themes/matery/source/medias/featureimages/8.jpg","hash":"8e4b7186352085483ca1174c7c0800114c48df8b","modified":1657343591850},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.eot","hash":"439c8afd3373acb4a73135a34e220464a89cd5e2","modified":1657343591789},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.ttf","hash":"0f4bd02942a54a6b3200d9078adff88c2812e751","modified":1657343591791},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.woff","hash":"59439d3ad31d856d78ec3e2bd9f1eafa2c7a581c","modified":1657343591791},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.woff2","hash":"f6f653b4ea8fc487bdb590d39d5a726258a55f40","modified":1657343591791},{"_id":"themes/matery/source/libs/lightGallery/css/lightgallery.min.css","hash":"1b7227237f9785c66062a4811508916518e4132c","modified":1657343591814},{"_id":"themes/matery/source/libs/lightGallery/fonts/lg.eot","hash":"54caf05a81e33d7bf04f2e420736ce6f1de5f936","modified":1657343591814},{"_id":"themes/matery/source/libs/lightGallery/fonts/lg.svg","hash":"67d261ac428761389c895e1da73664e633e14a72","modified":1657343591814},{"_id":"themes/matery/source/libs/lightGallery/fonts/lg.ttf","hash":"f6421c0c397311ae09f9257aa58bcd5e9720f493","modified":1657343591814},{"_id":"themes/matery/source/libs/lightGallery/fonts/lg.woff","hash":"3048de344dd5cad4624e0127e58eaae4b576f574","modified":1657343591815},{"_id":"themes/matery/source/libs/lightGallery/img/loading.gif","hash":"15a76af2739482d8de7354abc6d8dc4fca8d145e","modified":1657343591815},{"_id":"themes/matery/source/libs/lightGallery/img/video-play.png","hash":"2962e03ddbe04d7e201a5acccac531a2bbccddfc","modified":1657343591815},{"_id":"themes/matery/source/libs/lightGallery/img/vimeo-play.png","hash":"9b72fc0f86a01467ed0b68c9cc4d604ec316d517","modified":1657343591815},{"_id":"themes/matery/source/libs/lightGallery/img/youtube-play.png","hash":"f8d11384d33b7a79ee2ba8d522844f14d5067a80","modified":1657343591816},{"_id":"themes/matery/source/libs/lightGallery/js/lightgallery-all.min.js","hash":"f8cd48e1fff82ecd54a7ce3e69de8dba7c92d113","modified":1657343591816},{"_id":"themes/matery/source/libs/share/css/share.min.css","hash":"7126de5cec8371e580b7b1f22512da0985cc39e5","modified":1657343591820},{"_id":"themes/matery/source/libs/share/fonts/iconfont.eot","hash":"00ff749c8e202401190cc98d56087cdda716abe4","modified":1657343591821},{"_id":"themes/matery/source/libs/share/fonts/iconfont.svg","hash":"1d56c9d5db0273f07c43cc1397e440f98ba7827a","modified":1657343591821},{"_id":"themes/matery/source/libs/share/fonts/iconfont.ttf","hash":"afd898f59d363887418669520b24d175f966a083","modified":1657343591821},{"_id":"themes/matery/source/libs/share/fonts/iconfont.woff","hash":"2e3fce1dcfbd6e2114e7bfbeaf72d3c62e15a1bd","modified":1657343591822},{"_id":"themes/matery/source/libs/share/js/jquery.share.min.js","hash":"de34668d902ec082d17ddb6dd7ad24255fb547c5","modified":1657343591822},{"_id":"themes/matery/source/libs/share/js/social-share.min.js","hash":"ba635a17a9d9d132369f9fe4b1fbcaf001ea6ac9","modified":1657343591822},{"_id":"themes/matery/source/medias/reward/alipay.png","hash":"aab274edf06628d5b255f6e6fed766836d08ebc8","modified":1657355256758},{"_id":"themes/matery/source/medias/avatar.png","hash":"8b679bc30b559658ad0f388113a62c654517b58c","modified":1657352145630},{"_id":"themes/matery/source/libs/dplayer/DPlayer.min.js","hash":"82276be41d2001e820020a219b90ad5b026302d1","modified":1657343591805},{"_id":"themes/matery/source/libs/gitment/gitment.js","hash":"5a13983930b019450e4fe01a407c64b3dd316be4","modified":1657343591812},{"_id":"themes/matery/source/libs/jquery/jquery.min.js","hash":"a8927ac2830b2fdd4a729eb0eb7f80923539ceb9","modified":1657343591813},{"_id":"themes/matery/source/libs/valine/Valine.min.js","hash":"d6c03e8c3e547b5f48878081d10559b80f626948","modified":1657343591824},{"_id":"themes/matery/source/medias/banner/0.jpg","hash":"69ec96cd9b4bc3aa631adc9da61353f50c39f031","modified":1657343591826},{"_id":"themes/matery/source/medias/banner/2.jpg","hash":"39fb2535460ce66cc0b34e07ffb9411db1405f09","modified":1657343591829},{"_id":"themes/matery/source/medias/banner/3.jpg","hash":"4ac047e92d0363b1a61ab756aca6dac13fb77494","modified":1657343591830},{"_id":"themes/matery/source/medias/featureimages/0.jpg","hash":"1c3300f029fc85d6dda6fa4f1d699551034cdaf7","modified":1657343591836},{"_id":"themes/matery/source/medias/featureimages/1.jpg","hash":"684ae89de8cb7acefae19f5aee6c612037c46393","modified":1657343591837},{"_id":"themes/matery/source/medias/featureimages/11.jpg","hash":"f55972ce7175684f2b11c3c9fc2b5b14bccbfae8","modified":1657343591838},{"_id":"themes/matery/source/medias/featureimages/12.jpg","hash":"8a4b2e7d92ae95c3b0c921db23c35aa9a41a7d58","modified":1657343591839},{"_id":"themes/matery/source/medias/featureimages/14.jpg","hash":"38e11221406785bcd93aa9cd23e568e164630ef1","modified":1657343591841},{"_id":"themes/matery/source/medias/featureimages/17.jpg","hash":"42d47903551ee81885c1386022982cae165841c5","modified":1657343591842},{"_id":"themes/matery/source/medias/featureimages/18.jpg","hash":"64829272ec85bb819d55ff89e5b5fd6f64aa436b","modified":1657343591843},{"_id":"themes/matery/source/medias/featureimages/19.jpg","hash":"eb250906fdbc0c408f42ae9933725bc1a05d79fb","modified":1657343591844},{"_id":"themes/matery/source/medias/featureimages/20.jpg","hash":"3b11f9b461168d907073f793190865fe621a8573","modified":1657343591845},{"_id":"themes/matery/source/medias/featureimages/4.jpg","hash":"e06c47de27619984be9d5d02947f8370a432dfea","modified":1657343591848},{"_id":"themes/matery/source/medias/featureimages/6.jpg","hash":"c8f2aa4bbb041158b4e73733a341e6a77c8583f7","modified":1657343591849},{"_id":"themes/matery/source/medias/featureimages/9.jpg","hash":"b956a2291a04b2132366b53666cf34858b8bdb1f","modified":1657343591851},{"_id":"themes/matery/source/libs/awesome/css/all.css","hash":"6390d0a6e6211ebbd68b49759b4dec8b2a9f04c9","modified":1657343591780},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.eot","hash":"22f9e7d5226408eb2d0a11e118257a3ca22b8670","modified":1657343591782},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.ttf","hash":"91cbeeaceb644a971241c08362898599d6d968ce","modified":1657343591787},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.woff","hash":"18838f5260317da3c5ed29bf844ac8a4f7ad0529","modified":1657343591788},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.woff2","hash":"a46bd47ff0a90b812aafafda587d095cdb844271","modified":1657343591788},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.woff","hash":"92803b8753ceda573c6906774677c5a7081d2fbb","modified":1657343591800},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.woff2","hash":"9c081b88b106c6c04ecb895ba7ba7d3dcb3b55ac","modified":1657343591801},{"_id":"themes/matery/source/medias/reward/wechat.png","hash":"2e2acc9068928ea73f06644224d83afeed41c919","modified":1657354150073},{"_id":"themes/matery/source/medias/cover.jpg","hash":"d4957ff7cc5e88555cd840f2956ab0561e6f1ccf","modified":1657343591835},{"_id":"themes/matery/source/libs/gitalk/gitalk.min.js","hash":"7a3534269fd922d722a76c3affefc68e21246898","modified":1657343591811},{"_id":"themes/matery/source/libs/materialize/materialize.min.css","hash":"a69d456e3345e7f59cd0d47d1b3e70fd4a496a05","modified":1657343591817},{"_id":"themes/matery/source/libs/materialize/materialize.min.js","hash":"c843f0dc497314574c608ca28cc742bb041786d5","modified":1657343591818},{"_id":"themes/matery/source/libs/valine/av-min.js","hash":"9cb4babc20eb8fb5a86c4b0cc894fdb0f3cd9534","modified":1657343591825},{"_id":"themes/matery/source/medias/banner/1.jpg","hash":"ab122a36998a4f62a61e61a4fc5e00248113413b","modified":1657343591827},{"_id":"themes/matery/source/medias/banner/5.jpg","hash":"852418f4f09e796e12bc3bab7a1488d3f37d6486","modified":1657343591832},{"_id":"themes/matery/source/medias/banner/6.jpg","hash":"ed7282cc129c4ff9f322d2f2897fb4aac5c48589","modified":1657343591834},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-regular-400.svg","hash":"3d3a49445343d80f3b553e3e3425b9a7bd49acaf","modified":1657343591790},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.eot","hash":"cab8e84ae5682d1d556e234df9c790985888def8","modified":1657343591794},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.ttf","hash":"9521ed12274c2cbc910cea77657116fcf6545da3","modified":1657343591800},{"_id":"themes/matery/source/medias/banner/4.jpg","hash":"e5ac5033678afa9d69edffe9a61004f836cb5734","modified":1657343591831},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-brands-400.svg","hash":"5e2d2a159294576bea69cc3360efb5ffe110ab2d","modified":1657343591787},{"_id":"themes/matery/source/libs/awesome/webfonts/fa-solid-900.svg","hash":"7da88b19e1486f8c968d3cf5ab3f194f01ea17fd","modified":1657343591798},{"_id":"themes/matery/source/libs/echarts/echarts.min.js","hash":"8789b5e4daf0029a6c88f238f10e54d01c4fce82","modified":1657343591809},{"_id":"public/about/index.html","hash":"1851c7d59889b1d1c3ef0c7ba9531c0a6147d5a8","modified":1731660653546},{"_id":"public/categories/index.html","hash":"3bbef0023c1e58f67dc04a5dd8c2ef974e7bfbfd","modified":1731660653546},{"_id":"public/tags/index.html","hash":"2c58a0a1d66af41cc8758eb988b81f372da5b7e8","modified":1731660653546},{"_id":"public/2018/06/09/8be6e6ae12a2/index.html","hash":"33b240e6f71c21117b1d6f18088df8da8acd4598","modified":1731660653546},{"_id":"public/2018/04/08/9a0a6fb71065/index.html","hash":"6be74a65d042cfba5db197a6a76c52d5b459a408","modified":1731660653546},{"_id":"public/2018/03/02/1c4ffc3b8a39/index.html","hash":"5df61159823e706ca9db9fea85fe8f641f9dcc1a","modified":1731660653546},{"_id":"public/2018/02/26/9c3c73b03d8a/index.html","hash":"f96c55e5b415a31d534051c20fd5bc458624eedc","modified":1731660653546},{"_id":"public/archives/index.html","hash":"a07f5493bbf1789073541026b0e069acc89f70e3","modified":1731660653546},{"_id":"public/archives/2018/index.html","hash":"be560b14341b468b738f56a71832352fcb49c02b","modified":1731660653546},{"_id":"public/archives/2018/02/index.html","hash":"0ef098c319771133bc52d9cf51fec824a83a0e86","modified":1731660653546},{"_id":"public/archives/2018/03/index.html","hash":"a39466a5d0f73a39bddcda753f3234b5cd799bfe","modified":1731660653546},{"_id":"public/archives/2018/04/index.html","hash":"981ced551bbe219f50c880894d1fc9eb9fc23fe1","modified":1731660653546},{"_id":"public/archives/2018/06/index.html","hash":"00c883db72835bb34fd95af908be765c5629f086","modified":1731660653546},{"_id":"public/categories/JavaScript/index.html","hash":"48fc01256f10039720dd7a2d21d19170873bcb5b","modified":1731660653546},{"_id":"public/categories/CSS/index.html","hash":"c63b07ba487650b46a1734a3219156077b6c0608","modified":1731660653546},{"_id":"public/index.html","hash":"e64b22b13755f3e2e31d8de23713ab5eb1350774","modified":1731660653546},{"_id":"public/tags/前端/index.html","hash":"b6d82b5bb3e69cdfefa7e460bee75ec887524e18","modified":1731660653546},{"_id":"public/tags/React/index.html","hash":"4038f591dd3d7621e942315fe2993aaad8712c50","modified":1731660653546},{"_id":"public/favicon.png","hash":"774fee8c6d0be9dbb010b20f36c06848d06e3da0","modified":1731660653546},{"_id":"public/medias/contact.png","hash":"443ea472dd49b74d9d70295837eb381c8c64f02c","modified":1731660653546},{"_id":"public/medias/icp.png","hash":"27a96f31f7d0413c6ade6f40e06f021f501151c7","modified":1731660653546},{"_id":"public/medias/logo.png","hash":"d9095f5ea8719374d9d1ff020279426f5b2a1396","modified":1731660653546},{"_id":"public/medias/featureimages/16.jpg","hash":"97a829c4bc94f9d2929b20a1a9b798c57b9f7205","modified":1731660653546},{"_id":"public/medias/featureimages/2.jpg","hash":"4bba691cf71a517ecaeaf42afd3e8f8b31e346c1","modified":1731660653546},{"_id":"public/medias/featureimages/21.jpg","hash":"b26edb128bb0bf58b23fd2f014e9555e89a2ca3b","modified":1731660653546},{"_id":"public/medias/featureimages/22.jpg","hash":"754579747a3e99747d890fca3162f370b96a7941","modified":1731660653546},{"_id":"public/medias/featureimages/23.jpg","hash":"7d7f37da3fa7128343adac23866449eb2c6a549a","modified":1731660653546},{"_id":"public/medias/featureimages/3.jpg","hash":"6ec646c2a70f5f11edacf225c1477f2200a37a96","modified":1731660653546},{"_id":"public/medias/featureimages/5.jpg","hash":"41ca20129a37fedc573eec28dd7d7b9e5b09228a","modified":1731660653546},{"_id":"public/medias/featureimages/7.jpg","hash":"7975141cd64e875122c0ea33daaca1a06bf00b8e","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-regular-400.eot","hash":"439c8afd3373acb4a73135a34e220464a89cd5e2","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-regular-400.ttf","hash":"0f4bd02942a54a6b3200d9078adff88c2812e751","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-regular-400.woff","hash":"59439d3ad31d856d78ec3e2bd9f1eafa2c7a581c","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-regular-400.woff2","hash":"f6f653b4ea8fc487bdb590d39d5a726258a55f40","modified":1731660653546},{"_id":"public/libs/lightGallery/fonts/lg.eot","hash":"54caf05a81e33d7bf04f2e420736ce6f1de5f936","modified":1731660653546},{"_id":"public/libs/lightGallery/fonts/lg.svg","hash":"67d261ac428761389c895e1da73664e633e14a72","modified":1731660653546},{"_id":"public/libs/lightGallery/fonts/lg.ttf","hash":"f6421c0c397311ae09f9257aa58bcd5e9720f493","modified":1731660653546},{"_id":"public/libs/lightGallery/fonts/lg.woff","hash":"3048de344dd5cad4624e0127e58eaae4b576f574","modified":1731660653546},{"_id":"public/libs/lightGallery/img/loading.gif","hash":"15a76af2739482d8de7354abc6d8dc4fca8d145e","modified":1731660653546},{"_id":"public/libs/lightGallery/img/video-play.png","hash":"2962e03ddbe04d7e201a5acccac531a2bbccddfc","modified":1731660653546},{"_id":"public/libs/lightGallery/img/vimeo-play.png","hash":"9b72fc0f86a01467ed0b68c9cc4d604ec316d517","modified":1731660653546},{"_id":"public/libs/lightGallery/img/youtube-play.png","hash":"f8d11384d33b7a79ee2ba8d522844f14d5067a80","modified":1731660653546},{"_id":"public/libs/share/fonts/iconfont.eot","hash":"00ff749c8e202401190cc98d56087cdda716abe4","modified":1731660653546},{"_id":"public/libs/share/fonts/iconfont.svg","hash":"1d56c9d5db0273f07c43cc1397e440f98ba7827a","modified":1731660653546},{"_id":"public/libs/share/fonts/iconfont.ttf","hash":"afd898f59d363887418669520b24d175f966a083","modified":1731660653546},{"_id":"public/libs/share/fonts/iconfont.woff","hash":"2e3fce1dcfbd6e2114e7bfbeaf72d3c62e15a1bd","modified":1731660653546},{"_id":"public/medias/avatar.png","hash":"8b679bc30b559658ad0f388113a62c654517b58c","modified":1731660653546},{"_id":"public/medias/comment_bg.png","hash":"dfc93d24081884fbc58cab0f8fd19e77d31d6123","modified":1731660653546},{"_id":"public/medias/banner/0.jpg","hash":"69ec96cd9b4bc3aa631adc9da61353f50c39f031","modified":1731660653546},{"_id":"public/medias/featureimages/10.jpg","hash":"98e7f6fd9c97d4de9044b6871ca08ebf14db11b9","modified":1731660653546},{"_id":"public/medias/featureimages/13.jpg","hash":"35a320174f8e316e3eadaec658024276b651c6e9","modified":1731660653546},{"_id":"public/medias/featureimages/14.jpg","hash":"38e11221406785bcd93aa9cd23e568e164630ef1","modified":1731660653546},{"_id":"public/medias/featureimages/15.jpg","hash":"da0fbee3b7bde1607eace377ddf834c0be99edfe","modified":1731660653546},{"_id":"public/medias/featureimages/17.jpg","hash":"42d47903551ee81885c1386022982cae165841c5","modified":1731660653546},{"_id":"public/medias/featureimages/18.jpg","hash":"64829272ec85bb819d55ff89e5b5fd6f64aa436b","modified":1731660653546},{"_id":"public/medias/featureimages/19.jpg","hash":"eb250906fdbc0c408f42ae9933725bc1a05d79fb","modified":1731660653546},{"_id":"public/medias/featureimages/20.jpg","hash":"3b11f9b461168d907073f793190865fe621a8573","modified":1731660653546},{"_id":"public/medias/featureimages/4.jpg","hash":"e06c47de27619984be9d5d02947f8370a432dfea","modified":1731660653546},{"_id":"public/medias/featureimages/8.jpg","hash":"8e4b7186352085483ca1174c7c0800114c48df8b","modified":1731660653546},{"_id":"public/medias/featureimages/9.jpg","hash":"b956a2291a04b2132366b53666cf34858b8bdb1f","modified":1731660653546},{"_id":"public/medias/reward/alipay.png","hash":"aab274edf06628d5b255f6e6fed766836d08ebc8","modified":1731660653546},{"_id":"public/medias/reward/wechat.png","hash":"2e2acc9068928ea73f06644224d83afeed41c919","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-brands-400.woff","hash":"18838f5260317da3c5ed29bf844ac8a4f7ad0529","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-brands-400.woff2","hash":"a46bd47ff0a90b812aafafda587d095cdb844271","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-solid-900.woff","hash":"92803b8753ceda573c6906774677c5a7081d2fbb","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-solid-900.woff2","hash":"9c081b88b106c6c04ecb895ba7ba7d3dcb3b55ac","modified":1731660653546},{"_id":"public/medias/cover.jpg","hash":"d4957ff7cc5e88555cd840f2956ab0561e6f1ccf","modified":1731660653546},{"_id":"public/medias/banner/2.jpg","hash":"39fb2535460ce66cc0b34e07ffb9411db1405f09","modified":1731660653546},{"_id":"public/medias/banner/5.jpg","hash":"852418f4f09e796e12bc3bab7a1488d3f37d6486","modified":1731660653546},{"_id":"public/medias/banner/6.jpg","hash":"ed7282cc129c4ff9f322d2f2897fb4aac5c48589","modified":1731660653546},{"_id":"public/medias/featureimages/0.jpg","hash":"1c3300f029fc85d6dda6fa4f1d699551034cdaf7","modified":1731660653546},{"_id":"public/medias/featureimages/1.jpg","hash":"684ae89de8cb7acefae19f5aee6c612037c46393","modified":1731660653546},{"_id":"public/medias/featureimages/11.jpg","hash":"f55972ce7175684f2b11c3c9fc2b5b14bccbfae8","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-brands-400.eot","hash":"22f9e7d5226408eb2d0a11e118257a3ca22b8670","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-brands-400.ttf","hash":"91cbeeaceb644a971241c08362898599d6d968ce","modified":1731660653546},{"_id":"public/css/bb.css","hash":"aa15633888c7cf9baea8bb48d796c68b57cf14bf","modified":1731660653546},{"_id":"public/css/gitment.css","hash":"2bd15cc17dca35ac3ecc0acf167a23a1dd362acd","modified":1731660653546},{"_id":"public/css/my-gitalk.css","hash":"af18dd29e58642c18bab9b89541767b494c468dd","modified":1731660653546},{"_id":"public/css/my.css","hash":"497e50351f7838f8546cac76850a42e7e380a110","modified":1731660653546},{"_id":"public/js/matery.js","hash":"b86de5fe3e9766b7ff80df12ea41c3a9e30825f7","modified":1731660653546},{"_id":"public/js/search.js","hash":"e1482406c58ea2a0eb178d7e4efb2c879cdddc80","modified":1731660653546},{"_id":"public/libs/aos/aos.js","hash":"02bfb40b0c4b6e9b0b4081218357145cbb327d74","modified":1731660653546},{"_id":"public/libs/aplayer/APlayer.min.css","hash":"07372a2ba507388d0fed166d761b1c2c2a659dce","modified":1731660653546},{"_id":"public/libs/background/canvas-nest.js","hash":"65333d0dbb9c1173a1b13031b230161fc42c8b2f","modified":1731660653546},{"_id":"public/libs/background/ribbon-dynamic.js","hash":"052b80c29e6bc585aa28d4504b743bdbac220a88","modified":1731660653546},{"_id":"public/libs/background/ribbon-refresh.min.js","hash":"6d98692b2cad8c746a562db18b170b35c24402f4","modified":1731660653546},{"_id":"public/libs/background/ribbon.min.js","hash":"6a99d494c030388f96f6086a7aaa0f03f3fe532e","modified":1731660653546},{"_id":"public/libs/codeBlock/codeBlockFuction.js","hash":"c7ab06d27a525b15b1eb69027135269e9b9132fb","modified":1731660653546},{"_id":"public/libs/codeBlock/codeCopy.js","hash":"6d39a766af62e625f177c4d5cf3adc35eed71e61","modified":1731660653546},{"_id":"public/libs/codeBlock/codeLang.js","hash":"bac88b4d4e3679732d29bd037c34f089cf27cf05","modified":1731660653546},{"_id":"public/libs/codeBlock/codeShrink.js","hash":"201e8cd761b4be557247bdaf1ebc7c11c83194f6","modified":1731660653546},{"_id":"public/libs/instantpage/instantpage.js","hash":"83ce8919b1a69b2f1809ffaf99b52a8627e650e9","modified":1731660653546},{"_id":"public/libs/jqcloud/jqcloud-1.0.4.min.js","hash":"257eaae3020599e4939f50d5008a743827f25b8c","modified":1731660653546},{"_id":"public/libs/jqcloud/jqcloud.css","hash":"20d9f11a19d95c70e27cb922e0d6dccbec4eae89","modified":1731660653546},{"_id":"public/libs/others/busuanzi.pure.mini.js","hash":"6e41f31100ae7eb3a6f23f2c168f6dd56e7f7a9a","modified":1731660653546},{"_id":"public/libs/others/clicklove.js","hash":"6a39b8c683ba5dcd92f70c6ab45d1cfac3213e8e","modified":1731660653546},{"_id":"public/libs/prism/prism.css","hash":"62e5474893dece076534352f564ceabd6e088a5a","modified":1731660653546},{"_id":"public/libs/tocbot/tocbot.css","hash":"9ab8ef576c9a57115194152e79cca79b0a41dd70","modified":1731660653546},{"_id":"public/libs/scrollprogress/scrollProgress.min.js","hash":"777ffe5d07e85a14fbe97d846f45ffc0087251cc","modified":1731660653546},{"_id":"public/libs/tocbot/tocbot.min.js","hash":"5ec27317f0270b8cf6b884c6f12025700b9a565c","modified":1731660653546},{"_id":"public/libs/share/css/share.min.css","hash":"8a778a86f3ce9a042df6be63a9f1039631e351a5","modified":1731660653546},{"_id":"public/medias/banner/1.jpg","hash":"ab122a36998a4f62a61e61a4fc5e00248113413b","modified":1731660653546},{"_id":"public/medias/banner/3.jpg","hash":"4ac047e92d0363b1a61ab756aca6dac13fb77494","modified":1731660653546},{"_id":"public/medias/featureimages/12.jpg","hash":"8a4b2e7d92ae95c3b0c921db23c35aa9a41a7d58","modified":1731660653546},{"_id":"public/medias/featureimages/6.jpg","hash":"c8f2aa4bbb041158b4e73733a341e6a77c8583f7","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-regular-400.svg","hash":"3d3a49445343d80f3b553e3e3425b9a7bd49acaf","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-solid-900.eot","hash":"cab8e84ae5682d1d556e234df9c790985888def8","modified":1731660653546},{"_id":"public/libs/aos/aos.css","hash":"191a3705a8f63e589a50a0ff2f2c5559f1a1b6b2","modified":1731660653546},{"_id":"public/libs/gitalk/gitalk.css","hash":"940ded3ea12c2fe1ab0820d2831ec405f3f1fe9f","modified":1731660653546},{"_id":"public/libs/gitment/gitment-default.css","hash":"2903c59ee06b965bef32e937bd69f5b0b2190717","modified":1731660653546},{"_id":"public/libs/masonry/masonry.pkgd.min.js","hash":"ff940b4ea68368ca0e4d5560cbb79fb147dfc3c5","modified":1731660653546},{"_id":"public/libs/lightGallery/css/lightgallery.min.css","hash":"1b7227237f9785c66062a4811508916518e4132c","modified":1731660653546},{"_id":"public/libs/share/js/jquery.share.min.js","hash":"41367dcb857e02e3c417ebe68a554ce1d4430806","modified":1731660653546},{"_id":"public/libs/share/js/social-share.min.js","hash":"a3090a02786dcd4efc6355c1c1dc978add8d6827","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-solid-900.ttf","hash":"9521ed12274c2cbc910cea77657116fcf6545da3","modified":1731660653546},{"_id":"public/css/matery.css","hash":"d68d5e9405fcef481a6e76165df27b5ab5cdf8cd","modified":1731660653546},{"_id":"public/libs/cryptojs/crypto-js.min.js","hash":"5989527a378b55011a59522f41eeb3981518325c","modified":1731660653546},{"_id":"public/libs/dplayer/DPlayer.min.css","hash":"f7d19655f873b813ffba5d1a17145c91f82631b8","modified":1731660653546},{"_id":"public/libs/minivaline/MiniValine.js","hash":"fbb58c37e2c74f127ae0c566afa9b48889aab79f","modified":1731660653546},{"_id":"public/libs/animate/animate.min.css","hash":"97afa151569f046b2e01f27c1871646e9cd87caf","modified":1731660653546},{"_id":"public/libs/aplayer/APlayer.min.js","hash":"22caa28ff6b41a16ff40f15d38f1739e22359478","modified":1731660653546},{"_id":"public/libs/lightGallery/js/lightgallery-all.min.js","hash":"9f5ef4bc8a0a3c746ca4f3c3e6d64493b1a977d8","modified":1731660653546},{"_id":"public/libs/gitment/gitment.js","hash":"28c02c45ce568e084cd1041dc493f83f9c6c88c6","modified":1731660653546},{"_id":"public/libs/valine/Valine.min.js","hash":"6cbdbf91e1f046dd41267a5ff0691a1fccba99df","modified":1731660653546},{"_id":"public/libs/awesome/css/all.css","hash":"ecc41e32ad2696877a1656749841f3b5543bbe3d","modified":1731660653546},{"_id":"public/libs/jquery/jquery.min.js","hash":"2115753ca5fb7032aec498db7bb5dca624dbe6be","modified":1731660653546},{"_id":"public/medias/banner/4.jpg","hash":"e5ac5033678afa9d69edffe9a61004f836cb5734","modified":1731660653546},{"_id":"public/libs/dplayer/DPlayer.min.js","hash":"c3bad7b265574fab0ae4d45867422ea1cb9d6599","modified":1731660653546},{"_id":"public/libs/materialize/materialize.min.css","hash":"a69d456e3345e7f59cd0d47d1b3e70fd4a496a05","modified":1731660653546},{"_id":"public/libs/gitalk/gitalk.min.js","hash":"8fefe38f28804f90116bdcb74a0875c9de9f3b7d","modified":1731660653546},{"_id":"public/libs/valine/av-min.js","hash":"541efb9edc1ce425cbe3897cfc25803211fe6a05","modified":1731660653546},{"_id":"public/libs/materialize/materialize.min.js","hash":"c8b4c65651921d888cf5f27430dfe2ad190d35bf","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-brands-400.svg","hash":"5e2d2a159294576bea69cc3360efb5ffe110ab2d","modified":1731660653546},{"_id":"public/libs/awesome/webfonts/fa-solid-900.svg","hash":"7da88b19e1486f8c968d3cf5ab3f194f01ea17fd","modified":1731660653546},{"_id":"public/libs/echarts/echarts.min.js","hash":"9496f386a0da4601cad22c479cc5543913a4d67f","modified":1731660653546},{"_id":"source/_posts/Ubuntu安装docker-ce的详细教程.md","hash":"b5e5f7b5cf728fa66e859f5413dd2a42bea0cd16","modified":1731660229599},{"_id":"public/2024/11/15/ffcf33074073/index.html","hash":"b43e2ffac9bf96474b4712e021877cc521441f3d","modified":1731660653546},{"_id":"public/archives/2024/index.html","hash":"b1f4637d1e8a180d35dadb817aa8a03ef5f77045","modified":1731660653546},{"_id":"public/archives/2024/11/index.html","hash":"38bc395758a768f8321ba90ca0cdd7e1e5d76ea6","modified":1731660653546},{"_id":"public/categories/Linux/index.html","hash":"4168f1b730d774b6c9e1c344920d35f44bd0bd49","modified":1731660653546},{"_id":"public/tags/Docker/index.html","hash":"82726af225d689e96687db5a8a66c54469d441d3","modified":1731660653546}],"Category":[{"name":"JavaScript","_id":"cl5dmn5hu0004bwvj0oan7e6o"},{"name":"CSS","_id":"cl5dmn5hy0009bwvj9ltsdpco"},{"name":"Linux","_id":"cm3ihsqe800019wuo2oya1rsm"}],"Data":[],"Page":[{"title":"about","date":"2022-07-08T09:21:30.000Z","type":"about","layout":"about","_content":"","source":"about/index.md","raw":"---\ntitle: about\ndate: 2022-07-08 17:21:30\ntype: about\nlayout: about\n---\n","updated":"2022-07-09T05:13:11.693Z","path":"about/index.html","comments":1,"_id":"cl5dmn5hk0000bwvj7n956z5s","content":"","site":{"data":{}},"excerpt":"","more":""},{"title":"categories","date":"2022-07-08T09:17:35.000Z","type":"categories","layout":"categories","_content":"","source":"categories/index.md","raw":"---\ntitle: categories\ndate: 2022-07-08 17:17:35\ntype: categories\nlayout: categories\n---\n","updated":"2022-07-09T05:13:11.693Z","path":"categories/index.html","comments":1,"_id":"cl5dmn5hs0002bwvj5nvx0tob","content":"","site":{"data":{}},"excerpt":"","more":""},{"title":"tags","date":"2022-07-08T09:19:16.000Z","type":"tags","layout":"tags","_content":"","source":"tags/index.md","raw":"---\ntitle: tags\ndate: 2022-07-08 17:19:16\ntype: tags\nlayout: tags\n---\n","updated":"2022-07-09T05:13:11.694Z","path":"tags/index.html","comments":1,"_id":"cl5dmn5hw0006bwvj48zi2jlp","content":"","site":{"data":{}},"excerpt":"","more":""}],"Post":[{"title":"Event的几种坐标取值","date":"2018-03-02T10:56:23.000Z","_content":"\n\n# 相对于整个页面的坐标\n\n```javascript\nevent.pageX;\nevent.pageY;\n//注：IE8不支持\n```\n\n# 相对于当前浏览器窗口的坐标\n```javascript\nevent.clientX;\nevent.clientY;\n//注：所有浏览器都支持\n```\n\n# 相对于当前屏幕的坐标\n```javascript\nevent.screenX;\nevent.screenY;\n//注：和浏览器窗口大小无关\n```\n\n# 相对于触发事件的对象的坐标\n```javascript\nevent.offsetX;\nevent.offsetY;\n//注：和浏览器窗口大小无关\n```","source":"_posts/Event的几种坐标取值.md","raw":"---\ntitle: Event的几种坐标取值\ndate: 2018-03-02 18:56:23\ntags: 前端\ncategory: JavaScript\n---\n\n\n# 相对于整个页面的坐标\n\n```javascript\nevent.pageX;\nevent.pageY;\n//注：IE8不支持\n```\n\n# 相对于当前浏览器窗口的坐标\n```javascript\nevent.clientX;\nevent.clientY;\n//注：所有浏览器都支持\n```\n\n# 相对于当前屏幕的坐标\n```javascript\nevent.screenX;\nevent.screenY;\n//注：和浏览器窗口大小无关\n```\n\n# 相对于触发事件的对象的坐标\n```javascript\nevent.offsetX;\nevent.offsetY;\n//注：和浏览器窗口大小无关\n```","slug":"Event的几种坐标取值","published":1,"updated":"2022-07-09T07:01:37.936Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl5dmn5hp0001bwvjc3o50gml","content":"<h1 id=\"相对于整个页面的坐标\"><a href=\"#相对于整个页面的坐标\" class=\"headerlink\" title=\"相对于整个页面的坐标\"></a>相对于整个页面的坐标</h1><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">event<span class=\"token punctuation\">.</span>pageX<span class=\"token punctuation\">;</span>\nevent<span class=\"token punctuation\">.</span>pageY<span class=\"token punctuation\">;</span>\n<span class=\"token comment\">//注：IE8不支持</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<h1 id=\"相对于当前浏览器窗口的坐标\"><a href=\"#相对于当前浏览器窗口的坐标\" class=\"headerlink\" title=\"相对于当前浏览器窗口的坐标\"></a>相对于当前浏览器窗口的坐标</h1><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">event<span class=\"token punctuation\">.</span>clientX<span class=\"token punctuation\">;</span>\nevent<span class=\"token punctuation\">.</span>clientY<span class=\"token punctuation\">;</span>\n<span class=\"token comment\">//注：所有浏览器都支持</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<h1 id=\"相对于当前屏幕的坐标\"><a href=\"#相对于当前屏幕的坐标\" class=\"headerlink\" title=\"相对于当前屏幕的坐标\"></a>相对于当前屏幕的坐标</h1><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">event<span class=\"token punctuation\">.</span>screenX<span class=\"token punctuation\">;</span>\nevent<span class=\"token punctuation\">.</span>screenY<span class=\"token punctuation\">;</span>\n<span class=\"token comment\">//注：和浏览器窗口大小无关</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<h1 id=\"相对于触发事件的对象的坐标\"><a href=\"#相对于触发事件的对象的坐标\" class=\"headerlink\" title=\"相对于触发事件的对象的坐标\"></a>相对于触发事件的对象的坐标</h1><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">event<span class=\"token punctuation\">.</span>offsetX<span class=\"token punctuation\">;</span>\nevent<span class=\"token punctuation\">.</span>offsetY<span class=\"token punctuation\">;</span>\n<span class=\"token comment\">//注：和浏览器窗口大小无关</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"相对于整个页面的坐标\"><a href=\"#相对于整个页面的坐标\" class=\"headerlink\" title=\"相对于整个页面的坐标\"></a>相对于整个页面的坐标</h1><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">event<span class=\"token punctuation\">.</span>pageX<span class=\"token punctuation\">;</span>\nevent<span class=\"token punctuation\">.</span>pageY<span class=\"token punctuation\">;</span>\n<span class=\"token comment\">//注：IE8不支持</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<h1 id=\"相对于当前浏览器窗口的坐标\"><a href=\"#相对于当前浏览器窗口的坐标\" class=\"headerlink\" title=\"相对于当前浏览器窗口的坐标\"></a>相对于当前浏览器窗口的坐标</h1><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">event<span class=\"token punctuation\">.</span>clientX<span class=\"token punctuation\">;</span>\nevent<span class=\"token punctuation\">.</span>clientY<span class=\"token punctuation\">;</span>\n<span class=\"token comment\">//注：所有浏览器都支持</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<h1 id=\"相对于当前屏幕的坐标\"><a href=\"#相对于当前屏幕的坐标\" class=\"headerlink\" title=\"相对于当前屏幕的坐标\"></a>相对于当前屏幕的坐标</h1><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">event<span class=\"token punctuation\">.</span>screenX<span class=\"token punctuation\">;</span>\nevent<span class=\"token punctuation\">.</span>screenY<span class=\"token punctuation\">;</span>\n<span class=\"token comment\">//注：和浏览器窗口大小无关</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<h1 id=\"相对于触发事件的对象的坐标\"><a href=\"#相对于触发事件的对象的坐标\" class=\"headerlink\" title=\"相对于触发事件的对象的坐标\"></a>相对于触发事件的对象的坐标</h1><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">event<span class=\"token punctuation\">.</span>offsetX<span class=\"token punctuation\">;</span>\nevent<span class=\"token punctuation\">.</span>offsetY<span class=\"token punctuation\">;</span>\n<span class=\"token comment\">//注：和浏览器窗口大小无关</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>"},{"title":"Flex布局","date":"2018-04-08T06:57:33.000Z","_content":"\n## 前言\n2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。\n\n## 一、Flex布局是什么？\nFlex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。\n``` css\n/* 任何一个容器都可以指定为Flex布局。 */\n.box{\n  display: flex;\n}\n\n/*行内元素也可以使用Flex布局。*/\n.box{\n  display: inline-flex;\n}\n\n/*Webkit内核的浏览器，必须加上-webkit前缀。*/\n.box{\n  display: -webkit-flex; /* Safari */\n  display: flex;\n}\n\n/*注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。*/\n```\n## 二、基本概念\n采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。\n\n容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。\n\n项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。\n\n## 三、容器的属性\n以下6个属性设置在容器上。\n\nflex-direction\nflex-wrap\nflex-flow\njustify-content\nalign-items\nalign-content\n\n### 3.1 flex-direction属性\nflex-direction属性决定主轴的方向（即项目的排列方向）。\n``` css\n.box {\n  flex-direction: row | row-reverse | column | column-reverse;\n}\n```\n它可能有4个值。\n\nrow（默认值）：主轴为水平方向，起点在左端。\nrow-reverse：主轴为水平方向，起点在右端。\ncolumn：主轴为垂直方向，起点在上沿。\ncolumn-reverse：主轴为垂直方向，起点在下沿。\n\n### 3.2 flex-wrap属性\n默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。\n``` css\n.box{\n  flex-wrap: nowrap | wrap | wrap-reverse;\n}\n```\n它可能取三个值。\n\n（1）nowrap（默认）：不换行。\n\n（2）wrap：换行，第一行在上方。\n\n（3）wrap-reverse：换行，第一行在下方。\n\n### 3.3 flex-flow\nflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。\n``` css\n.box {\n  flex-flow: <flex-direction> || <flex-wrap>;\n}\n```\n### 3.4 justify-content属性\njustify-content属性定义了项目在主轴上的对齐方式。\n``` css\n.box {\n  justify-content: flex-start | flex-end | center | space-between | space-around;\n}\n```\n它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。\n\nflex-start（默认值）：左对齐\nflex-end：右对齐\ncenter： 居中\nspace-between：两端对齐，项目之间的间隔都相等。\nspace-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。\n\n### 3.5 align-items属性\nalign-items属性定义项目在交叉轴上如何对齐。\n``` css\n.box {\n  align-items: flex-start | flex-end | center | baseline | stretch;\n}\n```\n它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。\n\nflex-start：交叉轴的起点对齐。\nflex-end：交叉轴的终点对齐。\ncenter：交叉轴的中点对齐。\nbaseline: 项目的第一行文字的基线对齐。\nstretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。\n\n### 3.6 align-content属性\nalign-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。\n``` css\n.box {\n  align-content: flex-start | flex-end | center | space-between | space-around | stretch;\n}\n```\n该属性可能取6个值。\n\nflex-start：与交叉轴的起点对齐。\nflex-end：与交叉轴的终点对齐。\ncenter：与交叉轴的中点对齐。\nspace-between：与交叉轴两端对齐，轴线之间的间隔平均分布。\nspace-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。\nstretch（默认值）：轴线占满整个交叉轴。\n\n## 四、项目的属性\n以下6个属性设置在项目上。\n\norder\nflex-grow\nflex-shrink\nflex-basis\nflex\nalign-self\n\n### 4.1 order属性\norder属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。\n``` css\n.item {\n  order: <integer>;\n}\n```\n### 4.2 flex-grow属性\nflex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。\n``` css\n.item {\n  flex-grow: <number>; /* default 0 */\n}\n```\n如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。\n\n### 4.3 flex-shrink属性\nflex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。\n``` css\n.item {\n  flex-shrink: <number>; /* default 1 */\n}\n```\n如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。\n\n负值对该属性无效。\n\n### 4.4 flex-basis属性\nflex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。\n``` css\n.item {\n  flex-basis: <length> | auto; /* default auto */\n}\n```\n它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。\n\n### 4.5 flex属性\nflex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。\n``` css\n.item {\n  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]\n}\n```\n该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。\n\n建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。\n\n### 4.6 align-self属性\nalign-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。\n``` css\n.item {\n  align-self: auto | flex-start | flex-end | center | baseline | stretch;\n}\n```\n该属性可能取6个值，除了auto，其他都与align-items属性完全一致。","source":"_posts/Flex布局.md","raw":"---\ntitle: Flex布局\ndate: 2018-04-08 14:57:33\ntags: 前端\ncategory: CSS\n---\n\n## 前言\n2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。\n\n## 一、Flex布局是什么？\nFlex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。\n``` css\n/* 任何一个容器都可以指定为Flex布局。 */\n.box{\n  display: flex;\n}\n\n/*行内元素也可以使用Flex布局。*/\n.box{\n  display: inline-flex;\n}\n\n/*Webkit内核的浏览器，必须加上-webkit前缀。*/\n.box{\n  display: -webkit-flex; /* Safari */\n  display: flex;\n}\n\n/*注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。*/\n```\n## 二、基本概念\n采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。\n\n容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。\n\n项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。\n\n## 三、容器的属性\n以下6个属性设置在容器上。\n\nflex-direction\nflex-wrap\nflex-flow\njustify-content\nalign-items\nalign-content\n\n### 3.1 flex-direction属性\nflex-direction属性决定主轴的方向（即项目的排列方向）。\n``` css\n.box {\n  flex-direction: row | row-reverse | column | column-reverse;\n}\n```\n它可能有4个值。\n\nrow（默认值）：主轴为水平方向，起点在左端。\nrow-reverse：主轴为水平方向，起点在右端。\ncolumn：主轴为垂直方向，起点在上沿。\ncolumn-reverse：主轴为垂直方向，起点在下沿。\n\n### 3.2 flex-wrap属性\n默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。\n``` css\n.box{\n  flex-wrap: nowrap | wrap | wrap-reverse;\n}\n```\n它可能取三个值。\n\n（1）nowrap（默认）：不换行。\n\n（2）wrap：换行，第一行在上方。\n\n（3）wrap-reverse：换行，第一行在下方。\n\n### 3.3 flex-flow\nflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。\n``` css\n.box {\n  flex-flow: <flex-direction> || <flex-wrap>;\n}\n```\n### 3.4 justify-content属性\njustify-content属性定义了项目在主轴上的对齐方式。\n``` css\n.box {\n  justify-content: flex-start | flex-end | center | space-between | space-around;\n}\n```\n它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。\n\nflex-start（默认值）：左对齐\nflex-end：右对齐\ncenter： 居中\nspace-between：两端对齐，项目之间的间隔都相等。\nspace-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。\n\n### 3.5 align-items属性\nalign-items属性定义项目在交叉轴上如何对齐。\n``` css\n.box {\n  align-items: flex-start | flex-end | center | baseline | stretch;\n}\n```\n它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。\n\nflex-start：交叉轴的起点对齐。\nflex-end：交叉轴的终点对齐。\ncenter：交叉轴的中点对齐。\nbaseline: 项目的第一行文字的基线对齐。\nstretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。\n\n### 3.6 align-content属性\nalign-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。\n``` css\n.box {\n  align-content: flex-start | flex-end | center | space-between | space-around | stretch;\n}\n```\n该属性可能取6个值。\n\nflex-start：与交叉轴的起点对齐。\nflex-end：与交叉轴的终点对齐。\ncenter：与交叉轴的中点对齐。\nspace-between：与交叉轴两端对齐，轴线之间的间隔平均分布。\nspace-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。\nstretch（默认值）：轴线占满整个交叉轴。\n\n## 四、项目的属性\n以下6个属性设置在项目上。\n\norder\nflex-grow\nflex-shrink\nflex-basis\nflex\nalign-self\n\n### 4.1 order属性\norder属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。\n``` css\n.item {\n  order: <integer>;\n}\n```\n### 4.2 flex-grow属性\nflex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。\n``` css\n.item {\n  flex-grow: <number>; /* default 0 */\n}\n```\n如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。\n\n### 4.3 flex-shrink属性\nflex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。\n``` css\n.item {\n  flex-shrink: <number>; /* default 1 */\n}\n```\n如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。\n\n负值对该属性无效。\n\n### 4.4 flex-basis属性\nflex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。\n``` css\n.item {\n  flex-basis: <length> | auto; /* default auto */\n}\n```\n它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。\n\n### 4.5 flex属性\nflex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。\n``` css\n.item {\n  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]\n}\n```\n该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。\n\n建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。\n\n### 4.6 align-self属性\nalign-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。\n``` css\n.item {\n  align-self: auto | flex-start | flex-end | center | baseline | stretch;\n}\n```\n该属性可能取6个值，除了auto，其他都与align-items属性完全一致。","slug":"Flex布局","published":1,"updated":"2022-07-09T05:32:46.568Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl5dmn5ht0003bwvjg05d8yhd","content":"<h2 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h2><p>2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>\n<h2 id=\"一、Flex布局是什么？\"><a href=\"#一、Flex布局是什么？\" class=\"headerlink\" title=\"一、Flex布局是什么？\"></a>一、Flex布局是什么？</h2><p>Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token comment\">/* 任何一个容器都可以指定为Flex布局。 */</span>\n<span class=\"token selector\">.box</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span>\n\n<span class=\"token comment\">/*行内元素也可以使用Flex布局。*/</span>\n<span class=\"token selector\">.box</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> inline-flex<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span>\n\n<span class=\"token comment\">/*Webkit内核的浏览器，必须加上-webkit前缀。*/</span>\n<span class=\"token selector\">.box</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> -webkit-flex<span class=\"token punctuation\">;</span> <span class=\"token comment\">/* Safari */</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span>\n\n<span class=\"token comment\">/*注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。*/</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h2 id=\"二、基本概念\"><a href=\"#二、基本概念\" class=\"headerlink\" title=\"二、基本概念\"></a>二、基本概念</h2><p>采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。</p>\n<p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。</p>\n<p>项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p>\n<h2 id=\"三、容器的属性\"><a href=\"#三、容器的属性\" class=\"headerlink\" title=\"三、容器的属性\"></a>三、容器的属性</h2><p>以下6个属性设置在容器上。</p>\n<p>flex-direction<br>flex-wrap<br>flex-flow<br>justify-content<br>align-items<br>align-content</p>\n<h3 id=\"3-1-flex-direction属性\"><a href=\"#3-1-flex-direction属性\" class=\"headerlink\" title=\"3.1 flex-direction属性\"></a>3.1 flex-direction属性</h3><p>flex-direction属性决定主轴的方向（即项目的排列方向）。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-direction</span><span class=\"token punctuation\">:</span> row | row-reverse | column | column-reverse<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可能有4个值。</p>\n<p>row（默认值）：主轴为水平方向，起点在左端。<br>row-reverse：主轴为水平方向，起点在右端。<br>column：主轴为垂直方向，起点在上沿。<br>column-reverse：主轴为垂直方向，起点在下沿。</p>\n<h3 id=\"3-2-flex-wrap属性\"><a href=\"#3-2-flex-wrap属性\" class=\"headerlink\" title=\"3.2 flex-wrap属性\"></a>3.2 flex-wrap属性</h3><p>默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-wrap</span><span class=\"token punctuation\">:</span> nowrap | wrap | wrap-reverse<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可能取三个值。</p>\n<p>（1）nowrap（默认）：不换行。</p>\n<p>（2）wrap：换行，第一行在上方。</p>\n<p>（3）wrap-reverse：换行，第一行在下方。</p>\n<h3 id=\"3-3-flex-flow\"><a href=\"#3-3-flex-flow\" class=\"headerlink\" title=\"3.3 flex-flow\"></a>3.3 flex-flow</h3><p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-flow</span><span class=\"token punctuation\">:</span> &lt;flex-direction> || &lt;flex-wrap><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<h3 id=\"3-4-justify-content属性\"><a href=\"#3-4-justify-content属性\" class=\"headerlink\" title=\"3.4 justify-content属性\"></a>3.4 justify-content属性</h3><p>justify-content属性定义了项目在主轴上的对齐方式。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">justify-content</span><span class=\"token punctuation\">:</span> flex-start | flex-end | center | space-between | space-around<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p>\n<p>flex-start（默认值）：左对齐<br>flex-end：右对齐<br>center： 居中<br>space-between：两端对齐，项目之间的间隔都相等。<br>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>\n<h3 id=\"3-5-align-items属性\"><a href=\"#3-5-align-items属性\" class=\"headerlink\" title=\"3.5 align-items属性\"></a>3.5 align-items属性</h3><p>align-items属性定义项目在交叉轴上如何对齐。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">align-items</span><span class=\"token punctuation\">:</span> flex-start | flex-end | center | baseline | stretch<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。</p>\n<p>flex-start：交叉轴的起点对齐。<br>flex-end：交叉轴的终点对齐。<br>center：交叉轴的中点对齐。<br>baseline: 项目的第一行文字的基线对齐。<br>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</p>\n<h3 id=\"3-6-align-content属性\"><a href=\"#3-6-align-content属性\" class=\"headerlink\" title=\"3.6 align-content属性\"></a>3.6 align-content属性</h3><p>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">align-content</span><span class=\"token punctuation\">:</span> flex-start | flex-end | center | space-between | space-around | stretch<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>该属性可能取6个值。</p>\n<p>flex-start：与交叉轴的起点对齐。<br>flex-end：与交叉轴的终点对齐。<br>center：与交叉轴的中点对齐。<br>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。<br>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。<br>stretch（默认值）：轴线占满整个交叉轴。</p>\n<h2 id=\"四、项目的属性\"><a href=\"#四、项目的属性\" class=\"headerlink\" title=\"四、项目的属性\"></a>四、项目的属性</h2><p>以下6个属性设置在项目上。</p>\n<p>order<br>flex-grow<br>flex-shrink<br>flex-basis<br>flex<br>align-self</p>\n<h3 id=\"4-1-order属性\"><a href=\"#4-1-order属性\" class=\"headerlink\" title=\"4.1 order属性\"></a>4.1 order属性</h3><p>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">order</span><span class=\"token punctuation\">:</span> &lt;integer><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<h3 id=\"4-2-flex-grow属性\"><a href=\"#4-2-flex-grow属性\" class=\"headerlink\" title=\"4.2 flex-grow属性\"></a>4.2 flex-grow属性</h3><p>flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-grow</span><span class=\"token punctuation\">:</span> &lt;number><span class=\"token punctuation\">;</span> <span class=\"token comment\">/* default 0 */</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>\n<h3 id=\"4-3-flex-shrink属性\"><a href=\"#4-3-flex-shrink属性\" class=\"headerlink\" title=\"4.3 flex-shrink属性\"></a>4.3 flex-shrink属性</h3><p>flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-shrink</span><span class=\"token punctuation\">:</span> &lt;number><span class=\"token punctuation\">;</span> <span class=\"token comment\">/* default 1 */</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>\n<p>负值对该属性无效。</p>\n<h3 id=\"4-4-flex-basis属性\"><a href=\"#4-4-flex-basis属性\" class=\"headerlink\" title=\"4.4 flex-basis属性\"></a>4.4 flex-basis属性</h3><p>flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-basis</span><span class=\"token punctuation\">:</span> &lt;length> | auto<span class=\"token punctuation\">;</span> <span class=\"token comment\">/* default auto */</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</p>\n<h3 id=\"4-5-flex属性\"><a href=\"#4-5-flex属性\" class=\"headerlink\" title=\"4.5 flex属性\"></a>4.5 flex属性</h3><p>flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex</span><span class=\"token punctuation\">:</span> none | [ &lt;<span class=\"token string\">'flex-grow'</span>> &lt;<span class=\"token string\">'flex-shrink'</span>>? || &lt;<span class=\"token string\">'flex-basis'</span>> ]\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。</p>\n<p>建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>\n<h3 id=\"4-6-align-self属性\"><a href=\"#4-6-align-self属性\" class=\"headerlink\" title=\"4.6 align-self属性\"></a>4.6 align-self属性</h3><p>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">align-self</span><span class=\"token punctuation\">:</span> auto | flex-start | flex-end | center | baseline | stretch<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>该属性可能取6个值，除了auto，其他都与align-items属性完全一致。</p>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h2><p>2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>\n<h2 id=\"一、Flex布局是什么？\"><a href=\"#一、Flex布局是什么？\" class=\"headerlink\" title=\"一、Flex布局是什么？\"></a>一、Flex布局是什么？</h2><p>Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token comment\">/* 任何一个容器都可以指定为Flex布局。 */</span>\n<span class=\"token selector\">.box</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span>\n\n<span class=\"token comment\">/*行内元素也可以使用Flex布局。*/</span>\n<span class=\"token selector\">.box</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> inline-flex<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span>\n\n<span class=\"token comment\">/*Webkit内核的浏览器，必须加上-webkit前缀。*/</span>\n<span class=\"token selector\">.box</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> -webkit-flex<span class=\"token punctuation\">;</span> <span class=\"token comment\">/* Safari */</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span>\n\n<span class=\"token comment\">/*注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。*/</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h2 id=\"二、基本概念\"><a href=\"#二、基本概念\" class=\"headerlink\" title=\"二、基本概念\"></a>二、基本概念</h2><p>采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。</p>\n<p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。</p>\n<p>项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p>\n<h2 id=\"三、容器的属性\"><a href=\"#三、容器的属性\" class=\"headerlink\" title=\"三、容器的属性\"></a>三、容器的属性</h2><p>以下6个属性设置在容器上。</p>\n<p>flex-direction<br>flex-wrap<br>flex-flow<br>justify-content<br>align-items<br>align-content</p>\n<h3 id=\"3-1-flex-direction属性\"><a href=\"#3-1-flex-direction属性\" class=\"headerlink\" title=\"3.1 flex-direction属性\"></a>3.1 flex-direction属性</h3><p>flex-direction属性决定主轴的方向（即项目的排列方向）。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-direction</span><span class=\"token punctuation\">:</span> row | row-reverse | column | column-reverse<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可能有4个值。</p>\n<p>row（默认值）：主轴为水平方向，起点在左端。<br>row-reverse：主轴为水平方向，起点在右端。<br>column：主轴为垂直方向，起点在上沿。<br>column-reverse：主轴为垂直方向，起点在下沿。</p>\n<h3 id=\"3-2-flex-wrap属性\"><a href=\"#3-2-flex-wrap属性\" class=\"headerlink\" title=\"3.2 flex-wrap属性\"></a>3.2 flex-wrap属性</h3><p>默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-wrap</span><span class=\"token punctuation\">:</span> nowrap | wrap | wrap-reverse<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可能取三个值。</p>\n<p>（1）nowrap（默认）：不换行。</p>\n<p>（2）wrap：换行，第一行在上方。</p>\n<p>（3）wrap-reverse：换行，第一行在下方。</p>\n<h3 id=\"3-3-flex-flow\"><a href=\"#3-3-flex-flow\" class=\"headerlink\" title=\"3.3 flex-flow\"></a>3.3 flex-flow</h3><p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-flow</span><span class=\"token punctuation\">:</span> &lt;flex-direction> || &lt;flex-wrap><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<h3 id=\"3-4-justify-content属性\"><a href=\"#3-4-justify-content属性\" class=\"headerlink\" title=\"3.4 justify-content属性\"></a>3.4 justify-content属性</h3><p>justify-content属性定义了项目在主轴上的对齐方式。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">justify-content</span><span class=\"token punctuation\">:</span> flex-start | flex-end | center | space-between | space-around<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p>\n<p>flex-start（默认值）：左对齐<br>flex-end：右对齐<br>center： 居中<br>space-between：两端对齐，项目之间的间隔都相等。<br>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>\n<h3 id=\"3-5-align-items属性\"><a href=\"#3-5-align-items属性\" class=\"headerlink\" title=\"3.5 align-items属性\"></a>3.5 align-items属性</h3><p>align-items属性定义项目在交叉轴上如何对齐。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">align-items</span><span class=\"token punctuation\">:</span> flex-start | flex-end | center | baseline | stretch<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。</p>\n<p>flex-start：交叉轴的起点对齐。<br>flex-end：交叉轴的终点对齐。<br>center：交叉轴的中点对齐。<br>baseline: 项目的第一行文字的基线对齐。<br>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</p>\n<h3 id=\"3-6-align-content属性\"><a href=\"#3-6-align-content属性\" class=\"headerlink\" title=\"3.6 align-content属性\"></a>3.6 align-content属性</h3><p>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.box</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">align-content</span><span class=\"token punctuation\">:</span> flex-start | flex-end | center | space-between | space-around | stretch<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>该属性可能取6个值。</p>\n<p>flex-start：与交叉轴的起点对齐。<br>flex-end：与交叉轴的终点对齐。<br>center：与交叉轴的中点对齐。<br>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。<br>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。<br>stretch（默认值）：轴线占满整个交叉轴。</p>\n<h2 id=\"四、项目的属性\"><a href=\"#四、项目的属性\" class=\"headerlink\" title=\"四、项目的属性\"></a>四、项目的属性</h2><p>以下6个属性设置在项目上。</p>\n<p>order<br>flex-grow<br>flex-shrink<br>flex-basis<br>flex<br>align-self</p>\n<h3 id=\"4-1-order属性\"><a href=\"#4-1-order属性\" class=\"headerlink\" title=\"4.1 order属性\"></a>4.1 order属性</h3><p>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">order</span><span class=\"token punctuation\">:</span> &lt;integer><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<h3 id=\"4-2-flex-grow属性\"><a href=\"#4-2-flex-grow属性\" class=\"headerlink\" title=\"4.2 flex-grow属性\"></a>4.2 flex-grow属性</h3><p>flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-grow</span><span class=\"token punctuation\">:</span> &lt;number><span class=\"token punctuation\">;</span> <span class=\"token comment\">/* default 0 */</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>\n<h3 id=\"4-3-flex-shrink属性\"><a href=\"#4-3-flex-shrink属性\" class=\"headerlink\" title=\"4.3 flex-shrink属性\"></a>4.3 flex-shrink属性</h3><p>flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-shrink</span><span class=\"token punctuation\">:</span> &lt;number><span class=\"token punctuation\">;</span> <span class=\"token comment\">/* default 1 */</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>\n<p>负值对该属性无效。</p>\n<h3 id=\"4-4-flex-basis属性\"><a href=\"#4-4-flex-basis属性\" class=\"headerlink\" title=\"4.4 flex-basis属性\"></a>4.4 flex-basis属性</h3><p>flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex-basis</span><span class=\"token punctuation\">:</span> &lt;length> | auto<span class=\"token punctuation\">;</span> <span class=\"token comment\">/* default auto */</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</p>\n<h3 id=\"4-5-flex属性\"><a href=\"#4-5-flex属性\" class=\"headerlink\" title=\"4.5 flex属性\"></a>4.5 flex属性</h3><p>flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">flex</span><span class=\"token punctuation\">:</span> none | [ &lt;<span class=\"token string\">'flex-grow'</span>> &lt;<span class=\"token string\">'flex-shrink'</span>>? || &lt;<span class=\"token string\">'flex-basis'</span>> ]\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。</p>\n<p>建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>\n<h3 id=\"4-6-align-self属性\"><a href=\"#4-6-align-self属性\" class=\"headerlink\" title=\"4.6 align-self属性\"></a>4.6 align-self属性</h3><p>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>\n<pre class=\"line-numbers language-css\" data-language=\"css\"><code class=\"language-css\"><span class=\"token selector\">.item</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token property\">align-self</span><span class=\"token punctuation\">:</span> auto | flex-start | flex-end | center | baseline | stretch<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>该属性可能取6个值，除了auto，其他都与align-items属性完全一致。</p>\n"},{"title":"React 事件用法","date":"2018-02-26T15:36:33.000Z","_content":"## 前言\n在ReactJS中,在使用JSX对绑定事件的用法和在一般的HTML标签中，方式有所不同具体有哪些不同,而不同之处主要在于事件名称不同,以下将分类一一列出React中支持的所有事件方法,仅供大家参考~如有不足之处望大家指出！\n\n## JSX中对支持的事件名称\n\n### 鼠标事件\n\nonClick\nonContextMenu\nonDoubleClick\nonMouseDown\nonMouseEnter\nonMouseLeave\nonMouseMove\nonMouseOut\nonMouseOver\nonMouseUp\nonDrop\nonDrag\nonDragEnd\nonDragEnter\nonDragExit\nonDragLeave\nonDragOver\nonDragStart\n\n### 触摸事件\n\nonTouchCancel\nonTouchEnd\nonTouchMove\nonTouchStart\n\n### 键盘事件\n\nonKeyDown\nonKeyPress\nonKeyUp\n\n### 粘贴板监听\n\nonCopy\nonCut\nonPaste\n\n### 表单事件\n\nonChange\nonInput\nonSubmit\n\n### 焦点事件\n\nonFocus\nonBlur\n\n### 滚动条监听\n\nonScroll\n\n### 滚轮监听\n\nonWheel\n","source":"_posts/React-事件用法.md","raw":"---\ntitle: React 事件用法\ndate: 2018-02-26 23:36:33\ntags: React\ncategory: JavaScript\n---\n## 前言\n在ReactJS中,在使用JSX对绑定事件的用法和在一般的HTML标签中，方式有所不同具体有哪些不同,而不同之处主要在于事件名称不同,以下将分类一一列出React中支持的所有事件方法,仅供大家参考~如有不足之处望大家指出！\n\n## JSX中对支持的事件名称\n\n### 鼠标事件\n\nonClick\nonContextMenu\nonDoubleClick\nonMouseDown\nonMouseEnter\nonMouseLeave\nonMouseMove\nonMouseOut\nonMouseOver\nonMouseUp\nonDrop\nonDrag\nonDragEnd\nonDragEnter\nonDragExit\nonDragLeave\nonDragOver\nonDragStart\n\n### 触摸事件\n\nonTouchCancel\nonTouchEnd\nonTouchMove\nonTouchStart\n\n### 键盘事件\n\nonKeyDown\nonKeyPress\nonKeyUp\n\n### 粘贴板监听\n\nonCopy\nonCut\nonPaste\n\n### 表单事件\n\nonChange\nonInput\nonSubmit\n\n### 焦点事件\n\nonFocus\nonBlur\n\n### 滚动条监听\n\nonScroll\n\n### 滚轮监听\n\nonWheel\n","slug":"React-事件用法","published":1,"updated":"2022-07-09T07:01:56.371Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl5dmn5hw0007bwvjhybx9ly8","content":"<h2 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h2><p>在ReactJS中,在使用JSX对绑定事件的用法和在一般的HTML标签中，方式有所不同具体有哪些不同,而不同之处主要在于事件名称不同,以下将分类一一列出React中支持的所有事件方法,仅供大家参考~如有不足之处望大家指出！</p>\n<h2 id=\"JSX中对支持的事件名称\"><a href=\"#JSX中对支持的事件名称\" class=\"headerlink\" title=\"JSX中对支持的事件名称\"></a>JSX中对支持的事件名称</h2><h3 id=\"鼠标事件\"><a href=\"#鼠标事件\" class=\"headerlink\" title=\"鼠标事件\"></a>鼠标事件</h3><p>onClick<br>onContextMenu<br>onDoubleClick<br>onMouseDown<br>onMouseEnter<br>onMouseLeave<br>onMouseMove<br>onMouseOut<br>onMouseOver<br>onMouseUp<br>onDrop<br>onDrag<br>onDragEnd<br>onDragEnter<br>onDragExit<br>onDragLeave<br>onDragOver<br>onDragStart</p>\n<h3 id=\"触摸事件\"><a href=\"#触摸事件\" class=\"headerlink\" title=\"触摸事件\"></a>触摸事件</h3><p>onTouchCancel<br>onTouchEnd<br>onTouchMove<br>onTouchStart</p>\n<h3 id=\"键盘事件\"><a href=\"#键盘事件\" class=\"headerlink\" title=\"键盘事件\"></a>键盘事件</h3><p>onKeyDown<br>onKeyPress<br>onKeyUp</p>\n<h3 id=\"粘贴板监听\"><a href=\"#粘贴板监听\" class=\"headerlink\" title=\"粘贴板监听\"></a>粘贴板监听</h3><p>onCopy<br>onCut<br>onPaste</p>\n<h3 id=\"表单事件\"><a href=\"#表单事件\" class=\"headerlink\" title=\"表单事件\"></a>表单事件</h3><p>onChange<br>onInput<br>onSubmit</p>\n<h3 id=\"焦点事件\"><a href=\"#焦点事件\" class=\"headerlink\" title=\"焦点事件\"></a>焦点事件</h3><p>onFocus<br>onBlur</p>\n<h3 id=\"滚动条监听\"><a href=\"#滚动条监听\" class=\"headerlink\" title=\"滚动条监听\"></a>滚动条监听</h3><p>onScroll</p>\n<h3 id=\"滚轮监听\"><a href=\"#滚轮监听\" class=\"headerlink\" title=\"滚轮监听\"></a>滚轮监听</h3><p>onWheel</p>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h2><p>在ReactJS中,在使用JSX对绑定事件的用法和在一般的HTML标签中，方式有所不同具体有哪些不同,而不同之处主要在于事件名称不同,以下将分类一一列出React中支持的所有事件方法,仅供大家参考~如有不足之处望大家指出！</p>\n<h2 id=\"JSX中对支持的事件名称\"><a href=\"#JSX中对支持的事件名称\" class=\"headerlink\" title=\"JSX中对支持的事件名称\"></a>JSX中对支持的事件名称</h2><h3 id=\"鼠标事件\"><a href=\"#鼠标事件\" class=\"headerlink\" title=\"鼠标事件\"></a>鼠标事件</h3><p>onClick<br>onContextMenu<br>onDoubleClick<br>onMouseDown<br>onMouseEnter<br>onMouseLeave<br>onMouseMove<br>onMouseOut<br>onMouseOver<br>onMouseUp<br>onDrop<br>onDrag<br>onDragEnd<br>onDragEnter<br>onDragExit<br>onDragLeave<br>onDragOver<br>onDragStart</p>\n<h3 id=\"触摸事件\"><a href=\"#触摸事件\" class=\"headerlink\" title=\"触摸事件\"></a>触摸事件</h3><p>onTouchCancel<br>onTouchEnd<br>onTouchMove<br>onTouchStart</p>\n<h3 id=\"键盘事件\"><a href=\"#键盘事件\" class=\"headerlink\" title=\"键盘事件\"></a>键盘事件</h3><p>onKeyDown<br>onKeyPress<br>onKeyUp</p>\n<h3 id=\"粘贴板监听\"><a href=\"#粘贴板监听\" class=\"headerlink\" title=\"粘贴板监听\"></a>粘贴板监听</h3><p>onCopy<br>onCut<br>onPaste</p>\n<h3 id=\"表单事件\"><a href=\"#表单事件\" class=\"headerlink\" title=\"表单事件\"></a>表单事件</h3><p>onChange<br>onInput<br>onSubmit</p>\n<h3 id=\"焦点事件\"><a href=\"#焦点事件\" class=\"headerlink\" title=\"焦点事件\"></a>焦点事件</h3><p>onFocus<br>onBlur</p>\n<h3 id=\"滚动条监听\"><a href=\"#滚动条监听\" class=\"headerlink\" title=\"滚动条监听\"></a>滚动条监听</h3><p>onScroll</p>\n<h3 id=\"滚轮监听\"><a href=\"#滚轮监听\" class=\"headerlink\" title=\"滚轮监听\"></a>滚轮监听</h3><p>onWheel</p>\n"},{"title":"create-react-app配置多页应用","date":"2018-06-09T09:32:33.000Z","_content":"## 前言\n最近有个项目使用react框架搭建的网站和管理后台，本人想要将其做成两个单独的页面单个项目，于是就研究了一下多页面的配置，其实主要是webpack的配置修改，为了更清楚，我就直接从新建项目开始。\n\n### 新建应用\n使用create-react-app 创建一个单页应用，并且创建成功之后运行 npm run eject 暴露配置\n\n### 开发环境配置\n\n#### paths.js\n修改paths.js中的所需文件的路径，配置如下：  \n\n```js\nmodule.exports = {\n  dotenv: resolveApp('.env'),\n  appBuild: resolveApp('build'),\n  appPublic: resolveApp('public'),\n  appHtml: resolveApp('public/index.html'),\n  //-------此处有多少个页面就新建多少入口文件的路径-------\n  app1IndexJs: resolveApp('src/App1/index.js'),\n  app2IndexJs: resolveApp('src/App2/index.js'),\n  //---------------------------------------------------\n  appPackageJson: resolveApp('package.json'),\n  appSrc: resolveApp('src'),\n  yarnLockFile: resolveApp('yarn.lock'),\n  testsSetup: resolveApp('src/setupTests.js'),\n  appNodeModules: resolveApp('node_modules'),\n  publicUrl: getPublicUrl(resolveApp('package.json')),\n  servedPath: getServedPath(resolveApp('package.json')),\n};\n```\n\n#### webpack.config.dev.js\n修改config下的webpack.config.dev.js文件\n\n##### entry\n```js\n//修改入口文件你需要几个页面就写几个，\nentry: {\n  App1: [\n    require.resolve('./polyfills'),\n    require.resolve('react-dev-utils/webpackHotDevClient'),\n    paths.app1IndexJs,//此处文件路径需要在paths中修改，或者直接在此处进行字符串拼接，本人强迫症所以是在paths中进行修改的~\n  ],\n  App2: [\n    require.resolve('./polyfills'),\n    require.resolve('react-dev-utils/webpackHotDevClient'),\n    paths.app2IndexJs,//同上\n  ],\n}\n```\n##### output\n```js\n//需要修改出口文件的名称，不然会有现文件明冲突，网上看别人没有改这个，但是本人遇到了问题所以就改了，可能人品不行吧~\nfilename: 'static/js/[name].bundle.js',\n```\n##### HtmlWebpackPlugin\n```js\n//多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配，例如上面entry中有App1和App2这两个。这里的chunks也需要是App1和App2\nnew HtmlWebpackPlugin({\n  inject: true,\n  chunks: [\"App1\"],\n  template: paths.appHtml,//此处模板文件路径需要在paths中修改，或者直接在此处进行字符串拼接\n  filename: 'App1.html',//打包生成的文件名，注意不要有重复的！！！！\n}),\nnew HtmlWebpackPlugin({\n  inject: true,\n  chunks: [\"App2\"],\n  template: paths.appHtml,//此处可以与其他页面使用同一模板文件，当然如果想用不同的也可以在public里面新建一个模板html文件，看个人需求\n  filename: 'App2.html',//打包生成的文件名，注意不要有重复的！！！！\n}),\n```\n#### start.js\n修改scripts中的start.js文件  \n\n```js\n//由于添加了新的货修改了入口文件的路径所以需要在此处修改相应的路径，不然文件检查会不通过\nif (!checkRequiredFiles([paths.appHtml, paths.app1IndexJs, paths.app2IndexJs])) {\n  process.exit(1);\n}\n```\n\n>到此开发环境的配置就修改完成了，不出意外的话npm run start 就可以打开页面了，不同的路径可以通过连接进行访问，例如我的App1就访问http://localhost:3000/App1.html ，App2就访问http://localhost:3000/App2.html 。\n\n### 生产环境配置  \n\n#### webpack.config.prod.js\n修改config下的webpack.config.prod.js文件  \n\n##### entry\n```javascript\n//与开发环境修改一样，入口文件你需要几个页面就写几个，\nentry: {\n  App1: [\n    require.resolve('./polyfills'),\n    paths.app1IndexJs,//同开发环境\n  ],\n  App2: [\n    require.resolve('./polyfills'),\n    paths.app2IndexJs,//同开发环境\n  ],\n}\n```\n##### HtmlWebpackPlugin\n```js\n//多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配，例如上面entry中有App1和App2这两个。这里的chunks也需要是App1和App2\nnew HtmlWebpackPlugin({\n  inject: true,\n  chunks: [\"App1\"],\n  template: paths.app1Html,\n  filename: 'App1.html',\n  minify: {\n    removeComments: true,\n    collapseWhitespace: true,\n    removeRedundantAttributes: true,\n    useShortDoctype: true,\n    removeEmptyAttributes: true,\n    removeStyleLinkTypeAttributes: true,\n    keepClosingSlash: true,\n    minifyJS: true,\n    minifyCSS: true,\n    minifyURLs: true,\n  },\n}),\nnew HtmlWebpackPlugin({\n  inject: true,\n  chunks: [\"App2\"],\n  template: paths.app2Html,\n  filename: 'App2.html',\n  minify: {\n    removeComments: true,\n    collapseWhitespace: true,\n    removeRedundantAttributes: true,\n    useShortDoctype: true,\n    removeEmptyAttributes: true,\n    removeStyleLinkTypeAttributes: true,\n    keepClosingSlash: true,\n    minifyJS: true,\n    minifyCSS: true,\n    minifyURLs: true,\n  },\n}),\n```\n### build.js\n修改scripts中的build.js文件\n\n```js\n//同开发环境也需要在此处修改相应的路径，不然文件检查会不通过\nif (!checkRequiredFiles([paths.appHtml, paths.app1IndexJs, paths.app2IndexJs])) {\n  process.exit(1);\n}\n```\n\n>到此生产环境的配置就修改完成了，用npm run build命令就可以在build文件夹看到生成的多个页面了!\n>至于还有一些网上说的需要修改webpackDevServer.config.js中的historyApiFallback来达到可以访问不同页面的目的，貌似本人并没有遇到无法访问的问题,本人能力有限~\n>附上GitHub的项目案例 https://github.com/YHS2017/ReactMultiPage.git 如有问题希望大家提出来一起讨论讨论~\n","source":"_posts/create-react-app配置多页应用.md","raw":"---\ntitle: create-react-app配置多页应用\ndate: 2018-06-09 17:32:33\ntags: React\ncategory: JavaScript\n---\n## 前言\n最近有个项目使用react框架搭建的网站和管理后台，本人想要将其做成两个单独的页面单个项目，于是就研究了一下多页面的配置，其实主要是webpack的配置修改，为了更清楚，我就直接从新建项目开始。\n\n### 新建应用\n使用create-react-app 创建一个单页应用，并且创建成功之后运行 npm run eject 暴露配置\n\n### 开发环境配置\n\n#### paths.js\n修改paths.js中的所需文件的路径，配置如下：  \n\n```js\nmodule.exports = {\n  dotenv: resolveApp('.env'),\n  appBuild: resolveApp('build'),\n  appPublic: resolveApp('public'),\n  appHtml: resolveApp('public/index.html'),\n  //-------此处有多少个页面就新建多少入口文件的路径-------\n  app1IndexJs: resolveApp('src/App1/index.js'),\n  app2IndexJs: resolveApp('src/App2/index.js'),\n  //---------------------------------------------------\n  appPackageJson: resolveApp('package.json'),\n  appSrc: resolveApp('src'),\n  yarnLockFile: resolveApp('yarn.lock'),\n  testsSetup: resolveApp('src/setupTests.js'),\n  appNodeModules: resolveApp('node_modules'),\n  publicUrl: getPublicUrl(resolveApp('package.json')),\n  servedPath: getServedPath(resolveApp('package.json')),\n};\n```\n\n#### webpack.config.dev.js\n修改config下的webpack.config.dev.js文件\n\n##### entry\n```js\n//修改入口文件你需要几个页面就写几个，\nentry: {\n  App1: [\n    require.resolve('./polyfills'),\n    require.resolve('react-dev-utils/webpackHotDevClient'),\n    paths.app1IndexJs,//此处文件路径需要在paths中修改，或者直接在此处进行字符串拼接，本人强迫症所以是在paths中进行修改的~\n  ],\n  App2: [\n    require.resolve('./polyfills'),\n    require.resolve('react-dev-utils/webpackHotDevClient'),\n    paths.app2IndexJs,//同上\n  ],\n}\n```\n##### output\n```js\n//需要修改出口文件的名称，不然会有现文件明冲突，网上看别人没有改这个，但是本人遇到了问题所以就改了，可能人品不行吧~\nfilename: 'static/js/[name].bundle.js',\n```\n##### HtmlWebpackPlugin\n```js\n//多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配，例如上面entry中有App1和App2这两个。这里的chunks也需要是App1和App2\nnew HtmlWebpackPlugin({\n  inject: true,\n  chunks: [\"App1\"],\n  template: paths.appHtml,//此处模板文件路径需要在paths中修改，或者直接在此处进行字符串拼接\n  filename: 'App1.html',//打包生成的文件名，注意不要有重复的！！！！\n}),\nnew HtmlWebpackPlugin({\n  inject: true,\n  chunks: [\"App2\"],\n  template: paths.appHtml,//此处可以与其他页面使用同一模板文件，当然如果想用不同的也可以在public里面新建一个模板html文件，看个人需求\n  filename: 'App2.html',//打包生成的文件名，注意不要有重复的！！！！\n}),\n```\n#### start.js\n修改scripts中的start.js文件  \n\n```js\n//由于添加了新的货修改了入口文件的路径所以需要在此处修改相应的路径，不然文件检查会不通过\nif (!checkRequiredFiles([paths.appHtml, paths.app1IndexJs, paths.app2IndexJs])) {\n  process.exit(1);\n}\n```\n\n>到此开发环境的配置就修改完成了，不出意外的话npm run start 就可以打开页面了，不同的路径可以通过连接进行访问，例如我的App1就访问http://localhost:3000/App1.html ，App2就访问http://localhost:3000/App2.html 。\n\n### 生产环境配置  \n\n#### webpack.config.prod.js\n修改config下的webpack.config.prod.js文件  \n\n##### entry\n```javascript\n//与开发环境修改一样，入口文件你需要几个页面就写几个，\nentry: {\n  App1: [\n    require.resolve('./polyfills'),\n    paths.app1IndexJs,//同开发环境\n  ],\n  App2: [\n    require.resolve('./polyfills'),\n    paths.app2IndexJs,//同开发环境\n  ],\n}\n```\n##### HtmlWebpackPlugin\n```js\n//多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配，例如上面entry中有App1和App2这两个。这里的chunks也需要是App1和App2\nnew HtmlWebpackPlugin({\n  inject: true,\n  chunks: [\"App1\"],\n  template: paths.app1Html,\n  filename: 'App1.html',\n  minify: {\n    removeComments: true,\n    collapseWhitespace: true,\n    removeRedundantAttributes: true,\n    useShortDoctype: true,\n    removeEmptyAttributes: true,\n    removeStyleLinkTypeAttributes: true,\n    keepClosingSlash: true,\n    minifyJS: true,\n    minifyCSS: true,\n    minifyURLs: true,\n  },\n}),\nnew HtmlWebpackPlugin({\n  inject: true,\n  chunks: [\"App2\"],\n  template: paths.app2Html,\n  filename: 'App2.html',\n  minify: {\n    removeComments: true,\n    collapseWhitespace: true,\n    removeRedundantAttributes: true,\n    useShortDoctype: true,\n    removeEmptyAttributes: true,\n    removeStyleLinkTypeAttributes: true,\n    keepClosingSlash: true,\n    minifyJS: true,\n    minifyCSS: true,\n    minifyURLs: true,\n  },\n}),\n```\n### build.js\n修改scripts中的build.js文件\n\n```js\n//同开发环境也需要在此处修改相应的路径，不然文件检查会不通过\nif (!checkRequiredFiles([paths.appHtml, paths.app1IndexJs, paths.app2IndexJs])) {\n  process.exit(1);\n}\n```\n\n>到此生产环境的配置就修改完成了，用npm run build命令就可以在build文件夹看到生成的多个页面了!\n>至于还有一些网上说的需要修改webpackDevServer.config.js中的historyApiFallback来达到可以访问不同页面的目的，貌似本人并没有遇到无法访问的问题,本人能力有限~\n>附上GitHub的项目案例 https://github.com/YHS2017/ReactMultiPage.git 如有问题希望大家提出来一起讨论讨论~\n","slug":"create-react-app配置多页应用","published":1,"updated":"2022-07-09T07:00:42.185Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl5dmn5hx0008bwvj9jm6ecg7","content":"<h2 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h2><p>最近有个项目使用react框架搭建的网站和管理后台，本人想要将其做成两个单独的页面单个项目，于是就研究了一下多页面的配置，其实主要是webpack的配置修改，为了更清楚，我就直接从新建项目开始。</p>\n<h3 id=\"新建应用\"><a href=\"#新建应用\" class=\"headerlink\" title=\"新建应用\"></a>新建应用</h3><p>使用create-react-app 创建一个单页应用，并且创建成功之后运行 npm run eject 暴露配置</p>\n<h3 id=\"开发环境配置\"><a href=\"#开发环境配置\" class=\"headerlink\" title=\"开发环境配置\"></a>开发环境配置</h3><h4 id=\"paths-js\"><a href=\"#paths-js\" class=\"headerlink\" title=\"paths.js\"></a>paths.js</h4><p>修改paths.js中的所需文件的路径，配置如下：  </p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">dotenv</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.env'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appBuild</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'build'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appPublic</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'public'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appHtml</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'public/index.html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">//-------此处有多少个页面就新建多少入口文件的路径-------</span>\n  <span class=\"token literal-property property\">app1IndexJs</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src/App1/index.js'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">app2IndexJs</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src/App2/index.js'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">//---------------------------------------------------</span>\n  <span class=\"token literal-property property\">appPackageJson</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'package.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appSrc</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">yarnLockFile</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'yarn.lock'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">testsSetup</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src/setupTests.js'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appNodeModules</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node_modules'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">publicUrl</span><span class=\"token operator\">:</span> <span class=\"token function\">getPublicUrl</span><span class=\"token punctuation\">(</span><span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'package.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">servedPath</span><span class=\"token operator\">:</span> <span class=\"token function\">getServedPath</span><span class=\"token punctuation\">(</span><span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'package.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n<h4 id=\"webpack-config-dev-js\"><a href=\"#webpack-config-dev-js\" class=\"headerlink\" title=\"webpack.config.dev.js\"></a>webpack.config.dev.js</h4><p>修改config下的webpack.config.dev.js文件</p>\n<h5 id=\"entry\"><a href=\"#entry\" class=\"headerlink\" title=\"entry\"></a>entry</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//修改入口文件你需要几个页面就写几个，</span>\n<span class=\"token literal-property property\">entry</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">App1</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./polyfills'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'react-dev-utils/webpackHotDevClient'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    paths<span class=\"token punctuation\">.</span>app1IndexJs<span class=\"token punctuation\">,</span><span class=\"token comment\">//此处文件路径需要在paths中修改，或者直接在此处进行字符串拼接，本人强迫症所以是在paths中进行修改的~</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">App2</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./polyfills'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'react-dev-utils/webpackHotDevClient'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    paths<span class=\"token punctuation\">.</span>app2IndexJs<span class=\"token punctuation\">,</span><span class=\"token comment\">//同上</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h5 id=\"output\"><a href=\"#output\" class=\"headerlink\" title=\"output\"></a>output</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//需要修改出口文件的名称，不然会有现文件明冲突，网上看别人没有改这个，但是本人遇到了问题所以就改了，可能人品不行吧~</span>\n<span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'static/js/[name].bundle.js'</span><span class=\"token punctuation\">,</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span></span></code></pre>\n<h5 id=\"HtmlWebpackPlugin\"><a href=\"#HtmlWebpackPlugin\" class=\"headerlink\" title=\"HtmlWebpackPlugin\"></a>HtmlWebpackPlugin</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配，例如上面entry中有App1和App2这两个。这里的chunks也需要是App1和App2</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">inject</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">chunks</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"App1\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> paths<span class=\"token punctuation\">.</span>appHtml<span class=\"token punctuation\">,</span><span class=\"token comment\">//此处模板文件路径需要在paths中修改，或者直接在此处进行字符串拼接</span>\n  <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'App1.html'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">//打包生成的文件名，注意不要有重复的！！！！</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">inject</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">chunks</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"App2\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> paths<span class=\"token punctuation\">.</span>appHtml<span class=\"token punctuation\">,</span><span class=\"token comment\">//此处可以与其他页面使用同一模板文件，当然如果想用不同的也可以在public里面新建一个模板html文件，看个人需求</span>\n  <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'App2.html'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">//打包生成的文件名，注意不要有重复的！！！！</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h4 id=\"start-js\"><a href=\"#start-js\" class=\"headerlink\" title=\"start.js\"></a>start.js</h4><p>修改scripts中的start.js文件  </p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//由于添加了新的货修改了入口文件的路径所以需要在此处修改相应的路径，不然文件检查会不通过</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token function\">checkRequiredFiles</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>paths<span class=\"token punctuation\">.</span>appHtml<span class=\"token punctuation\">,</span> paths<span class=\"token punctuation\">.</span>app1IndexJs<span class=\"token punctuation\">,</span> paths<span class=\"token punctuation\">.</span>app2IndexJs<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">&#123;</span>\n  process<span class=\"token punctuation\">.</span><span class=\"token function\">exit</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span></span></code></pre>\n\n<blockquote>\n<p>到此开发环境的配置就修改完成了，不出意外的话npm run start 就可以打开页面了，不同的路径可以通过连接进行访问，例如我的App1就访问<a href=\"http://localhost:3000/App1.html\">http://localhost:3000/App1.html</a> ，App2就访问<a href=\"http://localhost:3000/App2.html\">http://localhost:3000/App2.html</a> 。</p>\n</blockquote>\n<h3 id=\"生产环境配置\"><a href=\"#生产环境配置\" class=\"headerlink\" title=\"生产环境配置\"></a>生产环境配置</h3><h4 id=\"webpack-config-prod-js\"><a href=\"#webpack-config-prod-js\" class=\"headerlink\" title=\"webpack.config.prod.js\"></a>webpack.config.prod.js</h4><p>修改config下的webpack.config.prod.js文件  </p>\n<h5 id=\"entry-1\"><a href=\"#entry-1\" class=\"headerlink\" title=\"entry\"></a>entry</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//与开发环境修改一样，入口文件你需要几个页面就写几个，</span>\n<span class=\"token literal-property property\">entry</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">App1</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./polyfills'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    paths<span class=\"token punctuation\">.</span>app1IndexJs<span class=\"token punctuation\">,</span><span class=\"token comment\">//同开发环境</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">App2</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./polyfills'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    paths<span class=\"token punctuation\">.</span>app2IndexJs<span class=\"token punctuation\">,</span><span class=\"token comment\">//同开发环境</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h5 id=\"HtmlWebpackPlugin-1\"><a href=\"#HtmlWebpackPlugin-1\" class=\"headerlink\" title=\"HtmlWebpackPlugin\"></a>HtmlWebpackPlugin</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配，例如上面entry中有App1和App2这两个。这里的chunks也需要是App1和App2</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">inject</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">chunks</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"App1\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> paths<span class=\"token punctuation\">.</span>app1Html<span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'App1.html'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">minify</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">&#123;</span>\n    <span class=\"token literal-property property\">removeComments</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">collapseWhitespace</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeRedundantAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">useShortDoctype</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeEmptyAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeStyleLinkTypeAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">keepClosingSlash</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyJS</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyCSS</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyURLs</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">inject</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">chunks</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"App2\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> paths<span class=\"token punctuation\">.</span>app2Html<span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'App2.html'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">minify</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">&#123;</span>\n    <span class=\"token literal-property property\">removeComments</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">collapseWhitespace</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeRedundantAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">useShortDoctype</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeEmptyAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeStyleLinkTypeAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">keepClosingSlash</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyJS</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyCSS</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyURLs</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h3 id=\"build-js\"><a href=\"#build-js\" class=\"headerlink\" title=\"build.js\"></a>build.js</h3><p>修改scripts中的build.js文件</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//同开发环境也需要在此处修改相应的路径，不然文件检查会不通过</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token function\">checkRequiredFiles</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>paths<span class=\"token punctuation\">.</span>appHtml<span class=\"token punctuation\">,</span> paths<span class=\"token punctuation\">.</span>app1IndexJs<span class=\"token punctuation\">,</span> paths<span class=\"token punctuation\">.</span>app2IndexJs<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">&#123;</span>\n  process<span class=\"token punctuation\">.</span><span class=\"token function\">exit</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span></span></code></pre>\n\n<blockquote>\n<p>到此生产环境的配置就修改完成了，用npm run build命令就可以在build文件夹看到生成的多个页面了!<br>至于还有一些网上说的需要修改webpackDevServer.config.js中的historyApiFallback来达到可以访问不同页面的目的，貌似本人并没有遇到无法访问的问题,本人能力有限~<br>附上GitHub的项目案例 <a href=\"https://github.com/YHS2017/ReactMultiPage.git\">https://github.com/YHS2017/ReactMultiPage.git</a> 如有问题希望大家提出来一起讨论讨论~</p>\n</blockquote>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h2><p>最近有个项目使用react框架搭建的网站和管理后台，本人想要将其做成两个单独的页面单个项目，于是就研究了一下多页面的配置，其实主要是webpack的配置修改，为了更清楚，我就直接从新建项目开始。</p>\n<h3 id=\"新建应用\"><a href=\"#新建应用\" class=\"headerlink\" title=\"新建应用\"></a>新建应用</h3><p>使用create-react-app 创建一个单页应用，并且创建成功之后运行 npm run eject 暴露配置</p>\n<h3 id=\"开发环境配置\"><a href=\"#开发环境配置\" class=\"headerlink\" title=\"开发环境配置\"></a>开发环境配置</h3><h4 id=\"paths-js\"><a href=\"#paths-js\" class=\"headerlink\" title=\"paths.js\"></a>paths.js</h4><p>修改paths.js中的所需文件的路径，配置如下：  </p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">dotenv</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.env'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appBuild</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'build'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appPublic</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'public'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appHtml</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'public/index.html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">//-------此处有多少个页面就新建多少入口文件的路径-------</span>\n  <span class=\"token literal-property property\">app1IndexJs</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src/App1/index.js'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">app2IndexJs</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src/App2/index.js'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">//---------------------------------------------------</span>\n  <span class=\"token literal-property property\">appPackageJson</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'package.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appSrc</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">yarnLockFile</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'yarn.lock'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">testsSetup</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src/setupTests.js'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">appNodeModules</span><span class=\"token operator\">:</span> <span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node_modules'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">publicUrl</span><span class=\"token operator\">:</span> <span class=\"token function\">getPublicUrl</span><span class=\"token punctuation\">(</span><span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'package.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">servedPath</span><span class=\"token operator\">:</span> <span class=\"token function\">getServedPath</span><span class=\"token punctuation\">(</span><span class=\"token function\">resolveApp</span><span class=\"token punctuation\">(</span><span class=\"token string\">'package.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n<h4 id=\"webpack-config-dev-js\"><a href=\"#webpack-config-dev-js\" class=\"headerlink\" title=\"webpack.config.dev.js\"></a>webpack.config.dev.js</h4><p>修改config下的webpack.config.dev.js文件</p>\n<h5 id=\"entry\"><a href=\"#entry\" class=\"headerlink\" title=\"entry\"></a>entry</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//修改入口文件你需要几个页面就写几个，</span>\n<span class=\"token literal-property property\">entry</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">App1</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./polyfills'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'react-dev-utils/webpackHotDevClient'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    paths<span class=\"token punctuation\">.</span>app1IndexJs<span class=\"token punctuation\">,</span><span class=\"token comment\">//此处文件路径需要在paths中修改，或者直接在此处进行字符串拼接，本人强迫症所以是在paths中进行修改的~</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">App2</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./polyfills'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'react-dev-utils/webpackHotDevClient'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    paths<span class=\"token punctuation\">.</span>app2IndexJs<span class=\"token punctuation\">,</span><span class=\"token comment\">//同上</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h5 id=\"output\"><a href=\"#output\" class=\"headerlink\" title=\"output\"></a>output</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//需要修改出口文件的名称，不然会有现文件明冲突，网上看别人没有改这个，但是本人遇到了问题所以就改了，可能人品不行吧~</span>\n<span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'static/js/[name].bundle.js'</span><span class=\"token punctuation\">,</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span></span></code></pre>\n<h5 id=\"HtmlWebpackPlugin\"><a href=\"#HtmlWebpackPlugin\" class=\"headerlink\" title=\"HtmlWebpackPlugin\"></a>HtmlWebpackPlugin</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配，例如上面entry中有App1和App2这两个。这里的chunks也需要是App1和App2</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">inject</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">chunks</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"App1\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> paths<span class=\"token punctuation\">.</span>appHtml<span class=\"token punctuation\">,</span><span class=\"token comment\">//此处模板文件路径需要在paths中修改，或者直接在此处进行字符串拼接</span>\n  <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'App1.html'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">//打包生成的文件名，注意不要有重复的！！！！</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">inject</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">chunks</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"App2\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> paths<span class=\"token punctuation\">.</span>appHtml<span class=\"token punctuation\">,</span><span class=\"token comment\">//此处可以与其他页面使用同一模板文件，当然如果想用不同的也可以在public里面新建一个模板html文件，看个人需求</span>\n  <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'App2.html'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">//打包生成的文件名，注意不要有重复的！！！！</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h4 id=\"start-js\"><a href=\"#start-js\" class=\"headerlink\" title=\"start.js\"></a>start.js</h4><p>修改scripts中的start.js文件  </p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//由于添加了新的货修改了入口文件的路径所以需要在此处修改相应的路径，不然文件检查会不通过</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token function\">checkRequiredFiles</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>paths<span class=\"token punctuation\">.</span>appHtml<span class=\"token punctuation\">,</span> paths<span class=\"token punctuation\">.</span>app1IndexJs<span class=\"token punctuation\">,</span> paths<span class=\"token punctuation\">.</span>app2IndexJs<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">&#123;</span>\n  process<span class=\"token punctuation\">.</span><span class=\"token function\">exit</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span></span></code></pre>\n\n<blockquote>\n<p>到此开发环境的配置就修改完成了，不出意外的话npm run start 就可以打开页面了，不同的路径可以通过连接进行访问，例如我的App1就访问<a href=\"http://localhost:3000/App1.html\">http://localhost:3000/App1.html</a> ，App2就访问<a href=\"http://localhost:3000/App2.html\">http://localhost:3000/App2.html</a> 。</p>\n</blockquote>\n<h3 id=\"生产环境配置\"><a href=\"#生产环境配置\" class=\"headerlink\" title=\"生产环境配置\"></a>生产环境配置</h3><h4 id=\"webpack-config-prod-js\"><a href=\"#webpack-config-prod-js\" class=\"headerlink\" title=\"webpack.config.prod.js\"></a>webpack.config.prod.js</h4><p>修改config下的webpack.config.prod.js文件  </p>\n<h5 id=\"entry-1\"><a href=\"#entry-1\" class=\"headerlink\" title=\"entry\"></a>entry</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//与开发环境修改一样，入口文件你需要几个页面就写几个，</span>\n<span class=\"token literal-property property\">entry</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">App1</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./polyfills'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    paths<span class=\"token punctuation\">.</span>app1IndexJs<span class=\"token punctuation\">,</span><span class=\"token comment\">//同开发环境</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">App2</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    require<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./polyfills'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    paths<span class=\"token punctuation\">.</span>app2IndexJs<span class=\"token punctuation\">,</span><span class=\"token comment\">//同开发环境</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h5 id=\"HtmlWebpackPlugin-1\"><a href=\"#HtmlWebpackPlugin-1\" class=\"headerlink\" title=\"HtmlWebpackPlugin\"></a>HtmlWebpackPlugin</h5><pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//多少个页面就new 多少个 HtmlWebpackPlugin 并且在每一个里面的chunks都需要和上面的entry中的key匹配，例如上面entry中有App1和App2这两个。这里的chunks也需要是App1和App2</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">inject</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">chunks</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"App1\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> paths<span class=\"token punctuation\">.</span>app1Html<span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'App1.html'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">minify</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">&#123;</span>\n    <span class=\"token literal-property property\">removeComments</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">collapseWhitespace</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeRedundantAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">useShortDoctype</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeEmptyAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeStyleLinkTypeAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">keepClosingSlash</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyJS</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyCSS</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyURLs</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span>\n  <span class=\"token literal-property property\">inject</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">chunks</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"App2\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> paths<span class=\"token punctuation\">.</span>app2Html<span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'App2.html'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">minify</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">&#123;</span>\n    <span class=\"token literal-property property\">removeComments</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">collapseWhitespace</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeRedundantAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">useShortDoctype</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeEmptyAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">removeStyleLinkTypeAttributes</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">keepClosingSlash</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyJS</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyCSS</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">minifyURLs</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<h3 id=\"build-js\"><a href=\"#build-js\" class=\"headerlink\" title=\"build.js\"></a>build.js</h3><p>修改scripts中的build.js文件</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token comment\">//同开发环境也需要在此处修改相应的路径，不然文件检查会不通过</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token function\">checkRequiredFiles</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>paths<span class=\"token punctuation\">.</span>appHtml<span class=\"token punctuation\">,</span> paths<span class=\"token punctuation\">.</span>app1IndexJs<span class=\"token punctuation\">,</span> paths<span class=\"token punctuation\">.</span>app2IndexJs<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">&#123;</span>\n  process<span class=\"token punctuation\">.</span><span class=\"token function\">exit</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">&#125;</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span></span></code></pre>\n\n<blockquote>\n<p>到此生产环境的配置就修改完成了，用npm run build命令就可以在build文件夹看到生成的多个页面了!<br>至于还有一些网上说的需要修改webpackDevServer.config.js中的historyApiFallback来达到可以访问不同页面的目的，貌似本人并没有遇到无法访问的问题,本人能力有限~<br>附上GitHub的项目案例 <a href=\"https://github.com/YHS2017/ReactMultiPage.git\">https://github.com/YHS2017/ReactMultiPage.git</a> 如有问题希望大家提出来一起讨论讨论~</p>\n</blockquote>\n"},{"title":"Ubuntu安装docker-ce的详细教程","date":"2024-11-15T08:27:15.000Z","_content":"\n<!-- @format -->\n\n# Ubuntu 安装 docker-ce 的详细教程\n\n## 一、卸载旧版本\n\n```shell\nsudo apt-get remove -y docker docker-engine docker.io containerd runc\n```\n\n## 二、更新软件包\n\n```shell\nsudo apt update\nsudo apt upgrade\n```\n\n## 三、安装依赖包\n\n```shell\nsudo apt-get install ca-certificates curl gnupg lsb-release\n```\n\n## 四、添加 GPG 密钥\n\n```shell\nsudo curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -\n```\n\n## 五、添加 Docker 仓库\n\n```shell\nsudo add-apt-repository \"deb [arch=amd64] https://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable\"\n```\n\n## 六、更新软件包列表\n\n```shell\nsudo apt update\nsudo apt upgrade\n```\n\n## 七、安装 Docker CE\n\n```shell\nsudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin\n```\n\n## 八、添加当前用户到 docker 组\n\n```shell\nsudo usermod -aG docker $USER\n```\n\n## 九、设置启动项和启动 Docker\n\n```shell\nsudo systemctl enable docker\nsudo systemctl start docker\n```\n\n<!-- @format -->\n","source":"_posts/Ubuntu安装docker-ce的详细教程.md","raw":"---\ntitle: Ubuntu安装docker-ce的详细教程\ndate: 2024-11-15 16:27:15\ntags: Docker\ncategory: Linux\n---\n\n<!-- @format -->\n\n# Ubuntu 安装 docker-ce 的详细教程\n\n## 一、卸载旧版本\n\n```shell\nsudo apt-get remove -y docker docker-engine docker.io containerd runc\n```\n\n## 二、更新软件包\n\n```shell\nsudo apt update\nsudo apt upgrade\n```\n\n## 三、安装依赖包\n\n```shell\nsudo apt-get install ca-certificates curl gnupg lsb-release\n```\n\n## 四、添加 GPG 密钥\n\n```shell\nsudo curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -\n```\n\n## 五、添加 Docker 仓库\n\n```shell\nsudo add-apt-repository \"deb [arch=amd64] https://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable\"\n```\n\n## 六、更新软件包列表\n\n```shell\nsudo apt update\nsudo apt upgrade\n```\n\n## 七、安装 Docker CE\n\n```shell\nsudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin\n```\n\n## 八、添加当前用户到 docker 组\n\n```shell\nsudo usermod -aG docker $USER\n```\n\n## 九、设置启动项和启动 Docker\n\n```shell\nsudo systemctl enable docker\nsudo systemctl start docker\n```\n\n<!-- @format -->\n","slug":"Ubuntu安装docker-ce的详细教程","published":1,"updated":"2024-11-15T08:43:49.599Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cm3ihsqe500009wuo5bn63hgl","content":"<!-- @format -->\n\n<h1 id=\"Ubuntu-安装-docker-ce-的详细教程\"><a href=\"#Ubuntu-安装-docker-ce-的详细教程\" class=\"headerlink\" title=\"Ubuntu 安装 docker-ce 的详细教程\"></a>Ubuntu 安装 docker-ce 的详细教程</h1><h2 id=\"一、卸载旧版本\"><a href=\"#一、卸载旧版本\" class=\"headerlink\" title=\"一、卸载旧版本\"></a>一、卸载旧版本</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> remove -y <span class=\"token function\">docker</span> docker-engine docker.io containerd runc<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"二、更新软件包\"><a href=\"#二、更新软件包\" class=\"headerlink\" title=\"二、更新软件包\"></a>二、更新软件包</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> upgrade<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span></span></code></pre>\n\n<h2 id=\"三、安装依赖包\"><a href=\"#三、安装依赖包\" class=\"headerlink\" title=\"三、安装依赖包\"></a>三、安装依赖包</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> ca-certificates <span class=\"token function\">curl</span> gnupg lsb-release<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"四、添加-GPG-密钥\"><a href=\"#四、添加-GPG-密钥\" class=\"headerlink\" title=\"四、添加 GPG 密钥\"></a>四、添加 GPG 密钥</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">curl</span> -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> apt-key <span class=\"token function\">add</span> -<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"五、添加-Docker-仓库\"><a href=\"#五、添加-Docker-仓库\" class=\"headerlink\" title=\"五、添加 Docker 仓库\"></a>五、添加 Docker 仓库</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> add-apt-repository <span class=\"token string\">\"deb [arch=amd64] https://mirrors.aliyun.com/docker-ce/linux/ubuntu <span class=\"token variable\"><span class=\"token variable\">$(</span>lsb_release -cs<span class=\"token variable\">)</span></span> stable\"</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"六、更新软件包列表\"><a href=\"#六、更新软件包列表\" class=\"headerlink\" title=\"六、更新软件包列表\"></a>六、更新软件包列表</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> upgrade<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span></span></code></pre>\n\n<h2 id=\"七、安装-Docker-CE\"><a href=\"#七、安装-Docker-CE\" class=\"headerlink\" title=\"七、安装 Docker CE\"></a>七、安装 Docker CE</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> docker-ce docker-ce-cli containerd.io docker-compose-plugin<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"八、添加当前用户到-docker-组\"><a href=\"#八、添加当前用户到-docker-组\" class=\"headerlink\" title=\"八、添加当前用户到 docker 组\"></a>八、添加当前用户到 docker 组</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">usermod</span> -aG <span class=\"token function\">docker</span> <span class=\"token environment constant\">$USER</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"九、设置启动项和启动-Docker\"><a href=\"#九、设置启动项和启动-Docker\" class=\"headerlink\" title=\"九、设置启动项和启动 Docker\"></a>九、设置启动项和启动 Docker</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> systemctl <span class=\"token builtin class-name\">enable</span> <span class=\"token function\">docker</span>\n<span class=\"token function\">sudo</span> systemctl start <span class=\"token function\">docker</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span></span></code></pre>\n\n<!-- @format -->\n","site":{"data":{}},"excerpt":"","more":"<!-- @format -->\n\n<h1 id=\"Ubuntu-安装-docker-ce-的详细教程\"><a href=\"#Ubuntu-安装-docker-ce-的详细教程\" class=\"headerlink\" title=\"Ubuntu 安装 docker-ce 的详细教程\"></a>Ubuntu 安装 docker-ce 的详细教程</h1><h2 id=\"一、卸载旧版本\"><a href=\"#一、卸载旧版本\" class=\"headerlink\" title=\"一、卸载旧版本\"></a>一、卸载旧版本</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> remove -y <span class=\"token function\">docker</span> docker-engine docker.io containerd runc<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"二、更新软件包\"><a href=\"#二、更新软件包\" class=\"headerlink\" title=\"二、更新软件包\"></a>二、更新软件包</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> upgrade<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span></span></code></pre>\n\n<h2 id=\"三、安装依赖包\"><a href=\"#三、安装依赖包\" class=\"headerlink\" title=\"三、安装依赖包\"></a>三、安装依赖包</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> ca-certificates <span class=\"token function\">curl</span> gnupg lsb-release<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"四、添加-GPG-密钥\"><a href=\"#四、添加-GPG-密钥\" class=\"headerlink\" title=\"四、添加 GPG 密钥\"></a>四、添加 GPG 密钥</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">curl</span> -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> apt-key <span class=\"token function\">add</span> -<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"五、添加-Docker-仓库\"><a href=\"#五、添加-Docker-仓库\" class=\"headerlink\" title=\"五、添加 Docker 仓库\"></a>五、添加 Docker 仓库</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> add-apt-repository <span class=\"token string\">\"deb [arch=amd64] https://mirrors.aliyun.com/docker-ce/linux/ubuntu <span class=\"token variable\"><span class=\"token variable\">$(</span>lsb_release -cs<span class=\"token variable\">)</span></span> stable\"</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"六、更新软件包列表\"><a href=\"#六、更新软件包列表\" class=\"headerlink\" title=\"六、更新软件包列表\"></a>六、更新软件包列表</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> upgrade<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span></span></code></pre>\n\n<h2 id=\"七、安装-Docker-CE\"><a href=\"#七、安装-Docker-CE\" class=\"headerlink\" title=\"七、安装 Docker CE\"></a>七、安装 Docker CE</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> docker-ce docker-ce-cli containerd.io docker-compose-plugin<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"八、添加当前用户到-docker-组\"><a href=\"#八、添加当前用户到-docker-组\" class=\"headerlink\" title=\"八、添加当前用户到 docker 组\"></a>八、添加当前用户到 docker 组</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> <span class=\"token function\">usermod</span> -aG <span class=\"token function\">docker</span> <span class=\"token environment constant\">$USER</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n<h2 id=\"九、设置启动项和启动-Docker\"><a href=\"#九、设置启动项和启动-Docker\" class=\"headerlink\" title=\"九、设置启动项和启动 Docker\"></a>九、设置启动项和启动 Docker</h2><pre class=\"line-numbers language-bash\" data-language=\"bash\"><code class=\"language-bash\"><span class=\"token function\">sudo</span> systemctl <span class=\"token builtin class-name\">enable</span> <span class=\"token function\">docker</span>\n<span class=\"token function\">sudo</span> systemctl start <span class=\"token function\">docker</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span></span></code></pre>\n\n<!-- @format -->\n"}],"PostAsset":[],"PostCategory":[{"post_id":"cl5dmn5hx0008bwvj9jm6ecg7","category_id":"cl5dmn5hu0004bwvj0oan7e6o","_id":"cl5dmn5i0000cbwvjetoibvts"},{"post_id":"cl5dmn5hp0001bwvjc3o50gml","category_id":"cl5dmn5hu0004bwvj0oan7e6o","_id":"cl5dmn5i1000gbwvj8fqc7iy2"},{"post_id":"cl5dmn5ht0003bwvjg05d8yhd","category_id":"cl5dmn5hy0009bwvj9ltsdpco","_id":"cl5dmn5i1000hbwvjdfem8s64"},{"post_id":"cl5dmn5hw0007bwvjhybx9ly8","category_id":"cl5dmn5hu0004bwvj0oan7e6o","_id":"cl5dmn5i1000kbwvj26851yya"},{"post_id":"cm3ihsqe500009wuo5bn63hgl","category_id":"cm3ihsqe800019wuo2oya1rsm","_id":"cm3ihsqea00049wuoe4fc06dw"}],"PostTag":[{"post_id":"cl5dmn5hp0001bwvjc3o50gml","tag_id":"cl5dmn5hv0005bwvj4qv9f0ce","_id":"cl5dmn5i0000bbwvja6khfz1m"},{"post_id":"cl5dmn5ht0003bwvjg05d8yhd","tag_id":"cl5dmn5hv0005bwvj4qv9f0ce","_id":"cl5dmn5i1000fbwvj70aq7joe"},{"post_id":"cl5dmn5hw0007bwvjhybx9ly8","tag_id":"cl5dmn5i0000dbwvj4z6rduys","_id":"cl5dmn5i1000jbwvj32k158fq"},{"post_id":"cl5dmn5hx0008bwvj9jm6ecg7","tag_id":"cl5dmn5i0000dbwvj4z6rduys","_id":"cl5dmn5i2000lbwvjg9gnbafu"},{"post_id":"cm3ihsqe500009wuo5bn63hgl","tag_id":"cm3ihsqe900029wuof7ih305u","_id":"cm3ihsqea00039wuofkgcfjez"}],"Tag":[{"name":"前端","_id":"cl5dmn5hv0005bwvj4qv9f0ce"},{"name":"React","_id":"cl5dmn5i0000dbwvj4z6rduys"},{"name":"Docker","_id":"cm3ihsqe900029wuof7ih305u"}]}}