自定义页面 尽管现有博客框架提供了很多特别精美的页面，但总会有一些地方想要动手改一改，加入自己的想法。本文参照添加链接收藏，并加入顶部大图美化的方法，记录自定义流程和踩的坑。
页面预览 原理 当我们通过 hexo new page Pagename创建页面时，需要在Blog/source/Pagename/index.md中添加type: “categories”等字样，这其实就是告诉主题我们这个页面是特殊的页面。打开themes/butterfly/layout/page.pug文件，
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 extends includes/layout.pug block content #page if top_img === false h1.page-title= page.title case page.type when 'tags' include includes/page/tags.pug when 'link' include includes/page/flink.pug when 'categories' include includes/page/categories.pug when 'stars' include includes/page/stars.pug default include includes/page/default-page.pug if page.comments !== false && theme.comments && theme.comments.use - var commentsJsLoad = true !=partial('includes/third-party/comments/index', {}, {cache: true})
可以看到，当一个页面被识别为特殊类型，即when 'categories'，就会进入对应的页面。而我们要做的就是构建这个特殊页面，即categories.pug，并添加样式使其达到我们的预期。
开始构建 创建页面 在博客根目录输入hexo new page stars，在source/stars/index.md的头部添加type: "stars"。在themes/butterfly/layout/includes/page文件下新建stars.pug文件：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 #顶部大图部分，这里引用了即刻说说的部分代码 if site.data.essay each i in site.data.essay #essay_page .author-content.author-content-item.essayPage.single(style = i.top_background ? `background: url(背景图片链接) left 28% / cover no-repeat;` : "") .card-content .author-content-item-tips="好的工具，事半功倍" span.author-content-item-title="网址收藏" .content-bottom .tips="跟 ELIX 一起高效的数字生活" #这是链接部分的模块，将site.data.stars中的信息依次罗列 .flink#article-container if site.data.stars each i in site.data.stars if i.class_name h2!= i.class_name if i.class_desc .flink-desc!=i.class_desc .flink-list each item in i.link_list .flink-list-item a(href=url_for(item.link) title=item.name target="_blank") - var urlNoProtocol = item.link.replace(/^https?\:\/\//i, "") - var imgUrl = "https://api.iowen.cn/favicon/" + urlNoProtocol + ".png" img.flink-avatar.entered.loaded(src=url_for(imgUrl) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name) .img-alt.is-center= item.name .flink-item-info span.flink-item-name= item.name span.flink-item-desc(title=item.descr)= item.descr != page.content
这就是”特殊类型的页面“，由上述代码及注释可以看出，stars.pug构成了页面的基本骨架。有骨架也要有血肉，接下来还需引入css元素。
引入CSS 在themes\butterfly\source\css\_page中新建stars.styl(或在自定义styl文件中)加入样式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 body [data-type='stars' ] #page { border : 0 ; box-shadow : none !important ; padding : 0 !important ; background : transparent !important ; } body [data-type='stars' ] .author-content .author-content-item .essayPage { height : 19rem ; color : var (--anzhiyu-white); overflow : hidden; margin-top : -15px ; height : 350px ; margin-bottom : 10px ; } body [data-type='stars' ] .flink #article-container .flink-desc { margin : 0 ; margin-top : -15px ; } .flink #article-container .flink-list > .flink-list-item { background : var (--anzhiyu-white); } #article-container a :not ([data-fancybox="gallery" ] ):not (.headerlink ):not (.cf-friends-link ):not (.tag-Link ):not (.btn-anzhiyu ):not ( .no-text-decoration ) { height : 100px !important ; } .flink-list-item :hover {} .flink #article-container .flink-desc { margin : 0.2rem 0px 0.5rem ; } .flink #article-container .flink-list { overflow : auto; padding : 10px 10px 0px ; text-align : center; } .flink #article-container .flink-list > .flink-list-item { position : relative; float : left; overflow : hidden; margin : 15px 7px ; width : calc (25% - 12px ); height : 90px ; border-radius : 5px ; line-height : 17px ; transform : translateZ (0px ); transition : all 0.3s ease 0s ; } @media screen and (max-width : 1200px ) { .flink #article-container .flink-list > .flink-list-item { width : calc (25% - 12px ) !important ; } } @media screen and (max-width : 1024px ) { .flink #article-container .flink-list > .flink-list-item { width : calc (33.3333% - 12px ) !important ; } } @media screen and (max-width : 768px ) { .flink #article-container .flink-list > .flink-list-item { width : calc (50% - 12px ) !important ; } } @media screen and (max-width : 600px ) { .flink #article-container .flink-list > .flink-list-item { width : calc (100% - 12px ) !important ; } } .flink #article-container .flink-list > .flink-list-item :hover { background : rgb (0 , 108 , 242 ); transform : scale (1.05 ); } .flink #article-container .flink-list > .flink-list-item a { color : var (--Jay-fontcolor); text-decoration : none; } .flink #article-container .flink-list > .flink-list-item a img { float : left; margin : 15px 10px ; width : 60px ; height : 60px ; border-radius : 35px ; transition : all 0.3s ease 0s ; } .flink #article-container .flink-list > .flink-list-item a .img-alt { display : none; } .flink #article-container .flink-list > .flink-list-item a .flink-item-name { display : block; padding : 16px 10px 0px 0px ; height : 40px ; font-weight : 700 ; font-size : 1.43em ; white-space :nowrap; overflow :hidden; text-overflow :ellipsis; } .flink #article-container .flink-list > .flink-list-item a .flink-item-desc { display : block; padding : 16px 10px 16px 0px ; height : 50px ; font-size : 0.93em ; } .flink #article-container .flink-list { padding : 0 ; margin : 1rem -6px 0 -6px ; overflow-x : hidden; } .flink #article-container .flink-desc { margin : 0 ; } .flink #article-container .flink-list > .flink-list-item a .flink-item-desc { white-space : normal; padding : 5px 10px 16px 0 ; color : var (--Jay-fontcolor); text-align : left; height : 40px ; text-overflow : ellipsis; opacity : 0.7 ; display : -webkit-box; overflow : hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2 ; } .flink #article-container .flink-list > .flink-list-item :hover a .flink-item-desc { color : var (--Jay-white); } .flink-list-item .flink-item-info { max-width : 136px ; overflow : hidden; } .flink-list-item :hover .flink-item-info { max-width : 100% ; } .flink #article-container .flink-list > .flink-list-item a .flink-item-name { text-align : left; font-size : 19px ; color : var (--Jay-fontcolor); } .flink #article-container .flink-list > .flink-list-item :hover a .flink-item-name { color : var (--Jay-white); } .flink #article-container .flink-list > .flink-list-item a { display : flex; border : none; } .flink #article-container .flink-list > .flink-list-item a :hover { background : none; } .flink #article-container .flink-list > .flink-list-item a img { border-radius : 32px ; margin : 15px 20px 15px 15px ; transition : 0.3s ; background : var (--Jay-background); min-width : 60px ; min-height : 60px ; } .flink #article-container .flink-list > .flink-list-item :hover a img { transition : 0.6s ; width : 0 ; height : 0 ; opacity : 0 ; margin : 0.5rem ; min-width : 0px ; min-height : 0px ; } .flink #article-container .flink-list > .flink-list-item a span { transition : 0.3s ; } .flink #article-container .flink-list > .flink-list-item :hover a .flink-item-desc { overflow : inherit; width : 100% ; } .flink #article-container .flink-list > .flink-list-item { margin : 6px 6px ; transition : 0.3s ; border-radius : 12px ; transition-timing-function : ease-in-out; position : relative; width : calc (20% - 12px ); border : var (--style-border); box-shadow : var (--Jay-shadow-border); } .flink #article-container .flink-list > .flink-list-item :hover { transform : scale (1 ); background : var (--Jay-theme); border : var (--style-border-hover); box-shadow : var (--Jay-shadow-main); } @media screen and (min-width : 1300px ) { .flink #article-container .flink-list > .flink-list-item :hover { transform : scale (1.03 ); } .flink #article-container .flink-list > .flink-list-item :active { transform : scale (0.97 ); } }
其中body[data-type='stars']后的样式即为在stars页面才会生效的样式，不会覆盖其他页面。可自由发挥进行美化调整。
引入页面 正如前面所说，需要引入才会被主题识别，修改themes/butterfly/layout/page.pug文件，注意对齐
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 extends includes/layout.pug block content #page if top_img === false h1.page-title= page.title case page.type + when 'stars' + include includes/page/stars.pug when 'tags' include includes/page/tags.pug when 'link' include includes/page/flink.pug when 'categories' include includes/page/categories.pug default include includes/page/default-page.pug if page.comments !== false && theme.comments && theme.comments.use - var commentsJsLoad = true !=partial('includes/third-party/comments/index', {}, {cache: true})
添加内容 最后添加页面的内容，即要展示的网页。新建source/_data/stars.yml文件（若无_data文件夹需自行创建）。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 - class_name: 设计素材 class_desc: 为你的设计添加色彩 list_style: butterfly link_list: - name: 搜图神器 link: https://www.soutushenqi.com/home descr: 放大用户搜图在日常工作图的效率，成为图神必备 - name: Tingpng link: https://tinypng.com/ descr: 在线图片压缩 - name: 彼岸图网 link: https://pic.netbian.com/ descr: 4K壁纸_4K电脑壁纸_4K高清壁纸下载_4K,5K,6K,7K,8K壁纸图片素材 - name: ToolTT link: https://tooltt.com/ descr: 在线多语言格式转换 - name: 在线工具 link: https://tool.lu/ descr: 各种实用工具在线使用 - name: 表情速查 link: https://emotion.xiaokang.me/ descr: 查询emoji表情 - class_name: 博客资源网 class_desc: 帮助构建博客的资源网站 list_style: butterfly link_list: - name: PicX link: https://picx.xpoet.cn descr: 提供图片上传托管、生成图片链接和图片工具箱服务 - name: 死链检测 link: https://www.deadlinkchecker.com/website-dead-link-checker.asp descr: 检测废弃链接
至此，页面创建完成。自定义的部分主要集中在stars.pug和stars.styl中，分别对应页面布局及数据交互 和 页面样式，需要一些前端基础。
完事收工。
参考教程 ：
