搭建 HEXO 博客(三):个性化定制 13、推荐内容 安装插件:
1 npm install hexo-related-popular-posts --save
我们只需要在主题配置文件_config.yml
中修改:
1 2 3 4 5 6 7 8 9 10 related_posts: enable: true title: 推荐文章 # Custom header, leave empty to use the default one display_in_home: false params: maxCount: 5 PPMixingRate: 0.25 isDate: false isImage: false isExcerpt: false
安装配置
安装插件:
1 npm install hexo-generator-feed --save
在站点配置文件 _config.yml
中添加以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 feed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 content_limit_delim: ' ' order_by: -date icon: icon.png autodiscovery: true template:
然后到 hexo 主题配置下面修改
1 2 3 4 5 follow_me: Twitter: https://twitter.com/username || fab fa-twitter Telegram: https://t.me/channel_name || fab fa-telegram RSS: /atom.xml || fa fa-rss
打开 rss 即可。RSS 图标出现在文章的末尾。
15、置顶操作 安装插件:
1 2 npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save
在需要置顶的文章的 Front-matter
中加上 top: true
或者 top: 任意数字
,比如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 --- title: TMDb电影数据分析 declare: true toc: true tags: - Python - 数据分析 categories: - 数据分析 - 实战 abbrlink: 7e380af2 date: 2018-11-23 13:20:03 top: 100 ---
注意:top 中数字越大,文章越靠前 。
打开 /themes/next/layout/_macro/
目录下的 post.swig
文件,在 <div class="post-meta">
的第一个 <span>
标签下,插入如下代码:
1 2 3 4 5 {% if post.top %} <i class="fa fa-thumb-tack"></i > <font color =FF0000>置顶</font > <span class="post-meta-divider">|</span > {% endif %}
16、Hexo 页面静态资源压缩插件 我们自己添加的 css 和 js 文件为了可读性,往往会有很多换行和空格,这些对于浏览器来说是没有用的,甚至还会降低渲染页面的速度。同时,由于 Markdown 转成 html 的 bug,会导致页面存在大量的空白,我们可以通过查看页面源代码发现这些大量的空白符,这也会造成页面渲染的性能问题。
因此,我们需要对页面的静态资源进行压缩,包括 css、js 和 html 等文件。
我们可以使用 hexo-neat
插件进行压缩。hexo-neat
配置简单,无需额外命令,我们只需使用原本的调试、部署命令就可以自动完成静态资源的压缩。
地址
安装 hexo-neat 插件
1 npm install hexo-neat --save
然后我们需要在站点 配置文件_config.yml
中添加以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 neat_enable: true neat_html: enable: true exclude: neat_css: enable: true exclude: - '**/*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/jquery.fancybox.pack.js' - '**/index.js' - '**/fireworks.js'
17、修改头部背景 找到如下位置:
1 hexo\themes\next\source \css\_schemes\Mist\_header.styl
打开 _header.styl,将第一行 background: 后的内容改为如下形式:
1 .header { background : url ('../image/background.jpg' ); }
保存,重新生成网页即可。
以图床上的图片作为背景 url()
内的链接可以是绝对地址的形式。因为我的静态博客在 github 上面,打开比较慢,所以将背景图片放到图床上以提高打开速度。设置形式如下:
1 .header { background : url ('http://xx.xx.xx.com/hexo/image/header-backgroud.jpg' ); }
居中自动裁剪效果:
1 2 3 4 5 6 background : url ('https://images.unsplash.com/photo-1633120059477-a05c57ed01d0?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60' );background-size : 100% auto; // 可以使用coverbackground-position : center; //背景图片居中显示,让多余部分相对容器对此展示background-repeat : no-repeat;background-origin : border-box; //从border 开始填充background-clip : border-box; //border 外的多余背景图片不展示,截取掉,
18、添加动态背景 1.打开 next/layout/_layout.swig
在 body 标签里面添加代码
1 2 3 {% if theme.canvas_nest %} <script type="text/javascript" src ="//cdn.bootcss .com /canvas -nest.js /1.0 .0 /canvas -nest.min .js "></script> {% endif %}
复制
2.打开 /next/_config.yml
,在里面修改如下代码:
1 2 3 4 # background settings # add canvas -nest effect # see detail from https://github.com/hustcc/canvas-nest.js canvas_nest: true
添加动态背景的另一种方式,使用 Next 自带背景,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 three: enable: true three_waves: false canvas_lines: false canvas_sphere: false canvas_ribbon: enable: true size: 300 alpha: 0.3 zIndex: -1
参考上述注释,到指定的 github 地址进行 clone,将克隆的代码添加到 lib 里面,然后这里更改配置即可。
19、添加文章结束提示语 在路径 \themes\next\layout_macro
中新建 passage-end-tag.swig
文件,并添加以下内容:
1 2 3 4 5 6 7 <div> {% if not is_index % } <div style="text-align:center;color: -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读------------- </div> {% endif % } </div>
接着打开 \themes\next\layout_macro\post.swig
文件,在 post-body 之后,post-footer 之前添加如下代码:
1 2 3 4 5 <div> {% if not is_index % } {% include 'passage-end-tag.swig' % } {% endif % } </div>
复制
然后打开主题配置文件_config.yml,在末尾添加:
1 2 3 passage_end_tag: enabled: true
完成以上设置之后,在每篇文章之后都会添加如上效果图的样子。
20、新建 404 界面 在站点根目录下,输入 hexo new page 404
,默认在 Hexo
站点下/source/404/index.md
打开新建的404界面,在顶部插入一行,写上 permalink: /404
,这表示指定该页固定链接为 http://"主页"/404.html
。
1 2 3 4 5 6 --- title: date: 2017-09-06 15:37:18 comments: false permalink: /404 ---
如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE HTML > <html > <head > <meta http-equiv ="content-type" content ="text/html;charset=utf-8;" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge,chrome=1" /> <meta name ="robots" content ="all" /> <meta name ="robots" content ="index,follow" /> <link rel ="stylesheet" type ="text/css" href ="https://qzone.qq.com/gy/404/style/404style.css" > </head > <body > <script type ="text/plain" src ="http://www.qq.com/404/search_children.js" charset ="utf-8" homePageUrl ="/" homePageName ="回到我的主页" > </script > <script src ="https://qzone.qq.com/gy/404/data.js" charset ="utf-8" > </script > <script src ="https://qzone.qq.com/gy/404/page.js" charset ="utf-8" > </script > </body > </html >
21、自定义 Slidebar 打开注释,
1 2 3 4 5 6 7 8 9 10 11 custom_file_path: style: source/_data/styles.styl
按照注释说明那样,在站点的 source 目录下创建 _data 目录和 styles.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 //全文字体 body { font-family : 'Noto Serif SC' ,"PingFang SC" ,"Microsoft YaHei" ,sans-serif; } code , pre { font-family : 'Roboto Mono' ,consolas,Menlo,monospace,"PingFang SC" ,"Microsoft YaHei" ; } // 菜单栏样式 .header { background : #ffffff ; } //去除菜单项左边icon .menu-item .fa { display : none; } //更改菜单项字体大小 .menu-item a , .menu-item span .exturl { font-size : 1.025em ; } .menu-item-active a , .menu .menu-item a :hover , .menu .menu-item span .exturl :hover { background : #ffffff ; color : #000 ; font-size : 1.125em ; } //去掉网站名上下的横线 .logo-line-before i , .logo-line-after i { display : none; } //更改网站名字体大小 .site-title { font-size : 2em ; } // 菜单栏样式结束 //侧边栏样式 .sidebar { background : #bbbbbb 1a; bottom : 0 ; position : fixed; box-shadow : inset 0 0px 0px #000 0; top : 0 ; z-index : 200 ; } //目录与站点概览链接样式 .sidebar-nav li { color : #555 ; font-size : 1em ; } .sidebar-nav li :hover { color : #222 ; } .sidebar-nav li .sidebar-nav-overview { margin-left : 10px ; } .sidebar-nav .sidebar-nav-active { border-bottom-color : #222 ; color : #222 ; } .sidebar-nav .sidebar-nav-active :hover { border-bottom-color : #222 ; color : #222 ; } //目录样式 .post-toc ol a { border-bottom-color : #555 0; } .post-toc .nav .active-current > a { color : #222 ; } .post-toc .nav .active > a { border-bottom-color : #222 ; color : #222 ; } .post-toc .nav .active-current > a :hover { color : #222 ; } //头像样式 .site-author-image { border : 0px solid #333 ; } //name字体颜色 .site-author-name { color : #222 ; } //description颜色 .site-description { color : #222 ; } //sidebar-item颜色 .sidebar a , .sidebar span .exturl { border-bottom-color : #222 0; color : #222 ; } .sidebar a :hover , .sidebar span .exturl :hover { border-bottom-color : #222 0; color : #222222 82; } //RSS样式 .feed-link a , .chat a { border : 0px solid #fc6423 ; } .feed-link a :hover , .chat a :hover { background : #bbbbbb 1a; border : 0px solid #fc6423 ; color : #222 ; } .fa-feed :before, .fa-rss:before { color: #222 ; } //社交链接样式 .links-of-author a ::before , .links-of-author span .exturl ::before { display : none; } //展开按钮 .toggle .toggle-line { background : #222 ; height : 3px ; } .sidebar-toggle { background : #bbb 0; height : 20px ; width : 25px ; } //返回顶部按钮 .back-to-top { background : #222 0; color : #222 ; } //侧边栏样式结束 //文章块添加阴影 .post-block { margin-top : 60px ; margin-bottom : 60px ; border-radius : 20px ; //文章背景设置圆角 padding : 30px 60px 30px 60px ; background :rgba (255 ,255 ,255 ,0.5 ) none repeat scroll !important ; //添加透明效果 // -webkit-box-shadow : 0 0 15px rgba (202 , 203 , 203 , .8 ); //文章块阴影 // -moz-box-shadow : 0 0 15px rgba (202 , 203 , 204 , .8 ); } //调节文章宽度 // .main-inner { // width : 800px ; // } //调整子标题文本大小 .site-subtitle { font-size : 1em ; } //加入背景图片 //body { // background : url (/images/background.jpg ) // background-repeat: no-repeat; // background-attachment :fixed; // background-position :50% 50% ; //} //调整文章块底部空白大小 .post-eof { margin : 20px auto 20px ; } //调整按钮透明度 .btn { background : rgba (255 ,255 ,255 ,0 ); }
委婉待续