可以在这里选择自己喜欢的风格主题：hexo官网

搭建hexo+butterfly

参考资料：使用 hexo + 主题 butterfly + Github 搭建个人博客_hexo-theme-butterfly-CSDN博客

hexo命令

hexo g #完整命令为hexo generate,用于生成静态文件
hexo s #完整命令为hexo server,用于启动服务器，主要用来本地预览
hexo d #完整命令为hexo deploy,用于将本地文件发布到github等git仓库上
hexo n “my article” #完整命令为hexo new,用于新建一篇名为“my article”的文章

功能实现

发布一篇博客

1	hexo new post "demo"

数学符号：LaTeX 各种命令，符号_c上面一撇用chinatex怎么打-CSDN博客

基础美化

参考资料：Butterfly美化_butterfly-vue-CSDN博客

留言板

支持博客评论

参考链接：

Waline在Butterfly主题中的应用_butterfly配置waline-CSDN博客

快速上手 | Waline

需要注意的是该步骤跳转的地址即为serverURL，需要记住这个地址

评论管理
- 部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。
- 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
- 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页

添加表情包

可以从该仓库选择自己喜欢的表情包类型：walinejs/emojis: Emojis Repo for Waline

1	D:\myblog\themes\butterfly\layout\includes\third-party\comments\waline.pug

修改上述路径下的文件内容：

emoji: [
	'https://unpkg.com/@waline/emojis@1.2.0/alus',
	'https://unpkg.com/@waline/emojis@1.1.0/qq',
   ],

评论图片

1、在去不图床购买存储容量

2、去不图床购买完成之后进入Token页面，生成Token(保存此Token，因为只显示一次。)

3、修改waline.pug文件

1	D:\myblog\themes\butterfly\layout\includes\third-party\comments\waline.pug

    const waline = Fn({
      el: el.querySelector('#waline-wrap'),
      serverURL: 'https://feifanyulu-waline.vercel.app',//
      emoji: [
        'https://unpkg.com/@waline/emojis@1.2.0/alus',
        'https://unpkg.com/@waline/emojis@1.1.0/qq',
        'https://unpkg.com/@waline/emojis@1.2.0/bmoji',
        'https://unpkg.com/@waline/emojis@1.2.0/tieba',
        'https://unpkg.com/@waline/emojis@1.2.0/weibo',
      ],
      pageview: !{lazyload ? false : pageview},
      dark: 'html[data-theme="dark"]',
      comment: !{lazyload ? false : count},
      
//-----------------------在文件中添加如下部分------------------------------------//
      imageUploader: (file) => {
          if (!file) {  
            throw new Error('No file provided');  
          }  
          let formData = new FormData();
          let headers = new Headers();
          formData.append('file', file);
          
          headers.set('Authorization', 'API TOKEN');  // API TOKEN需要改成第二步复制的token，去不给的token是1234|xxxx，前面的数字和竖杠不需要，加上Bearer 变成Bearer xxxxx才能认证通过
          headers.set('Accept', 'application/json');
          
          return fetch('https://7bu.top/api/v1/upload', {    // 去不图床的API就是此链接，如果你用的其他图床就改成其他的
            method: 'POST',
            headers: headers,
            body: formData,
            mode: 'cors',
          })
            .then((resp) => resp.json())
            .then((resp) => resp.data.links.url);
        },
//----------------------------------------------------------------------------//
      ...option,
      path: isShuoshuo ? path : (option && option.path) || path
    })

为Hexo添加评论系统Waline并配置图床_hexo waline-CSDN博客

遇见的问题

md格式的博文上传后图片无法显示

1、将 _config.yml 文件中的 post_asset_folder 选项设为 true；(该操作的目的就是在使用hexo new xxx指令新建md文档博文时，在相同的/source/posts路径下同步创建一个相同名字的xxx文件夹，而xxx文件夹就是用来存放新建md文档里的图片的)

2、使用typora编辑md格式的博文，需要对typora的设置—>偏好设置中进行修改，如下：(这样我们粘贴图片到md文档的时候，typora会自动把图片再复制一份到我们上面创建的同名文件夹下)