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

前言

日期：2020-04-21

1. 初始内容：从0开始部署完成后需要关注的点，遇到的坑是真坑。
2. 原文链接：http://mangocheng.com/posts/9264c278.html
3. 博客地址：芒果橙的个人博客 【http://mangocheng.com】

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

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 });
  

• 添加README.md文件

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

    skip_render: README.md