0%

如何打造免费的个人网站and实现切换夜间模式的同时切换头像

最近整了个个人网站,非常快乐,所以来分享一下心得。整理一下我看过的教程。

建议按顺序看

使用 Hexo+GitHub 搭建个人免费博客教程(小白向)

GitHub+Hexo+Next搭建博客(建议用next主题,我用的是7.8.0版本

以下是加的特效,建议先学一学HTML、CSS、js以及能看懂cmd错误分析,如果不行,那么务必严格按照步骤做,否则会出错

Hexo+NexT 打造一个炫酷博客

NexT 7.8.0 主题美化(持续更新)

Hexo 博客主流搜索引擎收录详细指南


以下是个人我在夜间模式上加的功能,点击夜间模式会自动切换头像。

Hexo+Next7.8 功能性配置

1、先根据这个教程安装并配置插件:Hexo Next 8.x 主题添加可切换的暗黑模式

2、再打开存放博客的文件夹下..\node_modules\hexo-next-darkmode\lib\darkmode.css,再最后添加以下代码:

.darkmode--activated .site-author-image { content:url(../uploads/image.gif); }

url后的括号是图片路径,uploads文件夹放在博客工程所在目录下,image.gif是图片名,也可以更换。

3、在项目目录的source文件夹下新建“_data”文件夹,在文件夹中新建“styles.styl”文件,将以下内容复制进去。

.site-author-image { content:url(../uploads/image.gif); }

4、打开..\themes\next\_config.yml,查找到“custom_file_path:”,在其下一行粘贴 style: source/_data/styles.styl,开头空两格。

5、在bash里输入“hexo clean && hexo g && hexo d”