使用Hexo踩坑小记

Posted on Edited on In

之前就装好了Hexo，但仍有好多未完成的部分，所有的细节堆起来就是一个大工程啦，记录一下坑坑们，那都是我逝去的青春π__π

1、语言

Hexo语言设置在hexo项目根文件夹下的_config.yml中配置，找到language，不是chinese，不是zh-CN，我之前设置为zh-CN，会导致语言变为德文，文章标题下面的时间戳前面会变成“Veröffentlicht am”，要设为
language: zh-Hans
如果设置之后还不起作用，请到theme/next/languages/目录下查看是否有zh-Hans.yml（zh-EN.yml)文件，如果没有，请直接到next的Github下载相应文件添加即可。

2、文章折叠

按照一般的Hexo教程进行安装，安装好后，首页文章没有折叠起来，全部是默认打开的，而我们希望每篇文章只显示部分内容，用户点击more的时候，再展开到详情页面。要做到这样，只需在.md文章里，在需要截取那段展示出来文字的地方添加 <!-- More -->，这样后面的文字都默认不显示，并出现一个More按钮
更详细的说明，可以看这个链接

3、图片以及头像

github page页的容量限制是300M，如果图片比较少，可以放在本地路径，我现在就是。
使用方法：
（注意下面1和2不可混用，用1就要卸载2的插件，用2就不要用1的语法，别问我怎么知道的）

1. Hexo官方插入图片方法

  1. config.yml 文件中的 post_asset_folder 选项设为 true
  2. Hexo将会在你通过 hexo new [layout] 命令创建新文章时自动创建一个文件夹，这个资源文件夹将会有与这个 markdown 文件一样的名字，然后你就可以使用相对路径来引用图片了</li> <li>当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 <code>![](/example.jpg)</code> ，它将不会出现在首页上。（但是它会在文章中按你期待的方式工作）<br>正确的引用图片方式是使用下列的标签插件而不是 markdown ：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% asset_img example.jpg This is an example image %}</span><br></pre></td></tr></table></figure></li> </ol> <h3 id="2-使用hexo-asset-image插件插入图片"><a href="#2-使用hexo-asset-image插件插入图片" class="headerlink" title="2. 使用hexo-asset-image插件插入图片"></a>2. 使用hexo-asset-image插件插入图片</h3><ol> <li>首先确认 _config.yml 中有 post_asset_folder:true 。</li> <li>在 hexo 目录，执行<br><code>npm install https://github.com/CodeFalling/hexo-asset-image --save</code><br>假设在<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">MacGesture2-Publish</span><br><span class="line">├── apppicker.jpg</span><br><span class="line">├── logo.jpg</span><br><span class="line">└── rules.jpg</span><br><span class="line">MacGesture2-Publish.md</span><br></pre></td></tr></table></figure> 这样的目录结构（目录名和文章名一致），只要使用 <code>![logo](MacGesture2-Publish/logo.jpg) </code>就可以插入图片。</li> </ol> <h3 id="3-使用千牛做图床"><a href="#3-使用千牛做图床" class="headerlink" title="3. 使用千牛做图床"></a>3. 使用千牛做图床</h3><p>可以参考这个链接<a target="_blank" rel="noopener" href="http://cnfeat.com/blog/2015/11/30/cli-qiniu/#section-7">如何使用七牛云做为图床？</a><br>我采用他说的第一种方法，也就是七牛云的上传插件<a target="_blank" rel="noopener" href="https://chrome.google.com/webstore/detail/qiniu-upload-files/emmfkgdgapbjphdolealbojmcmnphdcc">qiniu upload files</a>，遇到了一个小障碍，就是在填写配置表格的时候，这个域名:<br><img src="http://o798x2hdw.bkt.clouddn.com/hexo_qiniu.png" alt="hexo/qiniu"><br>不是你博客的域名，而是七牛生成的外链的域名，在七牛云—–>marys存储空间(marys是我的存储空间名字)—->内容管理，里面可以看到你通过插件上传的图片，那个外链默认域名才是你需要填进去的域名，通过操作->复制外链可以直接复制：<br><img src="http://o798x2hdw.bkt.clouddn.com/setdomain.png" alt="hexo/qiniu"><br>keyword:七牛云 图床 图片404 上传插件</p> <h3 id="4-修改头像"><a href="#4-修改头像" class="headerlink" title="4. 修改头像"></a>4. 修改头像</h3><p>进去themes/next/_config.yml，搜索avatar，去掉#注释，avatar: 后接你的头像图片URL。头像图片放next主题下的images文件夹，url就写成/images/avatar.jpg</p> <h2 id="4、markdown标题不解析"><a href="#4、markdown标题不解析" class="headerlink" title="4、markdown标题不解析"></a>4、markdown标题不解析</h2><p>解析出来后，标题的#号仍然显示，并且标题没有加粗等这些格式：<br>markdown标题标准写法需要在”#”和后面字符之间加一个空格，如果不加空格，有些引擎就解析不了</p> <h2 id="5、百度统计"><a href="#5、百度统计" class="headerlink" title="5、百度统计"></a>5、百度统计</h2><p>直接甩链接系列：<a target="_blank" rel="noopener" href="http://theme-next.iissnan.com/getting-started.html#analysis-system-baidu">NexT主题文档之百度统计</a></p> <h2 id="6、评论"><a href="#6、评论" class="headerlink" title="6、评论"></a>6、评论</h2><p>评论可以用多说评论框，但是用了多说评论框，你的文章就会自动被扒走，然后放到推酷这个网站上，你还啥都不知道（囧不懂脸）。所以我用的是国外的disqus，直接甩链接系列:</p> <ol> <li><a target="_blank" rel="noopener" href="https://blog.jamespan.me/2015/04/18/goodbye-duoshuo/">告别多说，拥抱 Disqus</a></li> <li><a target="_blank" rel="noopener" href="http://morris821028.github.io/2014/04/12/web/hexo-comment/">解決 Hexo Comment !</a></li> </ol> <h2 id="7、文章阅读量"><a href="#7、文章阅读量" class="headerlink" title="7、文章阅读量"></a>7、文章阅读量</h2><p>直接甩链接系列：<a target="_blank" rel="noopener" href="http://theme-next.iissnan.com/getting-started.html#leanclound-page-views">NexT主题文档之阅读次数统计（LeanCloud) </a></p> <h2 id="8、Rss"><a href="#8、Rss" class="headerlink" title="8、Rss"></a>8、Rss</h2><ol> <li>安装生成插件<br><code>npm install hexo-generator-feed --save</code></li> <li>修改配置文件，在hexo根目录下的_config.yml中添加以下内容：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">feed:</span><br><span class="line"> type: atom</span><br><span class="line"> path: atom.xml</span><br><span class="line"> limit: 20</span><br><span class="line"> hub:</span><br></pre></td></tr></table></figure></li> <li>修改主题配置文件_config.yml，添加以下内容，以在页面中显示rss按钮：<br><code>rss: /atom.xml</code></li> </ol> <hr> <p>参考链接：</p> <ol> <li><a target="_blank" rel="noopener" href="http://www.zhihu.com/question/41625825">Hexo的next主题变成德语</a></li> <li><a target="_blank" rel="noopener" href="http://www.zhihu.com/question/40674614">Hexo文章无法折叠？</a></li> <li><a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/asset-folders.html">Hexo官方文档-资源文件夹</a></li> <li><a target="_blank" rel="noopener" href="http://www.tuicool.com/articles/umEBVfI">在Hexo中无痛使用本地图片</a></li> <li><a target="_blank" rel="noopener" href="http://www.thinksaas.cn/ask/question/22799/">hexo博客 markdown解析不了标题</a></li> <li><a target="_blank" rel="noopener" href="http://tieba.baidu.com/p/1683464316">你还敢用“多说评论框”吗？</a></li> </ol> </div> <footer class="post-footer"> <div class="post-tags"> <a href="/tags/%E8%B8%A9%E5%9D%91/" rel="tag"># 踩坑</a> <a href="/tags/Hexo/" rel="tag"># Hexo</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" rel="tag"># 博客</a> <a href="/tags/%E4%B8%83%E7%89%9B%E4%BA%91/" rel="tag"># 七牛云</a> </div> <div class="post-nav"> <div class="post-nav-item"> <a href="/2016/06/14/Ionic_AngularJS_Cordova_Hybrid_APP_Developing_Environment_And_Build/" rel="prev" title="ionic + angularJS开发Hybrid App开发环境配置及打包踩坑记"> <i class="fa fa-angle-left"></i> ionic + angularJS开发Hybrid App开发环境配置及打包踩坑记 </a> </div> <div class="post-nav-item"> <a href="/2016/07/11/A_Hiccup_When_ion-view_And_ng-repeat_Meet_With_$watch/" rel="next" title="ion-view、ng-repeat遇到$watch时产生的一个小坑"> ion-view、ng-repeat遇到$watch时产生的一个小坑 <i class="fa fa-angle-right"></i> </a> </div> </div> </footer> </article> </div> </div> </main> <footer class="footer"> <div class="footer-inner"> <div class="copyright"> © <span itemprop="copyrightYear">2024</span> <span class="with-love"> <i class="fa fa-heart"></i> </span> <span class="author" itemprop="copyrightHolder">Mia.T</span> </div> <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> </div> </div> </footer> <div class="toggle sidebar-toggle" role="button"> <span class="toggle-line"></span> <span class="toggle-line"></span> <span class="toggle-line"></span> </div> <div class="sidebar-dimmer"></div> <div class="back-to-top" role="button" aria-label="Back to top"> <i class="fa fa-arrow-up fa-lg"></i> <span>0%</span> </div> <noscript> <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div> </noscript> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script> <script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/sidebar.js"></script><script src="/js/next-boot.js"></script> </body> </html>