hexo基础命令、组件及遇到的坑

前言

日期：2020-04-21

1. 初始内容：从0开始部署完成后需要关注的点，遇到的坑是真坑。

1.部署

hexo clean      # 清除
hexo generate   # 生成
hexo deploy		# 部署到远程，同步到远程仓库

2.本地调试

hexo g  #生成
hexo s  #启动本地服务，进行文章预览调试
hexo s --draft #调试，包括草稿
# 三连
hexo clean && hexo g && hexo s

3.其他

hexo new "文章名字"				# 创建新文章
hexo new draft "文章名字"		# 创建草稿
hexo new page "菜单目录名"		# 创建新菜单
hexo publish "文章名字"			# 发布草稿

• 目录结构

  #blog部署目录
  blog-
      |
      ├── .deploy_git      #部署文件夹
      ├── node_modules     #包依赖文件夹
      ├── public           #html源码，hexo g生成
      ├── scaffolds        #模板
      ├── scripts          #扩展脚本
      ├── source           #文章源码
      |   ├── _drafts      #草稿
      |   └── _posts       #文章
      ├── themes           #主题
      |   ├── next         #NexT主题
      ├── _config.yml      #博客配置
      └── package.json     #应用程序数据
  
  # 主题目录
  next-
      |
      ├── .github                #github信息
      ├── languages              #多语言
      |   ├── _en.yml            #默认语言
      |   └── zh-CN.yml          #简体中文
      |   └── zh-TW.yml          #繁体中文
      ├── layout                 #布局，根目录下的*.swig文件是对主页，分页，存档等的控制
      |   ├── _custom            #可以自定义的模板，覆盖原有模板
      |   |   ├── head.swig      #文首样式
      |   |   ├── header.swig    #头部样式
      |   |   ├── sidebar.swig   #侧边栏样式
      |   ├── _macro             #可以自定义的模板，覆盖原有模板
      |   |   ├── post.swig      #文章模板
      |   |   ├── reward.swig    #打赏模板
      |   |   ├── sidebar.swig   #侧边栏模板
      |   ├── _partial           #局部的布局
      |   |   ├── head           #头部模板
      |   |   ├── search         #搜索模板
      |   |   ├── share          #分享模板
      |   ├── _script            #局部的布局
      |   ├── _third-party       #第三方模板
      |   ├── _layout.swig       #主页面模板
      |   ├── index.swig         #主页面模板
      |   ├── page               #页面模板
      |   └── tag.swig           #tag模板
      ├── scripts                #script源码
      |   ├── tags               #tags的script源码
      |   ├── marge.js           #页面模板
      ├── source                 #源码
      |   ├── css                #css源码
      |   |   ├── _common        #*.styl基础css
      |   |   ├── _custom        #*.styl自定义局部css
      |   |   └── _mixins        #mixins的css
      |   ├── fonts              #字体
      |   ├── images             #图片
      |   ├── js                 #javascript源代码
      |   └── lib                #引用库
      ├── _config.yml            #主题配置文件
      └── README.md              #说明文件

  来源博客：https://blog.bill.moe/hexo-theme-next-config-optimization/。

  注：不同版本有些文件会有不同

4.部分组件

• 评论：Valine

• 阅读次数：LeanCloud

• 字数统计：post_wordcount

• 圆形头像：avatar ，修改主题的该标签css样式

• 文末版权：点击传送

• 优化大全：点击传送

• 站内文章引用：点击传送

  • 命令

    {% post_link 文章标题 链接名称 %}

• 菜单与图标配置

  • tags:/tags/|| tags

• 永久外链：abbrlink

• 分页显示标签：修改主题下分页文件（如 themes/next/layout/_partials/pagination.swig）

  // paginator 增加属性
  escape: false

• 社交链接：主题配置文件的social

5.遇到的坑

• 菜单点击后，跳转URL错误

  • 错误：菜单URL跳转路径为xxx/%20

  • 方法：/和||中间一定不能有空格

    menu:
      home: /|| home
      about: /about/|| user
      tags: /tags/|| tags 
      categories: /categories/|| th 
      archives: /archives/|| archive

• hexo next主题，使用Valine评论区和阅读次数显示错误

  • 错误：页面提示：Code 98: Valine 初始化失败，请检查 av-min.js 版本。

  • 方法

    • 主题自带的leancloud_visitors(主题配置文件)和Valine的visitor(主题的valine.swig)都要开启;
    • valine中引入的av-min.js需要去掉

      //valine.swig 更新
      // 1.注释或去掉
      <!-- <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script> -->
      // 2.添加
      new Valine({   visitor: true });

    Valine作者说是版本的问题，已更新解决，现在可能是不会出现了

• 添加README.md文件

  • 方法：在站点source文件夹下添加文件，之后需要在站点配置文件中将该文件添加进忽略里

    skip_render: README.md