这篇博文将带你发现新世界,教你如何打造一个炫酷的个人博客站点。阅读本文前推荐阅读我的另一篇基础博文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文件,在
