Hexo框架下用NexT(v7.0+)主题美化博客

   日期:2024-12-26    作者:xinmeituwen315 移动:http://ljhr2012.riyuangf.com/mobile/quote/48582.html

前文:Windows下通过GitHub+Hexo搭建个人博客的步骤
博主的个人博客:https://hunter1023.github.io/ 按照本篇博客美化。

在 Hexo 中有2份主要的配置文件,其名称都是。 其中,一份位于博客根目录下,主要包含 Hexo 本身的配置;另一份位于目录下,用于配置主题相关的选项


打开根目录下的

 

顾名思义,所谓主题就是界面的展示样式。Hexo安装主题,只需要将主题文件拷贝至博客所在目录的目录下,修改相关配置文件即可生效。

博客所在目录下打开,再通过即可完成。


打开根目录下的,查找字段,将字段改为(冒号之后要有空格分隔,否则无效) ,之后通过和,再在浏览器中访问即可本地预览主题效果。


打开下的,查找,可以看到如下四种不同的风格方案

 

去掉注释,即启用对应的scheme,博主采用Muse主题,大家可以依次测试效果,选择自己喜欢的scheme。


博客框架默认的语言是英文,前往,查看当前NexT版本简体中文对照文件的名称是还是。

再前往根目录下的,查找,设置成或,即显示简体中文。


  • 打开下的,查找

     

    去掉注释即可显示对应的菜单项,也可自定义新的菜单项。 之前的值是目标链接,之后的是分类页面的图标,图标名称来自于FontAwesome icon。若没有配置图标,默认会使用问号图标。

  • 新添加的菜单需要翻译对应的中文
    打开,在menu下自定义,如

     

  • 此时在根目录的文件夹下会生成一个categories文件,文件中有一个文件,修改内容如下

     

    :如果有启用评论,默认页面带有评论。需要关闭的话,添加字段comments并将值设置为false。


打开**下的**,查找

 

如果不设置,默认显示当前年份


打开下的,查找

 

的值是图片的链接地址(完整的URI 或者 站内的相对地址皆可)

地址值完整的URIhttp://example.com/avatar.png站点内地址图片放至配置为:站点内地址图片放至根目录下(初始无uploads文件夹,自行创建)目录下配置为

之后创建博文,对图片的引用 同样可以按照上述地址获取


  • 图标素材网站:iconfont;easyicon
  • 下载16x16以及32x32大小的PNG格式图标,置于下
  • 打开**下的**,查找
     修改small和medium的路径为下载的图标路径

4.3.1 Canvas-nest风格

4.3.2 JavaScript 3D library风格

  1. 进入theme/next目录
  2. 执行命令
  3. 将中查找,将想要的效果改为true即可
 

打开,添加以下代码

 

其中的css样式属性都可以根据图片修改,以达到满意的效果。


默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。打开下的,查找

4.5.1 设置侧栏在左侧/右侧

  • Pisces或Gemini方案
     
  • Mist或Muse方案
  1. 打开,查找,把所有(2个)更改为即可。
  2. 打开,添加如下内容
     
  3. 打开,将改为

4.5.2 显示侧边栏的时机

 

4.5.3 侧边栏控制按钮样式修改

打开,找到如下代码处,更换close的内容

 

修改,搜索 ,将 换成

打开,添加以下代码

 

  • 首先在Hexo目录下的scripts目录中创建一个JavaScript脚本文件。
    如果没有这个scripts目录,则新建一个。
  • scripts目录新建的JavaScript脚本文件可以任意取名。

通过这个脚本,我们用其来监听这个动作,并在检测到之后,执行编辑器打开的命令。

  • 如果你是windows平台的Hexo用户,则将下列内容写入你的脚本
 

如果你是Mac平台Hexo用户,则将下列内容写入你的脚本

 

修改,找到如下代码

 

在其前后加上即可,如下

 

  1. 前往Google Fonts查看合适的字体
  2. 打开下的,查找
     
      
    1. 修改
     改为
     

  • 打开站点配置文件,搜索字段,设置其值为
  • 安装hexo-asset-image
  • 此时会在目录下创建同名的文件夹
  • 只需在 md 文件里使用 ,无需路径名就可以插入图片。

  1. 打开下的,查找
     
  2. 打开,在和之间添加如下内容
     
  3. 向中添加如下内容
     
  4. 将摘要图片储存于中,建议在此路径下单独建一个文件夹存放摘要图片这个图片和文章中插图的存放路径不同,不是一个概念。然后在文章YAML头信息中添加images字段,将值填为。
     

打开,添加以下代码

 

打开,添加以下代码

 

修改,注释或删除以下内容

 

  • 打开站点配置文件,搜索字段,设置其值为
  • 进入到文件夹下,打开

  • 打开下的,查找
     

当前版本的NexT集成的不蒜子,总访问人数和人次只是分别用icon来表示,故取消显示,自行改动

  • 打开,在最后添加如下内容
     
 

  • 查找主题配置文件中的
     

盘点一下免费好用的图床




特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号