-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdb.json
1 lines (1 loc) · 81.7 KB
/
db.json
1
{"meta":{"version":1,"warehouse":"4.0.0"},"models":{"Asset":[{"_id":"source/images/multicol-layout-template .png","path":"images/multicol-layout-template .png","modified":0,"renderable":0},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.css","path":"fancybox/jquery.fancybox.min.css","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.js","path":"fancybox/jquery.fancybox.min.js","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/style.styl","path":"css/style.styl","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/js/jquery-3.4.1.min.js","path":"js/jquery-3.4.1.min.js","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/js/script.js","path":"js/script.js","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/FontAwesome.otf","path":"css/fonts/FontAwesome.otf","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.eot","path":"css/fonts/fontawesome-webfont.eot","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.svg","path":"css/fonts/fontawesome-webfont.svg","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.woff","path":"css/fonts/fontawesome-webfont.woff","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.woff2","path":"css/fonts/fontawesome-webfont.woff2","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.ttf","path":"css/fonts/fontawesome-webfont.ttf","modified":0,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/images/banner.jpg","path":"css/images/banner.jpg","modified":0,"renderable":1},{"_id":"source/images/favicon-32x32.jpg","path":"images/favicon-32x32.jpg","modified":0,"renderable":0},{"_id":"source/images/favicon-16x16.jpg","path":"images/favicon-16x16.jpg","modified":0,"renderable":0}],"Cache":[{"_id":"source/_posts/CSS布局之多列布局(1).md","hash":"3a77467f1e73944dd912044f9e6b9b1b0622a49c","modified":1618908688333},{"_id":"source/_posts/create-blog.md","hash":"177611b7b6413fab3184850cba2bfcd65f01b506","modified":1618908757672},{"_id":"source/_posts/hello-world.md","hash":"7d98d6592de80fdcd2949bd7401cec12afd98cdf","modified":1618904244552},{"_id":"source/images/multicol-layout-template .png","hash":"fd7e561e1af849fe9401b86cab5ae3005dbb3286","modified":1618904244554},{"_id":"source/_posts/CSS布局之多列布局(1)/column-count_and_column-width.png","hash":"0f4a1d2b537c3c1f6ff553f5d5637d1682d99f91","modified":1618904244544},{"_id":"source/_posts/CSS布局之多列布局(1)/column-width.png","hash":"db81691726e8e5e3ddc058f21b0622c8cfdafdf3","modified":1618904244547},{"_id":"source/_posts/CSS布局之多列布局(1)/column-count.png","hash":"1fd364e6359b034aa18a89e19ac8cc3d02824e65","modified":1618904244542},{"_id":"node_modules/hexo-theme-landscape/LICENSE","hash":"c480fce396b23997ee23cc535518ffaaf7f458f8","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/README.md","hash":"d2772ece6d4422ccdaa0359c3e07588834044052","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/package.json","hash":"7333ecd71de5f9121032e43f3dd91166bd4f4298","modified":1618904308267},{"_id":"node_modules/hexo-theme-landscape/_config.yml","hash":"b608c1f1322760dce9805285a602a95832730a2e","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/index.ejs","hash":"aa1b4456907bdb43e629be3931547e2d29ac58c8","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/category.ejs","hash":"765426a9c8236828dc34759e604cc2c52292835a","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/layout.ejs","hash":"0d1765036e4874500e68256fedb7470e96eeb6ee","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/page.ejs","hash":"7d80e4e36b14d30a7cd2ac1f61376d9ebf264e8b","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/post.ejs","hash":"7d80e4e36b14d30a7cd2ac1f61376d9ebf264e8b","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/tag.ejs","hash":"eaa7b4ccb2ca7befb90142e4e68995fb1ea68b2e","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/en.yml","hash":"3083f319b352d21d80fc5e20113ddf27889c9d11","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/de.yml","hash":"3ebf0775abbee928c8d7bda943c191d166ded0d3","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/es.yml","hash":"76edb1171b86532ef12cfd15f5f2c1ac3949f061","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/fr.yml","hash":"415e1c580ced8e4ce20b3b0aeedc3610341c76fb","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/hu.yml","hash":"284d557130bf54a74e7dcef9d42096130e4d9550","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/it.yml","hash":"89b7d91306b2c1a0f3ac023b657bf974f798a1e8","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/ko.yml","hash":"881d6a0a101706e0452af81c580218e0bfddd9cf","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/ja.yml","hash":"a73e1b9c80fd6e930e2628b393bfe3fb716a21a9","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/mn.yml","hash":"2e7523951072a9403ead3840ad823edd1084c116","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/nl.yml","hash":"12ed59faba1fc4e8cdd1d42ab55ef518dde8039c","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/no.yml","hash":"965a171e70347215ec726952e63f5b47930931ef","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/pt.yml","hash":"57d07b75d434fbfc33b0ddb543021cb5f53318a8","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/tr.yml","hash":"a1cdbfa17682d7a971de8ab8588bf57c74224b5b","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/ru.yml","hash":"4fda301bbd8b39f2c714e2c934eccc4b27c0a2b0","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/zh-TW.yml","hash":"53ce3000c5f767759c7d2c4efcaa9049788599c3","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/languages/zh-CN.yml","hash":"1efd95774f401c80193eac6ee3f1794bfe93dc5a","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/scripts/fancybox.js","hash":"c857d7a5e4a5d71c743a009c5932bf84229db428","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/archive.ejs","hash":"2703b07cc8ac64ae46d1d263f4653013c7e1666b","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/after-footer.ejs","hash":"414914ebb159fac1922b056b905e570ac7521925","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/archive.ejs","hash":"7cb70a7a54f8c7ae49b10d1f37c0a9b74eab8826","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/archive-post.ejs","hash":"c7a71425a946d05414c069ec91811b5c09a92c47","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/article.ejs","hash":"dfd555c00e85ffc4207c88968d12b219c1f086ec","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/footer.ejs","hash":"3656eb692254346671abc03cb3ba1459829e0dce","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/google-analytics.ejs","hash":"2ea7442ea1e1a8ab4e41e26c563f58413b59a3d0","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/gauges-analytics.ejs","hash":"21a1e2a3907d1a3dad1cd0ab855fe6735f233c74","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/header.ejs","hash":"c1acd247e14588cdf101a69460cb8319c18cd078","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/head.ejs","hash":"f215d92a882247a7cc5ea80b241bedfcec0ea6ca","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/mobile-nav.ejs","hash":"e952a532dfc583930a666b9d4479c32d4a84b44e","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/sidebar.ejs","hash":"930da35cc2d447a92e5ee8f835735e6fd2232469","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.css","hash":"1be9b79be02a1cfc5d96c4a5e0feb8f472babd95","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_extend.styl","hash":"222fbe6d222531d61c1ef0f868c90f747b1c2ced","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_variables.styl","hash":"581b0cbefdaa5f894922133989dd2d3bf71ded79","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/style.styl","hash":"9c451e5efd72c5bb8b56e8c2b94be731e99db05b","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/js/script.js","hash":"998ed4c5b147e1299bf62beebf33514474f28112","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/recent_posts.ejs","hash":"60c4b012dcc656438ff59997e60367e5a21ab746","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/archive.ejs","hash":"beb4a86fcc82a9bdda9289b59db5a1988918bec3","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/tag.ejs","hash":"2de380865df9ab5f577f7d3bcadf44261eb5faae","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/category.ejs","hash":"dd1e5af3c6af3f5d6c85dfd5ca1766faed6a0b05","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/category.ejs","hash":"c6bcd0e04271ffca81da25bcff5adf3d46f02fc0","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/tagcloud.ejs","hash":"b4a2079101643f63993dcdb32925c9b071763b46","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/gallery.ejs","hash":"3d9d81a3c693ff2378ef06ddb6810254e509de5b","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/date.ejs","hash":"f1458584b679545830b75bef2526e2f3eb931045","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/nav.ejs","hash":"16a904de7bceccbb36b4267565f2215704db2880","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/title.ejs","hash":"4d7e62574ddf46de9b41605fe3140d77b5ddb26d","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/tag.ejs","hash":"2fcb0bf9c8847a644167a27824c9bb19ac74dd14","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/archive.styl","hash":"db15f5677dc68f1730e82190bab69c24611ca292","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/comment.styl","hash":"79d280d8d203abb3bd933ca9b8e38c78ec684987","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/article.styl","hash":"80759482d07063c091e940f964a1cf6693d3d406","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/header.styl","hash":"85ab11e082f4dd86dde72bed653d57ec5381f30c","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/footer.styl","hash":"e35a060b8512031048919709a8e7b1ec0e40bc1b","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/highlight.styl","hash":"bf4e7be1968dad495b04e83c95eac14c4d0ad7c0","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/mobile.styl","hash":"a399cf9e1e1cec3e4269066e2948d7ae5854d745","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar-aside.styl","hash":"890349df5145abf46ce7712010c89237900b3713","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar.styl","hash":"404ec059dc674a48b9ab89cd83f258dec4dcb24d","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar-bottom.styl","hash":"8fd4f30d319542babfd31f087ddbac550f000a8a","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_util/mixin.styl","hash":"44f32767d9fd3c1c08a60d91f181ee53c8f0dbb3","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/_util/grid.styl","hash":"0bf55ee5d09f193e249083602ac5fcdb1e571aed","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.js","hash":"6181412e73966696d08e1e5b1243a572d0f22ba6","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/js/jquery-3.4.1.min.js","hash":"88523924351bac0b5d560fe0c5781e2556e7693d","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.woff","hash":"28b782240b3e76db824e12c02754a9731a167527","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.woff2","hash":"d6f48cba7d076fb6f2fd6ba993a75b9dc1ecbf0c","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/FontAwesome.otf","hash":"048707bc52ac4b6563aaa383bfe8660a0ddc908c","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.eot","hash":"d980c2ce873dc43af460d4d572d441304499f400","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.ttf","hash":"13b1eab65a983c7a73bc7997c479d66943f7c6cb","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/images/banner.jpg","hash":"f44aa591089fcb3ec79770a1e102fd3289a7c6a6","modified":499162500000},{"_id":"node_modules/hexo-theme-landscape/source/css/fonts/fontawesome-webfont.svg","hash":"98a8aa5cf7d62c2eff5f07ede8d844b874ef06ed","modified":499162500000},{"_id":"public/2021/04/20/hello-world/index.html","hash":"c16253b1e7171ebc721dceb02921fa93d876613e","modified":1619058523695},{"_id":"public/2021/04/20/create-blog/index.html","hash":"90fe04312f1dcc0386cb9d9f18a5f89605583209","modified":1619058523695},{"_id":"public/2021/04/20/CSS布局之多列布局(1)/index.html","hash":"af4b5c676335d9f0d34f65c9e11d1f28a9fb0346","modified":1619058523695},{"_id":"public/archives/index.html","hash":"3e96941d65577c835661a52f9a656f5128fed64c","modified":1619058523695},{"_id":"public/archives/2021/index.html","hash":"f1c06811cfcf8f741964582d2c2d34e9530b9b3c","modified":1619058523695},{"_id":"public/archives/2021/04/index.html","hash":"e524b66cdf4467d5b74411b6e10f9f33e22e6e96","modified":1619058523695},{"_id":"public/index.html","hash":"11194bb9ac7e455abd103c5df9b7d4add15b71c0","modified":1619058523695},{"_id":"public/images/multicol-layout-template .png","hash":"fd7e561e1af849fe9401b86cab5ae3005dbb3286","modified":1618908038501},{"_id":"public/css/fonts/fontawesome-webfont.woff","hash":"28b782240b3e76db824e12c02754a9731a167527","modified":1618908038501},{"_id":"public/css/fonts/fontawesome-webfont.woff2","hash":"d6f48cba7d076fb6f2fd6ba993a75b9dc1ecbf0c","modified":1618908038501},{"_id":"public/2021/04/20/CSS布局之多列布局(1)/column-count_and_column-width.png","hash":"0f4a1d2b537c3c1f6ff553f5d5637d1682d99f91","modified":1618908038501},{"_id":"public/css/fonts/FontAwesome.otf","hash":"048707bc52ac4b6563aaa383bfe8660a0ddc908c","modified":1618908038501},{"_id":"public/css/fonts/fontawesome-webfont.eot","hash":"d980c2ce873dc43af460d4d572d441304499f400","modified":1618908038501},{"_id":"public/css/fonts/fontawesome-webfont.ttf","hash":"13b1eab65a983c7a73bc7997c479d66943f7c6cb","modified":1618908038501},{"_id":"public/fancybox/jquery.fancybox.min.css","hash":"1be9b79be02a1cfc5d96c4a5e0feb8f472babd95","modified":1618908038501},{"_id":"public/css/style.css","hash":"263d98c93ae32dda6f7bbc8473105f3c441aca99","modified":1618908038501},{"_id":"public/js/script.js","hash":"998ed4c5b147e1299bf62beebf33514474f28112","modified":1618908038501},{"_id":"public/css/images/banner.jpg","hash":"f44aa591089fcb3ec79770a1e102fd3289a7c6a6","modified":1618908038501},{"_id":"public/2021/04/20/CSS布局之多列布局(1)/column-count.png","hash":"1fd364e6359b034aa18a89e19ac8cc3d02824e65","modified":1618908038501},{"_id":"public/2021/04/20/CSS布局之多列布局(1)/column-width.png","hash":"db81691726e8e5e3ddc058f21b0622c8cfdafdf3","modified":1618908038501},{"_id":"public/fancybox/jquery.fancybox.min.js","hash":"6181412e73966696d08e1e5b1243a572d0f22ba6","modified":1618908038501},{"_id":"public/js/jquery-3.4.1.min.js","hash":"88523924351bac0b5d560fe0c5781e2556e7693d","modified":1618908038501},{"_id":"public/css/fonts/fontawesome-webfont.svg","hash":"98a8aa5cf7d62c2eff5f07ede8d844b874ef06ed","modified":1618908038501},{"_id":"source/css/index.md","hash":"e14c30783ee465d13d05ba8f19c662f83a5432db","modified":1618908658119},{"_id":"source/hexo/index.md","hash":"0fd50b445e018492a7fa32baf36711a639bd0468","modified":1618908733623},{"_id":"source/.DS_Store","hash":"4160129e0096cb491b6a8392f915fd73a82b3266","modified":1618974185976},{"_id":"source/images/favicon-32x32.jpg","hash":"bbdb3e5b58257819a8e92c70cd50d23156a93b7a","modified":1618919184000},{"_id":"source/images/favicon-16x16.jpg","hash":"f4b6e56927729990e226c333788fa23bec0220d7","modified":1618919020000},{"_id":"source/images/.DS_Store","hash":"f357a712fb626b20b2f26313f846a84a3183d1ba","modified":1618985609728},{"_id":"public/css/index.html","hash":"97ff25784afea258f7ff38d0594aaff08ba7bdd7","modified":1619058523695},{"_id":"public/hexo/index.html","hash":"36ae68e2cf52240fdee23a12b2da7bc0fae391e8","modified":1619058523695},{"_id":"public/images/favicon-16x16.jpg","hash":"f4b6e56927729990e226c333788fa23bec0220d7","modified":1619058523695},{"_id":"public/images/favicon-32x32.jpg","hash":"bbdb3e5b58257819a8e92c70cd50d23156a93b7a","modified":1619058523695}],"Category":[],"Data":[],"Page":[{"title":"css","date":"2021-04-20T08:50:58.000Z","_content":"","source":"css/index.md","raw":"---\ntitle: css\ndate: 2021-04-20 16:50:58\n---\n","updated":"2021-04-20T08:50:58.119Z","path":"css/index.html","comments":1,"layout":"page","_id":"cknpsix3y0000omna04gbbet1","content":"","site":{"data":{}},"excerpt":"","more":""},{"title":"hexo","date":"2021-04-20T08:52:13.000Z","_content":"","source":"hexo/index.md","raw":"---\ntitle: hexo\ndate: 2021-04-20 16:52:13\n---\n","updated":"2021-04-20T08:52:13.623Z","path":"hexo/index.html","comments":1,"layout":"page","_id":"cknpsix420001omnach2od9s8","content":"","site":{"data":{}},"excerpt":"","more":""}],"Post":[{"title":"CSS布局之多列布局-Multicol基本概念（1）","date":"2021-04-20T02:54:39.000Z","type":"css","_content":"\n# Multicol的基本概念\n\n多列布局，通常简称为 multicol，是一种用于将内容布局到一组列框（类似于报纸中的列）的规范。\n\n## 关键概念和术语\n\nMulticol 与我们在 CSS 中拥有的其他布局方法不同，它将内容（包括所有后代元素）分成几列。\n\n规范定义的属性是：\n\n- column-width\n- column-count\n- columns\n- column-rule-color\n- column-rule-style\n- column-rule-width\n- column-rule\n- column-span\n- column-fill\n- column-gap\n\n通过向元素添加`column-count`或`column-width`，该元素将成为多列容器，或简称为*Multicol*容器。这些列是匿名框，在规范中成为列框。\n\n## columns 定义\n\n要创建*Multicol*容器，必须使用至少一个`column-*`属性，这些属性为 column-count 和`column-width`。\n\n### column-count 属性\n\n`column-count`属性指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。\n\n### 示例1：使用 column-count 属性\n\n```html\n<div class=\"container\">\n <p>\n Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion\n daikon amaranth tatsoi tomatillo melon azuki bean garlic.\n </p>\n\n <p>\n Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette\n tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.\n Dandelion cucumber earthnut pea peanut soko zucchini.\n </p>\n\n <p>\n Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce\n kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter\n purslane kale. Celery potato scallion desert raisin horseradish spinach\n carrot soko.\n </p>\n</div>\n```\n\n```css\n.container {\n column-count: 3;\n}\n```\n\n\n\n### column-width 属性\n\n`column-width`属性用于给每列设置一个最佳宽度。如果你声明 `column-width`，浏览器将算出该宽度在 *Multicol*容器能分多少列，并且把额外的空间填充到这些列当中。因此，应将列框视为最小宽度，因为由于额外的空间，列可能而更宽。\n\n### 示例2：使用 column-width 属性\n\n在以下示例中，我们使用 column-width 属性值为 200 px。但最终为了适配容器，列的宽度却大于 200 像素，额外的空间被平均分配了。\n\n```html\n<div class=\"container\">\n <p>\n Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion\n daikon amaranth tatsoi tomatillo melon azuki bean garlic.\n </p>\n\n <p>\n Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette\n tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.\n Dandelion cucumber earthnut pea peanut soko zucchini.\n </p>\n\n <p>\n Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce\n kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter\n purslane kale. Celery potato scallion desert raisin horseradish spinach\n carrot soko.\n </p>\n</div>\n```\n\n```css\n.container {\n column-width: 200px;\n}\n```\n\n\n\n### 同时使用 column-count 和 column-width\n\n如果在 *multicol*容器上指定这两个属性，则 `column-count`将作为最大列数。因此，将按 `column-width`的值计算，直到达到 `column-count`定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不会再绘制，并且额外空间在现有列之间均匀分布。\n\n### 示例3\n\n```html\n<div class=\"container\">\n <p>\n Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion\n daikon amaranth tatsoi tomatillo melon azuki bean garlic.\n </p>\n\n <p>\n Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette\n tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.\n Dandelion cucumber earthnut pea peanut soko zucchini.\n </p>\n\n <p>\n Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce\n kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter\n purslane kale. Celery potato scallion desert raisin horseradish spinach\n carrot soko.\n </p>\n</div>\n```\n\n```css\n.container {\n column-count: 2;\n column-width: 200px;\n}\n```\n\n\n\n### columns 缩写\n\n可以使用 `columns`缩写来设置 `column-count`和 `column-width`。如果设置长度单位，这将用于 `column-width`，设置一个整数，它将用于 `column-count`。可以设置两者，用空格分隔这两个值。`columns`可以按任意顺序将属性指定为下面列出的一个或两个值。\n\n此 CSS 结果与示例1相同，column-count 设置为3。\n\n```css\n.container{\n columns: 3;\n}\n```\n\n此CSS结果与示例2相同，column-width 为200px。\n\n```css\n.container{\n columns: 200px;\n}\n```\n\n此CSS结果与示例3相同，同时设置column-count和column-width。\n\n```css\n.container{\n columns: 2 200px;\n}\n```\n\n\n\n","source":"_posts/CSS布局之多列布局(1).md","raw":"---\ntitle: CSS布局之多列布局-Multicol基本概念（1）\ndate: 2021-04-20 10:54:39\ntags:\ntype: css\n---\n\n# Multicol的基本概念\n\n多列布局，通常简称为 multicol，是一种用于将内容布局到一组列框（类似于报纸中的列）的规范。\n\n## 关键概念和术语\n\nMulticol 与我们在 CSS 中拥有的其他布局方法不同，它将内容（包括所有后代元素）分成几列。\n\n规范定义的属性是：\n\n- column-width\n- column-count\n- columns\n- column-rule-color\n- column-rule-style\n- column-rule-width\n- column-rule\n- column-span\n- column-fill\n- column-gap\n\n通过向元素添加`column-count`或`column-width`，该元素将成为多列容器，或简称为*Multicol*容器。这些列是匿名框，在规范中成为列框。\n\n## columns 定义\n\n要创建*Multicol*容器，必须使用至少一个`column-*`属性，这些属性为 column-count 和`column-width`。\n\n### column-count 属性\n\n`column-count`属性指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。\n\n### 示例1：使用 column-count 属性\n\n```html\n<div class=\"container\">\n <p>\n Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion\n daikon amaranth tatsoi tomatillo melon azuki bean garlic.\n </p>\n\n <p>\n Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette\n tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.\n Dandelion cucumber earthnut pea peanut soko zucchini.\n </p>\n\n <p>\n Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce\n kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter\n purslane kale. Celery potato scallion desert raisin horseradish spinach\n carrot soko.\n </p>\n</div>\n```\n\n```css\n.container {\n column-count: 3;\n}\n```\n\n\n\n### column-width 属性\n\n`column-width`属性用于给每列设置一个最佳宽度。如果你声明 `column-width`，浏览器将算出该宽度在 *Multicol*容器能分多少列，并且把额外的空间填充到这些列当中。因此，应将列框视为最小宽度，因为由于额外的空间，列可能而更宽。\n\n### 示例2：使用 column-width 属性\n\n在以下示例中，我们使用 column-width 属性值为 200 px。但最终为了适配容器，列的宽度却大于 200 像素，额外的空间被平均分配了。\n\n```html\n<div class=\"container\">\n <p>\n Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion\n daikon amaranth tatsoi tomatillo melon azuki bean garlic.\n </p>\n\n <p>\n Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette\n tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.\n Dandelion cucumber earthnut pea peanut soko zucchini.\n </p>\n\n <p>\n Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce\n kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter\n purslane kale. Celery potato scallion desert raisin horseradish spinach\n carrot soko.\n </p>\n</div>\n```\n\n```css\n.container {\n column-width: 200px;\n}\n```\n\n\n\n### 同时使用 column-count 和 column-width\n\n如果在 *multicol*容器上指定这两个属性，则 `column-count`将作为最大列数。因此，将按 `column-width`的值计算，直到达到 `column-count`定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不会再绘制，并且额外空间在现有列之间均匀分布。\n\n### 示例3\n\n```html\n<div class=\"container\">\n <p>\n Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion\n daikon amaranth tatsoi tomatillo melon azuki bean garlic.\n </p>\n\n <p>\n Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette\n tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.\n Dandelion cucumber earthnut pea peanut soko zucchini.\n </p>\n\n <p>\n Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce\n kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter\n purslane kale. Celery potato scallion desert raisin horseradish spinach\n carrot soko.\n </p>\n</div>\n```\n\n```css\n.container {\n column-count: 2;\n column-width: 200px;\n}\n```\n\n\n\n### columns 缩写\n\n可以使用 `columns`缩写来设置 `column-count`和 `column-width`。如果设置长度单位，这将用于 `column-width`，设置一个整数，它将用于 `column-count`。可以设置两者，用空格分隔这两个值。`columns`可以按任意顺序将属性指定为下面列出的一个或两个值。\n\n此 CSS 结果与示例1相同，column-count 设置为3。\n\n```css\n.container{\n columns: 3;\n}\n```\n\n此CSS结果与示例2相同，column-width 为200px。\n\n```css\n.container{\n columns: 200px;\n}\n```\n\n此CSS结果与示例3相同，同时设置column-count和column-width。\n\n```css\n.container{\n columns: 2 200px;\n}\n```\n\n\n\n","slug":"CSS布局之多列布局(1)","published":1,"updated":"2021-04-20T08:51:28.333Z","_id":"cknps1pci0000ovna9heq043w","comments":1,"layout":"post","photos":[],"link":"","content":"<h1 id=\"Multicol的基本概念\"><a href=\"#Multicol的基本概念\" class=\"headerlink\" title=\"Multicol的基本概念\"></a>Multicol的基本概念</h1><p>多列布局，通常简称为 multicol，是一种用于将内容布局到一组列框（类似于报纸中的列）的规范。</p>\n<h2 id=\"关键概念和术语\"><a href=\"#关键概念和术语\" class=\"headerlink\" title=\"关键概念和术语\"></a>关键概念和术语</h2><p>Multicol 与我们在 CSS 中拥有的其他布局方法不同，它将内容（包括所有后代元素）分成几列。</p>\n<p>规范定义的属性是：</p>\n<ul>\n<li>column-width</li>\n<li>column-count</li>\n<li>columns</li>\n<li>column-rule-color</li>\n<li>column-rule-style</li>\n<li>column-rule-width</li>\n<li>column-rule</li>\n<li>column-span</li>\n<li>column-fill</li>\n<li>column-gap</li>\n</ul>\n<p>通过向元素添加<code>column-count</code>或<code>column-width</code>，该元素将成为多列容器，或简称为<em>Multicol</em>容器。这些列是匿名框，在规范中成为列框。</p>\n<h2 id=\"columns-定义\"><a href=\"#columns-定义\" class=\"headerlink\" title=\"columns 定义\"></a>columns 定义</h2><p>要创建<em>Multicol</em>容器，必须使用至少一个<code>column-*</code>属性，这些属性为 column-count 和<code>column-width</code>。</p>\n<h3 id=\"column-count-属性\"><a href=\"#column-count-属性\" class=\"headerlink\" title=\"column-count 属性\"></a>column-count 属性</h3><p><code>column-count</code>属性指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。</p>\n<h3 id=\"示例1：使用-column-count-属性\"><a href=\"#示例1：使用-column-count-属性\" class=\"headerlink\" title=\"示例1：使用 column-count 属性\"></a>示例1：使用 column-count 属性</h3><figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"container"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion</span><br><span class=\"line\"> daikon amaranth tatsoi tomatillo melon azuki bean garlic.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette</span><br><span class=\"line\"> tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</span><br><span class=\"line\"> Dandelion cucumber earthnut pea peanut soko zucchini.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce</span><br><span class=\"line\"> kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter</span><br><span class=\"line\"> purslane kale. Celery potato scallion desert raisin horseradish spinach</span><br><span class=\"line\"> carrot soko.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span> {</span><br><span class=\"line\"> <span class=\"attribute\">column-count</span>: <span class=\"number\">3</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"/2021/04/20/CSS%E5%B8%83%E5%B1%80%E4%B9%8B%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80(1)/column-count.png\" alt=\"column-count\"></p>\n<h3 id=\"column-width-属性\"><a href=\"#column-width-属性\" class=\"headerlink\" title=\"column-width 属性\"></a>column-width 属性</h3><p><code>column-width</code>属性用于给每列设置一个最佳宽度。如果你声明 <code>column-width</code>，浏览器将算出该宽度在 <em>Multicol</em>容器能分多少列，并且把额外的空间填充到这些列当中。因此，应将列框视为最小宽度，因为由于额外的空间，列可能而更宽。</p>\n<h3 id=\"示例2：使用-column-width-属性\"><a href=\"#示例2：使用-column-width-属性\" class=\"headerlink\" title=\"示例2：使用 column-width 属性\"></a>示例2：使用 column-width 属性</h3><p>在以下示例中，我们使用 column-width 属性值为 200 px。但最终为了适配容器，列的宽度却大于 200 像素，额外的空间被平均分配了。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"container"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion</span><br><span class=\"line\"> daikon amaranth tatsoi tomatillo melon azuki bean garlic.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette</span><br><span class=\"line\"> tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</span><br><span class=\"line\"> Dandelion cucumber earthnut pea peanut soko zucchini.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce</span><br><span class=\"line\"> kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter</span><br><span class=\"line\"> purslane kale. Celery potato scallion desert raisin horseradish spinach</span><br><span class=\"line\"> carrot soko.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span> {</span><br><span class=\"line\"> <span class=\"attribute\">column-width</span>: <span class=\"number\">200px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"/2021/04/20/CSS%E5%B8%83%E5%B1%80%E4%B9%8B%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80(1)/column-width.png\" alt=\"column-width\"></p>\n<h3 id=\"同时使用-column-count-和-column-width\"><a href=\"#同时使用-column-count-和-column-width\" class=\"headerlink\" title=\"同时使用 column-count 和 column-width\"></a>同时使用 column-count 和 column-width</h3><p>如果在 <em>multicol</em>容器上指定这两个属性，则 <code>column-count</code>将作为最大列数。因此，将按 <code>column-width</code>的值计算，直到达到 <code>column-count</code>定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不会再绘制，并且额外空间在现有列之间均匀分布。</p>\n<h3 id=\"示例3\"><a href=\"#示例3\" class=\"headerlink\" title=\"示例3\"></a>示例3</h3><figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"container"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion</span><br><span class=\"line\"> daikon amaranth tatsoi tomatillo melon azuki bean garlic.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette</span><br><span class=\"line\"> tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</span><br><span class=\"line\"> Dandelion cucumber earthnut pea peanut soko zucchini.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce</span><br><span class=\"line\"> kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter</span><br><span class=\"line\"> purslane kale. Celery potato scallion desert raisin horseradish spinach</span><br><span class=\"line\"> carrot soko.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span> {</span><br><span class=\"line\"> <span class=\"attribute\">column-count</span>: <span class=\"number\">2</span>;</span><br><span class=\"line\"> <span class=\"attribute\">column-width</span>: <span class=\"number\">200px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"/2021/04/20/CSS%E5%B8%83%E5%B1%80%E4%B9%8B%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80(1)/column-count_and_column-width.png\" alt=\"column-count_and_column-width\"></p>\n<h3 id=\"columns-缩写\"><a href=\"#columns-缩写\" class=\"headerlink\" title=\"columns 缩写\"></a>columns 缩写</h3><p>可以使用 <code>columns</code>缩写来设置 <code>column-count</code>和 <code>column-width</code>。如果设置长度单位，这将用于 <code>column-width</code>，设置一个整数，它将用于 <code>column-count</code>。可以设置两者，用空格分隔这两个值。<code>columns</code>可以按任意顺序将属性指定为下面列出的一个或两个值。</p>\n<p>此 CSS 结果与示例1相同，column-count 设置为3。</p>\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span>{</span><br><span class=\"line\"> <span class=\"attribute\">columns</span>: <span class=\"number\">3</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>此CSS结果与示例2相同，column-width 为200px。</p>\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span>{</span><br><span class=\"line\"> <span class=\"attribute\">columns</span>: <span class=\"number\">200px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>此CSS结果与示例3相同，同时设置column-count和column-width。</p>\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span>{</span><br><span class=\"line\"> <span class=\"attribute\">columns</span>: <span class=\"number\">2</span> <span class=\"number\">200px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n\n\n","site":{"data":{}},"excerpt":"","more":"<h1 id=\"Multicol的基本概念\"><a href=\"#Multicol的基本概念\" class=\"headerlink\" title=\"Multicol的基本概念\"></a>Multicol的基本概念</h1><p>多列布局，通常简称为 multicol，是一种用于将内容布局到一组列框（类似于报纸中的列）的规范。</p>\n<h2 id=\"关键概念和术语\"><a href=\"#关键概念和术语\" class=\"headerlink\" title=\"关键概念和术语\"></a>关键概念和术语</h2><p>Multicol 与我们在 CSS 中拥有的其他布局方法不同，它将内容（包括所有后代元素）分成几列。</p>\n<p>规范定义的属性是：</p>\n<ul>\n<li>column-width</li>\n<li>column-count</li>\n<li>columns</li>\n<li>column-rule-color</li>\n<li>column-rule-style</li>\n<li>column-rule-width</li>\n<li>column-rule</li>\n<li>column-span</li>\n<li>column-fill</li>\n<li>column-gap</li>\n</ul>\n<p>通过向元素添加<code>column-count</code>或<code>column-width</code>，该元素将成为多列容器，或简称为<em>Multicol</em>容器。这些列是匿名框，在规范中成为列框。</p>\n<h2 id=\"columns-定义\"><a href=\"#columns-定义\" class=\"headerlink\" title=\"columns 定义\"></a>columns 定义</h2><p>要创建<em>Multicol</em>容器，必须使用至少一个<code>column-*</code>属性，这些属性为 column-count 和<code>column-width</code>。</p>\n<h3 id=\"column-count-属性\"><a href=\"#column-count-属性\" class=\"headerlink\" title=\"column-count 属性\"></a>column-count 属性</h3><p><code>column-count</code>属性指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。</p>\n<h3 id=\"示例1：使用-column-count-属性\"><a href=\"#示例1：使用-column-count-属性\" class=\"headerlink\" title=\"示例1：使用 column-count 属性\"></a>示例1：使用 column-count 属性</h3><figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"container"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion</span><br><span class=\"line\"> daikon amaranth tatsoi tomatillo melon azuki bean garlic.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette</span><br><span class=\"line\"> tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</span><br><span class=\"line\"> Dandelion cucumber earthnut pea peanut soko zucchini.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce</span><br><span class=\"line\"> kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter</span><br><span class=\"line\"> purslane kale. Celery potato scallion desert raisin horseradish spinach</span><br><span class=\"line\"> carrot soko.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span> {</span><br><span class=\"line\"> <span class=\"attribute\">column-count</span>: <span class=\"number\">3</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"/2021/04/20/CSS%E5%B8%83%E5%B1%80%E4%B9%8B%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80(1)/column-count.png\" alt=\"column-count\"></p>\n<h3 id=\"column-width-属性\"><a href=\"#column-width-属性\" class=\"headerlink\" title=\"column-width 属性\"></a>column-width 属性</h3><p><code>column-width</code>属性用于给每列设置一个最佳宽度。如果你声明 <code>column-width</code>，浏览器将算出该宽度在 <em>Multicol</em>容器能分多少列，并且把额外的空间填充到这些列当中。因此，应将列框视为最小宽度，因为由于额外的空间，列可能而更宽。</p>\n<h3 id=\"示例2：使用-column-width-属性\"><a href=\"#示例2：使用-column-width-属性\" class=\"headerlink\" title=\"示例2：使用 column-width 属性\"></a>示例2：使用 column-width 属性</h3><p>在以下示例中，我们使用 column-width 属性值为 200 px。但最终为了适配容器，列的宽度却大于 200 像素，额外的空间被平均分配了。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"container"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion</span><br><span class=\"line\"> daikon amaranth tatsoi tomatillo melon azuki bean garlic.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette</span><br><span class=\"line\"> tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</span><br><span class=\"line\"> Dandelion cucumber earthnut pea peanut soko zucchini.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce</span><br><span class=\"line\"> kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter</span><br><span class=\"line\"> purslane kale. Celery potato scallion desert raisin horseradish spinach</span><br><span class=\"line\"> carrot soko.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span> {</span><br><span class=\"line\"> <span class=\"attribute\">column-width</span>: <span class=\"number\">200px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"/2021/04/20/CSS%E5%B8%83%E5%B1%80%E4%B9%8B%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80(1)/column-width.png\" alt=\"column-width\"></p>\n<h3 id=\"同时使用-column-count-和-column-width\"><a href=\"#同时使用-column-count-和-column-width\" class=\"headerlink\" title=\"同时使用 column-count 和 column-width\"></a>同时使用 column-count 和 column-width</h3><p>如果在 <em>multicol</em>容器上指定这两个属性，则 <code>column-count</code>将作为最大列数。因此，将按 <code>column-width</code>的值计算，直到达到 <code>column-count</code>定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不会再绘制，并且额外空间在现有列之间均匀分布。</p>\n<h3 id=\"示例3\"><a href=\"#示例3\" class=\"headerlink\" title=\"示例3\"></a>示例3</h3><figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"container"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion</span><br><span class=\"line\"> daikon amaranth tatsoi tomatillo melon azuki bean garlic.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette</span><br><span class=\"line\"> tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</span><br><span class=\"line\"> Dandelion cucumber earthnut pea peanut soko zucchini.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce</span><br><span class=\"line\"> kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter</span><br><span class=\"line\"> purslane kale. Celery potato scallion desert raisin horseradish spinach</span><br><span class=\"line\"> carrot soko.</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span> {</span><br><span class=\"line\"> <span class=\"attribute\">column-count</span>: <span class=\"number\">2</span>;</span><br><span class=\"line\"> <span class=\"attribute\">column-width</span>: <span class=\"number\">200px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"/2021/04/20/CSS%E5%B8%83%E5%B1%80%E4%B9%8B%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80(1)/column-count_and_column-width.png\" alt=\"column-count_and_column-width\"></p>\n<h3 id=\"columns-缩写\"><a href=\"#columns-缩写\" class=\"headerlink\" title=\"columns 缩写\"></a>columns 缩写</h3><p>可以使用 <code>columns</code>缩写来设置 <code>column-count</code>和 <code>column-width</code>。如果设置长度单位，这将用于 <code>column-width</code>，设置一个整数，它将用于 <code>column-count</code>。可以设置两者，用空格分隔这两个值。<code>columns</code>可以按任意顺序将属性指定为下面列出的一个或两个值。</p>\n<p>此 CSS 结果与示例1相同，column-count 设置为3。</p>\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span>{</span><br><span class=\"line\"> <span class=\"attribute\">columns</span>: <span class=\"number\">3</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>此CSS结果与示例2相同，column-width 为200px。</p>\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span>{</span><br><span class=\"line\"> <span class=\"attribute\">columns</span>: <span class=\"number\">200px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>此CSS结果与示例3相同，同时设置column-count和column-width。</p>\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.container</span>{</span><br><span class=\"line\"> <span class=\"attribute\">columns</span>: <span class=\"number\">2</span> <span class=\"number\">200px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n\n\n"},{"title":"使用Hexo搭建个人博客","date":"2021-04-20T02:54:39.000Z","type":"hexo","_content":"前提：在不想自己买云服务器搭建个人博客的情况下，可以使用Hexo配合GitHub Pages搭建个人博客。\n\n## Hexo\n[Hexo](https://hexo.io/zh-cn/) 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。\n\n### 安装前提\n- [Node.js](https://nodejs.org/en/)((Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本))\n- [git](https://git-scm.com/)\n\n### 安装Hexo\n全局安装\n``` bash\nnpm install -g hexo-cli\n```\n局部安装\n``` bash\nnpm install hexo\n```\n\n## 部署\n\n### 创建Hexo项目\n在空文件夹中执行下列命令，folder可填可不填（填了则会新建目录，不填则执行命令的文件夹必须为空，否则报错。）\n``` bash\nhexo init <folder>\ncd <folder>\nnpm install\n```\n\n### 创建repository\nGitHub中创建repository，如果你希望你的站点能通过 `<你的 GitHub 用户名>.github.io`域名访问，你的 repository 应该直接命名为 `<你的 GitHub 用户名>.github.io`。\n\n### 推送repository\n将Hexo项目中的<folder> 中的文件复制或剪贴到repository中。需要检查git忽略配置文件`.gitignore`文件中是否包含`public`。没有需要加上\n\n### 注册并配置Travis CI \n1. 使用GitHub账号注册Travis CI\n2. 注册后，配置权限，只访问刚创建的repository，而不是所有的repository\n3. 将GitHub新建的[Personal Access Token](https://github.com/settings/tokens)，只勾选`repo`权限\n4. 在Travis CI的repository设置页面，设置环境变量Name：GH_TOKEN，value：Github刚生成的Token确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存。\n5. 在你的 Hexo 站点文件夹中新建一个 .travis.yml 文件并推送到GitHub：\n``` bash\nsudo: false\nlanguage: node_js\nnode_js:\n - 10 # use nodejs v10 LTS\ncache: npm\nbranches:\n only:\n - master # build master branch only\nscript:\n - hexo generate # generate static files\ndeploy:\n provider: pages\n skip-cleanup: true\n github-token: $GH_TOKEN\n keep-history: true\n on:\n branch: master\n local-dir: public\n```","source":"_posts/create-blog.md","raw":"---\ntitle: 使用Hexo搭建个人博客\ndate: 2021-04-20 10:54:39\ntags:\ntype: hexo\n---\n前提：在不想自己买云服务器搭建个人博客的情况下，可以使用Hexo配合GitHub Pages搭建个人博客。\n\n## Hexo\n[Hexo](https://hexo.io/zh-cn/) 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。\n\n### 安装前提\n- [Node.js](https://nodejs.org/en/)((Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本))\n- [git](https://git-scm.com/)\n\n### 安装Hexo\n全局安装\n``` bash\nnpm install -g hexo-cli\n```\n局部安装\n``` bash\nnpm install hexo\n```\n\n## 部署\n\n### 创建Hexo项目\n在空文件夹中执行下列命令，folder可填可不填（填了则会新建目录，不填则执行命令的文件夹必须为空，否则报错。）\n``` bash\nhexo init <folder>\ncd <folder>\nnpm install\n```\n\n### 创建repository\nGitHub中创建repository，如果你希望你的站点能通过 `<你的 GitHub 用户名>.github.io`域名访问，你的 repository 应该直接命名为 `<你的 GitHub 用户名>.github.io`。\n\n### 推送repository\n将Hexo项目中的<folder> 中的文件复制或剪贴到repository中。需要检查git忽略配置文件`.gitignore`文件中是否包含`public`。没有需要加上\n\n### 注册并配置Travis CI \n1. 使用GitHub账号注册Travis CI\n2. 注册后，配置权限，只访问刚创建的repository，而不是所有的repository\n3. 将GitHub新建的[Personal Access Token](https://github.com/settings/tokens)，只勾选`repo`权限\n4. 在Travis CI的repository设置页面，设置环境变量Name：GH_TOKEN，value：Github刚生成的Token确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存。\n5. 在你的 Hexo 站点文件夹中新建一个 .travis.yml 文件并推送到GitHub：\n``` bash\nsudo: false\nlanguage: node_js\nnode_js:\n - 10 # use nodejs v10 LTS\ncache: npm\nbranches:\n only:\n - master # build master branch only\nscript:\n - hexo generate # generate static files\ndeploy:\n provider: pages\n skip-cleanup: true\n github-token: $GH_TOKEN\n keep-history: true\n on:\n branch: master\n local-dir: public\n```","slug":"create-blog","published":1,"updated":"2021-04-20T08:52:37.672Z","_id":"cknps1pcn0001ovna7qzxbevu","comments":1,"layout":"post","photos":[],"link":"","content":"<p>前提：在不想自己买云服务器搭建个人博客的情况下，可以使用Hexo配合GitHub Pages搭建个人博客。</p>\n<h2 id=\"Hexo\"><a href=\"#Hexo\" class=\"headerlink\" title=\"Hexo\"></a>Hexo</h2><p><a href=\"https://hexo.io/zh-cn/\">Hexo</a> 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p>\n<h3 id=\"安装前提\"><a href=\"#安装前提\" class=\"headerlink\" title=\"安装前提\"></a>安装前提</h3><ul>\n<li><a href=\"https://nodejs.org/en/\">Node.js</a>((Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本))</li>\n<li><a href=\"https://git-scm.com/\">git</a></li>\n</ul>\n<h3 id=\"安装Hexo\"><a href=\"#安装Hexo\" class=\"headerlink\" title=\"安装Hexo\"></a>安装Hexo</h3><p>全局安装</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>\n<p>局部安装</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install hexo</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"部署\"><a href=\"#部署\" class=\"headerlink\" title=\"部署\"></a>部署</h2><h3 id=\"创建Hexo项目\"><a href=\"#创建Hexo项目\" class=\"headerlink\" title=\"创建Hexo项目\"></a>创建Hexo项目</h3><p>在空文件夹中执行下列命令，folder可填可不填（填了则会新建目录，不填则执行命令的文件夹必须为空，否则报错。）</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">hexo init <folder></span><br><span class=\"line\"><span class=\"built_in\">cd</span> <folder></span><br><span class=\"line\">npm install</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"创建repository\"><a href=\"#创建repository\" class=\"headerlink\" title=\"创建repository\"></a>创建repository</h3><p>GitHub中创建repository，如果你希望你的站点能通过 <code><你的 GitHub 用户名>.github.io</code>域名访问，你的 repository 应该直接命名为 <code><你的 GitHub 用户名>.github.io</code>。</p>\n<h3 id=\"推送repository\"><a href=\"#推送repository\" class=\"headerlink\" title=\"推送repository\"></a>推送repository</h3><p>将Hexo项目中的<folder> 中的文件复制或剪贴到repository中。需要检查git忽略配置文件<code>.gitignore</code>文件中是否包含<code>public</code>。没有需要加上</p>\n<h3 id=\"注册并配置Travis-CI\"><a href=\"#注册并配置Travis-CI\" class=\"headerlink\" title=\"注册并配置Travis CI\"></a>注册并配置Travis CI</h3><ol>\n<li>使用GitHub账号注册Travis CI</li>\n<li>注册后，配置权限，只访问刚创建的repository，而不是所有的repository</li>\n<li>将GitHub新建的<a href=\"https://github.com/settings/tokens\">Personal Access Token</a>，只勾选<code>repo</code>权限</li>\n<li>在Travis CI的repository设置页面，设置环境变量Name：GH_TOKEN，value：Github刚生成的Token确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存。</li>\n<li>在你的 Hexo 站点文件夹中新建一个 .travis.yml 文件并推送到GitHub：<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">sudo: <span class=\"literal\">false</span></span><br><span class=\"line\">language: node_js</span><br><span class=\"line\">node_js:</span><br><span class=\"line\"> - 10 <span class=\"comment\"># use nodejs v10 LTS</span></span><br><span class=\"line\">cache: npm</span><br><span class=\"line\">branches:</span><br><span class=\"line\"> only:</span><br><span class=\"line\"> - master <span class=\"comment\"># build master branch only</span></span><br><span class=\"line\">script:</span><br><span class=\"line\"> - hexo generate <span class=\"comment\"># generate static files</span></span><br><span class=\"line\">deploy:</span><br><span class=\"line\"> provider: pages</span><br><span class=\"line\"> skip-cleanup: <span class=\"literal\">true</span></span><br><span class=\"line\"> github-token: <span class=\"variable\">$GH_TOKEN</span></span><br><span class=\"line\"> keep-history: <span class=\"literal\">true</span></span><br><span class=\"line\"> on:</span><br><span class=\"line\"> branch: master</span><br><span class=\"line\"> local-dir: public</span><br></pre></td></tr></table></figure></li>\n</ol>\n","site":{"data":{}},"excerpt":"","more":"<p>前提：在不想自己买云服务器搭建个人博客的情况下，可以使用Hexo配合GitHub Pages搭建个人博客。</p>\n<h2 id=\"Hexo\"><a href=\"#Hexo\" class=\"headerlink\" title=\"Hexo\"></a>Hexo</h2><p><a href=\"https://hexo.io/zh-cn/\">Hexo</a> 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p>\n<h3 id=\"安装前提\"><a href=\"#安装前提\" class=\"headerlink\" title=\"安装前提\"></a>安装前提</h3><ul>\n<li><a href=\"https://nodejs.org/en/\">Node.js</a>((Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本))</li>\n<li><a href=\"https://git-scm.com/\">git</a></li>\n</ul>\n<h3 id=\"安装Hexo\"><a href=\"#安装Hexo\" class=\"headerlink\" title=\"安装Hexo\"></a>安装Hexo</h3><p>全局安装</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>\n<p>局部安装</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install hexo</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"部署\"><a href=\"#部署\" class=\"headerlink\" title=\"部署\"></a>部署</h2><h3 id=\"创建Hexo项目\"><a href=\"#创建Hexo项目\" class=\"headerlink\" title=\"创建Hexo项目\"></a>创建Hexo项目</h3><p>在空文件夹中执行下列命令，folder可填可不填（填了则会新建目录，不填则执行命令的文件夹必须为空，否则报错。）</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">hexo init <folder></span><br><span class=\"line\"><span class=\"built_in\">cd</span> <folder></span><br><span class=\"line\">npm install</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"创建repository\"><a href=\"#创建repository\" class=\"headerlink\" title=\"创建repository\"></a>创建repository</h3><p>GitHub中创建repository，如果你希望你的站点能通过 <code><你的 GitHub 用户名>.github.io</code>域名访问，你的 repository 应该直接命名为 <code><你的 GitHub 用户名>.github.io</code>。</p>\n<h3 id=\"推送repository\"><a href=\"#推送repository\" class=\"headerlink\" title=\"推送repository\"></a>推送repository</h3><p>将Hexo项目中的<folder> 中的文件复制或剪贴到repository中。需要检查git忽略配置文件<code>.gitignore</code>文件中是否包含<code>public</code>。没有需要加上</p>\n<h3 id=\"注册并配置Travis-CI\"><a href=\"#注册并配置Travis-CI\" class=\"headerlink\" title=\"注册并配置Travis CI\"></a>注册并配置Travis CI</h3><ol>\n<li>使用GitHub账号注册Travis CI</li>\n<li>注册后，配置权限，只访问刚创建的repository，而不是所有的repository</li>\n<li>将GitHub新建的<a href=\"https://github.com/settings/tokens\">Personal Access Token</a>，只勾选<code>repo</code>权限</li>\n<li>在Travis CI的repository设置页面，设置环境变量Name：GH_TOKEN，value：Github刚生成的Token确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存。</li>\n<li>在你的 Hexo 站点文件夹中新建一个 .travis.yml 文件并推送到GitHub：<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">sudo: <span class=\"literal\">false</span></span><br><span class=\"line\">language: node_js</span><br><span class=\"line\">node_js:</span><br><span class=\"line\"> - 10 <span class=\"comment\"># use nodejs v10 LTS</span></span><br><span class=\"line\">cache: npm</span><br><span class=\"line\">branches:</span><br><span class=\"line\"> only:</span><br><span class=\"line\"> - master <span class=\"comment\"># build master branch only</span></span><br><span class=\"line\">script:</span><br><span class=\"line\"> - hexo generate <span class=\"comment\"># generate static files</span></span><br><span class=\"line\">deploy:</span><br><span class=\"line\"> provider: pages</span><br><span class=\"line\"> skip-cleanup: <span class=\"literal\">true</span></span><br><span class=\"line\"> github-token: <span class=\"variable\">$GH_TOKEN</span></span><br><span class=\"line\"> keep-history: <span class=\"literal\">true</span></span><br><span class=\"line\"> on:</span><br><span class=\"line\"> branch: master</span><br><span class=\"line\"> local-dir: public</span><br></pre></td></tr></table></figure></li>\n</ol>\n"},{"title":"Hello World","_content":"Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues).\n\n## Quick Start\n\n### Create a new post\n\n``` bash\n$ hexo new \"My New Post\"\n```\n\nMore info: [Writing](https://hexo.io/docs/writing.html)\n\n### Run server\n\n``` bash\n$ hexo server\n```\n\nMore info: [Server](https://hexo.io/docs/server.html)\n\n### Generate static files\n\n``` bash\n$ hexo generate\n```\n\nMore info: [Generating](https://hexo.io/docs/generating.html)\n\n### Deploy to remote sites\n\n``` bash\n$ hexo deploy\n```\n\nMore info: [Deployment](https://hexo.io/docs/one-command-deployment.html)\n","source":"_posts/hello-world.md","raw":"---\ntitle: Hello World\n---\nWelcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues).\n\n## Quick Start\n\n### Create a new post\n\n``` bash\n$ hexo new \"My New Post\"\n```\n\nMore info: [Writing](https://hexo.io/docs/writing.html)\n\n### Run server\n\n``` bash\n$ hexo server\n```\n\nMore info: [Server](https://hexo.io/docs/server.html)\n\n### Generate static files\n\n``` bash\n$ hexo generate\n```\n\nMore info: [Generating](https://hexo.io/docs/generating.html)\n\n### Deploy to remote sites\n\n``` bash\n$ hexo deploy\n```\n\nMore info: [Deployment](https://hexo.io/docs/one-command-deployment.html)\n","slug":"hello-world","published":1,"date":"2021-04-20T07:37:24.552Z","updated":"2021-04-20T07:37:24.552Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cknps1pcp0002ovna4eic9yi6","content":"<p>Welcome to <a href=\"https://hexo.io/\">Hexo</a>! This is your very first post. Check <a href=\"https://hexo.io/docs/\">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href=\"https://hexo.io/docs/troubleshooting.html\">troubleshooting</a> or you can ask me on <a href=\"https://github.com/hexojs/hexo/issues\">GitHub</a>.</p>\n<h2 id=\"Quick-Start\"><a href=\"#Quick-Start\" class=\"headerlink\" title=\"Quick Start\"></a>Quick Start</h2><h3 id=\"Create-a-new-post\"><a href=\"#Create-a-new-post\" class=\"headerlink\" title=\"Create a new post\"></a>Create a new post</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo new <span class=\"string\">"My New Post"</span></span><br></pre></td></tr></table></figure>\n\n<p>More info: <a href=\"https://hexo.io/docs/writing.html\">Writing</a></p>\n<h3 id=\"Run-server\"><a href=\"#Run-server\" class=\"headerlink\" title=\"Run server\"></a>Run server</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo server</span><br></pre></td></tr></table></figure>\n\n<p>More info: <a href=\"https://hexo.io/docs/server.html\">Server</a></p>\n<h3 id=\"Generate-static-files\"><a href=\"#Generate-static-files\" class=\"headerlink\" title=\"Generate static files\"></a>Generate static files</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo generate</span><br></pre></td></tr></table></figure>\n\n<p>More info: <a href=\"https://hexo.io/docs/generating.html\">Generating</a></p>\n<h3 id=\"Deploy-to-remote-sites\"><a href=\"#Deploy-to-remote-sites\" class=\"headerlink\" title=\"Deploy to remote sites\"></a>Deploy to remote sites</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo deploy</span><br></pre></td></tr></table></figure>\n\n<p>More info: <a href=\"https://hexo.io/docs/one-command-deployment.html\">Deployment</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>Welcome to <a href=\"https://hexo.io/\">Hexo</a>! This is your very first post. Check <a href=\"https://hexo.io/docs/\">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href=\"https://hexo.io/docs/troubleshooting.html\">troubleshooting</a> or you can ask me on <a href=\"https://github.com/hexojs/hexo/issues\">GitHub</a>.</p>\n<h2 id=\"Quick-Start\"><a href=\"#Quick-Start\" class=\"headerlink\" title=\"Quick Start\"></a>Quick Start</h2><h3 id=\"Create-a-new-post\"><a href=\"#Create-a-new-post\" class=\"headerlink\" title=\"Create a new post\"></a>Create a new post</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo new <span class=\"string\">"My New Post"</span></span><br></pre></td></tr></table></figure>\n\n<p>More info: <a href=\"https://hexo.io/docs/writing.html\">Writing</a></p>\n<h3 id=\"Run-server\"><a href=\"#Run-server\" class=\"headerlink\" title=\"Run server\"></a>Run server</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo server</span><br></pre></td></tr></table></figure>\n\n<p>More info: <a href=\"https://hexo.io/docs/server.html\">Server</a></p>\n<h3 id=\"Generate-static-files\"><a href=\"#Generate-static-files\" class=\"headerlink\" title=\"Generate static files\"></a>Generate static files</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo generate</span><br></pre></td></tr></table></figure>\n\n<p>More info: <a href=\"https://hexo.io/docs/generating.html\">Generating</a></p>\n<h3 id=\"Deploy-to-remote-sites\"><a href=\"#Deploy-to-remote-sites\" class=\"headerlink\" title=\"Deploy to remote sites\"></a>Deploy to remote sites</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo deploy</span><br></pre></td></tr></table></figure>\n\n<p>More info: <a href=\"https://hexo.io/docs/one-command-deployment.html\">Deployment</a></p>\n"}],"PostAsset":[{"_id":"source/_posts/CSS布局之多列布局(1)/column-count.png","slug":"column-count.png","post":"cknps1pci0000ovna9heq043w","modified":0,"renderable":0},{"_id":"source/_posts/CSS布局之多列布局(1)/column-count_and_column-width.png","slug":"column-count_and_column-width.png","post":"cknps1pci0000ovna9heq043w","modified":0,"renderable":0},{"_id":"source/_posts/CSS布局之多列布局(1)/column-width.png","slug":"column-width.png","post":"cknps1pci0000ovna9heq043w","modified":0,"renderable":0}],"PostCategory":[],"PostTag":[],"Tag":[]}}