当前位置: 首页 > Web前端 > HTML5

关于用Hexo6.0搭建个人博客(进阶)

时间:2023-04-05 22:23:38 HTML5

这篇博文将带你发现新世界,教你如何打造一个炫酷的个人博客站点。阅读本文前推荐阅读我的另一篇基础博文Hexo搭建个人博客(基础篇)目录配置博客基本信息配置主题优化主题上传头像及设置头像旋转效果设置个人社交图标链接设置RSS设置炫酷动态背景设置主题语言设置网站logo设置左上角或右上角在github上forkme效果设置顶部滚动加载条自定义博客底部显示效果首页文章添加阴影边框效果首页添加自定义菜单栏标签配置博客基本信息在站点根目录_config.yml中进行基本配置建议下载一个文本编辑器打开,这里推荐SublimeText,相应的显示效果(不同主题显示效果不同,描述一下)当然,你的主题肯定和我的不一样,所以让我们开始教你如何选择你喜欢的主题和自定义个人喜好。配置主题以选择主题。您可以单击此处选择您喜欢的主题。里面有很多美丽的题材。你可以慢慢选择。选择它们后,直接克隆它们即可。我以其简单着称TheNexttheme被用作示例。我也在用这个主题。当然喜欢酷一点的朋友可以自行选择,只是优化会略有不同。这里下载主题有两种方式:1.直接通过get命令安装2.直接把整个仓库clone到本地,然后移动到你的站点目录Themes这里主要教大家如何使用命令行$cdhexo$gitclonehttps://github.com/theme-next...themes/接下来进入hexo根目录。GitBashclone成功后,在你的Themes文件夹下就会多出一个主题文件。首先,引入下一个文件夹中的_config.yml文件。以后我们修改主题的时候,修改这个文件,下载。第一步,让我们应用我们刚刚克隆的主题,看看效果。打开blog(你的博客站点和目录)下的_config.yml文件进行设置:将theme:landscape改为theme:next然后hexog和hexos,来看看效果:OK,没错,长这个样子(真的很难看,需要自己优化成自己想要的样子)当然你也可以直接clone我配置的Themedarrryrzhong-next。对了,最好是star.优化主题。现在我们的基础博客已经搭建完成。让我们教你如何美化主题。上车吧,让你优化主题。─.deploy├──public├──scaffolds├──scripts├──source|├──_草稿|└──_posts├──themes├──_config.yml└──package.json最新的next已经把我们需要的大部分功能都集成好了,所以只需要修改几个文件deploy:Executehexodeploy命令部署到github上的content目录public:执行hexogenerate命令,输出静态网页内容目录source:site资源目录,你写的文章,你需要的资料等都放在这目录,包括以后需要创建的菜单表面目录。drafts:文章草稿posts:发布成功的文章目录(你发布的文章可以在这里看到)themes:主题文件目录_config.yml:全局配置文件,这里常用的大部分设置,需要了解的就是这些目录,并且高亮的地方是整个下篇Part1的核心。上传头像并设置头像旋转效果设置头像:打开themes/next/_config.yml找到头像:/images/avatar.gif;其中images文件在themes/next\source\,把你的头像图片放在images里,一般默认命名为avatar,记得改后缀。设置旋转效果:打开themes\next\source\css\_common\components\sidebar\sidebar-author.styl,添加如下注释代码。site-author-image{display:block;保证金:0自动;填充:$site-author-image-padding;最大宽度:$site-author-image-width;高度:$站点作者图像高度;:$site-author-image-border-widthsolid$sit电子作者图像边框颜色;/*头像圆圈*/border-radius:80px;-webkit-边框半径:80px;-moz-边框半径:80px;框阴影:插图0-1px0#333sf;/*鼠标经过头像旋转的时间*/-webkit-transition:-webkit-transform1.0sease-out;-moz-transition:-moz-transform1.0s缓出;transition:transform1.0sease-out;}img:hover{/*鼠标悬停停止头像旋转-webkit-animation-play-state:paused;animation-play-state:paused;*//*鼠标悬停头像旋转*/-webkit-transform:rotateZ(deg);-moz-transform:旋转Z(360deg);变换:旋转Z(360deg);}这一步之后,头像就设置好了。2.设置个人社交图标链接打开themes/next/_config.yml,找到social;其中name是你的icon的名字,你可以去FontAwesome选择Youlikeit,然后复制名字。比如icon-user-md只需要user-md,next中已经集成了。如果next找不到该图标,该图标将被一个问号代替。3.设置RSS为你站点的根目录(比如我的博客/);执行GitBash命令:$npminstall--savehexo-generator-feed安装插件,插件会放在node_modules文件夹下。安装插件后,打开全局配置文件_config.yml,在末尾添加如下代码:#Extensions##Plugins:http://hexo.io/plugins/plugins:hexo-generate-feed然后打开主题配置文件_config.yml,找到rss;添加配置:rss:/atom.xml;就到这里,再运行hexog,hexos,就可以看到效果了。4.设置炫酷的动态背景next新版本已经支持canvas-nest了,直接添加代码就可以打开next/layout/_layout.swig文件,在;{%endif%}打开主题配置文件_config。yml,修改如下代码;#canvas-nest#dependencies:https://github.com/theme-next/theme-next-canvas-nestcanvas_nest:true重新运行一下,5.设置主题语言默认显示的名称你的博客首页是英文的,我们要有中文名字的话,你需要设置语言显示;我们可以在nextlanguage文件下的zh-CN(中文)语言包下添加对应的字段,也可以修改Otherfields;title:archive:archivecategory:categorytag:labelschedule:schedulemenu:home:homepagearchives:archivecategories:categorytags:labelabout:aboutsearch:searchschedule:schedulesitemap:站点地图commonweal:公益404sidebar:overview:站点概览改成我们想要的显示效果后。在全局配置文件_config.yml中重新配置,语言:zh-CN,重新运行服务器。记住,只要是全局效果,都需要清理一遍,检查一下,再运行一下,不然是看不到效果的。6、设置网站logo效果如下:这个小图标就是你的logo。打开主题配置文件_config.yml,找到字段favicon:;favicon:small:/images/favicon-16x16-next.pngmedium:/images/favicon-32x32-next.pngapple_touch_icon:/images/apple-touch-icon-next.pngsafari_pinned_tab:/images/logo.svg可以看到有四种效果,一般我们只需要将medium换成自己的图标路径即可。图标大小也有要求,看例子就知道了,就不多解释了。7.在左上角或右上角设置forkmeongithub效果展示如下:实现方法如下:当然有很多颜色和效果,你可以在这里选择你需要的效果;然后复制你选择的效果右边的代码;打开next\layout\_layout.swig,将刚刚复制的代码粘贴到

下;再次运行看看效果;8、设置顶部滚动加载条效果如下:打开next\layout\_partials\head文件,添加如下代码:上面的loadingbar可以正常显示。默认颜色为粉红色。我觉得粉色的也挺好看的,所以没换。当然你也可以自定义你想要的颜色,如下:在刚刚添加的代码后添加如下代码:自定义加载栏已更改;9、自定义博客底部展示效果具体实现如下:1.在网页底部隐藏poweredByHexo/强力打开themes/next/layout/_partials/footer.swig直接隐藏下面的代码。建议不要删除代码如下:2.修改页面底部桃心或者找到字段with-love;然后在图标库中找到你想要的图标,修改如下:<iclass="fafa-heart">其中heart是图标的名字,只要在icon-之后即可;3、实现网站底部访问量显示打开主题配置文件_config.yml,修改如下代码busuanzi_count:enable:truetotal_visitors:truetotal_visitors_icon:usertotal_views:truetotal_views_icon:eyepost_views:truepost_views_icon:eye10.首页文章添加阴影边框效果打开下\source\css\_custom\custom.styl文件,添加如下代码://首页文章添加阴影效果.post{margin-top:60px;底部边距:60px;填充:25px;-webkit-box-shadow:005pxrgba(202,203,203,.5);-moz-box-shadow:005pxrgba(202,203,204,.5);}重新运行服务器,效果如下:11.为首页添加自定义菜单栏标签,效果如下:实现如下:进入站点根目录下,使用GitBash来创建一个新页面;$hexonewpage"music"$hexonewpage"photo"$hexonewpage"welfare"这里我新建三个菜单标签,分别是音乐、摄影、福利。可以看到,新建的页面在源文件的文件夹下;打开主题配置文件_config.yml找到字段菜单,添加对应的菜单;添加menu标签项后,效果如下:可以看到label名称还是英文,而pohto项是空白的,前面说了,空白就是找不到icon,所以就改一下,我们改进一下,把标签名改成中文;打开下\language文件下的zh-CN(中文)语言包,添加菜单标签项;menu:home:首页photo:Photographymusic:Musicwelfare:Welfarearchives:Archivecategories:points类名要和我们主题里的名字一致,我们的菜单栏就到这里完成了。到这里,博客的基本搭建就全部完成了。本文只需要介绍一些博客美化的小技巧,让我们的博客看起来更漂亮,关于博客文章的美化,评论区的优化,使用markdown写第一篇博文等会在下一篇进阶文章中讲授。欢迎关注作者darrryrzhong,更多干货等你来。请给我一颗小红心!因为您的鼓励是我写作最大的动力!更多精彩文章请关注个人博客:darrryrzhong掘金简书SegmentFault