hexo 使用大全

文章已阅读次

内容来源于官网、实践、搜索

1.如何设置hexo首页只显示部分摘要而不是全部内容？

为了便于检索和页面美观，首页的文章可以显示部分或者隐藏正文内容。

实现的方法有两种：

方法1：添加概述（description）属性

1	description: 为了便于检索和页面美观，首页的文章可以显示部分或者隐藏正文内容。

这种方法比较繁琐，因为这种情况下我们并不会花费太多的时间去写描述，由此会降低我们文章的质量。

方法2：添加文章阶段特性

在我们需要隐藏内容的起始行添加以下内容即可

1	<!--more-->

2.如何引入在线代码编辑工具codepen？

安装 codepen

npm 安装：

1	npm install hexo-codepen --save

yarn 安装：

1	yarn add hexo-codepen

md 语法结构

1	{% codepen userId\|anonymous\|anon slugHash theme [defaultTab [height [width]]] %}

userId：对应codepen官网注册的用户id（也可以是直接是github账号）
anonymous：data-slug-hash 对应codepen官网生成的示例id
theme：主题
defaultTab：默认展示的tab，包括 html,css,result
height: 高
width：宽
注意这里的宽默认百分之百，高没有默认；如果要修改宽高不要加一个%,否则有误。

示例

1	{% codepen xuexiup dyegQKa dark [css,result [265]] %}

实际效果

对应可直接引用的html

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyegQKa" data-user="xuexiup" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/xuexiup/pen/dyegQKa">
  Untitled</a> by xuexiup (<a href="https://codepen.io/xuexiup">@xuexiup</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

3.如何设置hexo中主题Freemind的默认的顶部目录（）？

在配置文件：themes\freemind_config.yml中

menu:
  - title: Archives
    url: archives
    intro: "All the articles."
    icon: "fa fa-archive"
  - title: Categories
    url: categories
    intro: "All the categories."
    icon: "fa fa-folder"
  - title: Tags
    url: tags
    intro: "All the tags."
    icon: "fa fa-tags"
  - title: About
    url: about
    intro: "About me."
    icon: "fa fa-user"

按照对应格式配置即修改了顶部菜单内容。

4.如何首页显示内容的条数？

在配置文件：_config.yml中

index_generator:
  path: ''
  per_page: 5
  order_by: -date

per_page对应首页显示内容的条数，order_by 按照该属性排序。

5.给文章添加评论功能？

这里我使用的韩国的“来比力”插件，目前社区版是免费的（用于个人网站系统）

1.首先去来必力官网注册Livere账号

官网传送门

2.安装社区版（一般网站）

然后就会生成以下代码

----配置代码---
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="系统给你生成的LivereId">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
-------------------------------------

3.修改主题配置文件

我的主题配置文件路径为：/themes\freemind_config.yml

在最后添加以下内容：

1
2
3

# Livere评论系统 
Livere:
livere_uid: 系统给你生成的LivereId

4.在主题（theme/freemind ）中的 layout/_partial/post 下新增 livere.ejs文件，内容如下：

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="<%=theme.livere_uid%>">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

5.修改 article.ejs

在主题（theme/freemind ）中的 layout/_partial/article.ejs 内容

1 2	<!-- comment --> <%- partial('post/comment', {page: item}) %>

下添加以下内容

1
2
3

<%if (theme.livere_uid) { %>
		<%- partial('post/livere') %>
	  <% } %>

6.最后就是部署到github上

1
2
3

hexo clean
hexo g
hexo d

6.如何在 hexo 网站中引入图片

1.首先安装插件：hexo-renderer-marked

1	npm install hexo-renderer-marked --save

2.修改_config.yml配置文件

增加以下内容

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

3.在项目根据路source文件夹下新建一个文件夹：img

这个文件夹存图片资源；比如我这里放了一个theme.gif的动态图；

4.使用方法

记住我的路径的使用方式相对路径（相对路径）；

以下这种引入图片的方式也可以修改图片的样式。

1	<img src="/img/theme.gif"></img>

7.Hexo网站如何添加ico图标？

1.将图标放置在根目录：source\img 下

2.修改根目录下 themes\freemind\layout_partial\head.ejs 内容

1
2
3

<% if (theme.favicon){ %>
<link rel="icon" href="/img/favicon.ico">
<% } %>

8.github如何绑定自己的域名？

1.申请一个域名
2.在github仓库项目文件中添加一个无后缀名的CNAME文件，内容填写：要绑定的域名（例如 www.romanticlife.top ）；
这一步骤也可以是在hexo网站的source文件夹下添加（最终会推送到git上）；
3.添加域名解析

1）ping你的github仓库域名：ping xxx.github.io，得到一个IP地址
2）用以上得到的IP作为“记录值”添加两个A记录：主机记录为“WWW”和“@”

这样就可以用自己的域名访问git网站了。

9.如何在网站首页右侧添加‘常用网站板块’

1.在网站下\themes\freemind\languages>zh.CN.yml中添加

1	usewebs: 常用网站

2.在网站下\themes\freemind\layout_widget中新建名为：usewebs.ejs的文件，内容如下：

<% if (theme.usewebs.length){ %>
    <div class="widget">
        <h4><%= __('usewebs') %></h4>
        <ul class="blogroll list-unstyled">
        <% for (var i in theme.usewebs){ %>
            <li><i class="<%- theme.usewebs[i].icon %>"></i><a href="<%- theme.usewebs[i].url %>" title="<%- theme.usewebs[i].intro %>" target="_blank"]);"><%= theme.usewebs[i].title %></a></li>
        <% } %>
        </ul>
    </div>
    <% } %>