【Hexo】记录NexT主题美化及域名配置（图示详解）_nextjs部署绑定域名

本篇主要记录一下更换NexT主题，及后来美化，配置域名的过程。

我的 Hexo博客：http://yzhblog.work/…

1.更换主题为 NexT

更换主题其实很简单，就是两步：

1. git clone 下来到博客的 themes 目录下

   

2. 修改_config.yml 的 theme 为 next

   

修改完了后就可以本地启动 hexo server 或者 hexo d -g 远程启动看以下效果了！

---

这里再记录一下我在拉取主题和部署时碰见的两个错误：

1). 错误一：git clone 拉取主题时失败

• 报错 ：Failed to connect to github.com port 443: Timed out
• 解决方案：在代理设置里查看具体代理端口，然后设置到 Git 的代理端口 git config --global https.proxy http://127.0.0.1:10809和 git config --global http.proxy http://127.0.0.1:10809。

2). 错误二：部署 Hexo hexo d -g 失败

• 报错：ssh connect to host github.com port 22 Connection timed out
• 解决方案：修改hexo根目录 _config.yml 的连接方式为 http协议

2.内容设置

内容设置就是添加一些必备组件

设置菜单栏显示什么：首页/标签/分类

设置语言：英语/汉语

设置标签文字内容

主题样式

标题、作者名、头像

rss订阅图标

npm install hexo-generator-feed --save
1

外链接：github、推特

近期文章

修改themes/next/layout/_macro/sidebar.swig 。找到theme.social板块代码，在该板块最后的endif后隔一行添加如下代码。

{# recent posts #}
{% if theme.recent_posts %}
  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
      <!-- modify icon to fire by szw -->
      <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
      {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list">
      {% set posts = site.posts.sort('-date') %}
      {% for post in posts.slice('0', '5') %} 
        <li class="recent_posts_li">
          <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

编辑themes/next/source/css/_common/components/sidebar/sidebar-blogroll.styl

li.recent_posts_li {
    text-align: cengter;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
1
2
3
4
5
6
7
8

站内搜索

npm install hexo-generator-searchdb --save
1

3.页面美化

页面美化就是对NexT做一些视觉上的优化

标题颜色

背景图片

主题透明度

人物挂件

npm install -save hexo-helper-live2d
#npm install --save live2d-widget-model-<模型>
npm install --save live2d-widget-model-tororo
1
2
3

网站图标

阅读全文样式

加载动画

3D动态特效

头像旋转

点头像返回主页

去页脚

修改标签#为图标

4.文章设置

页面文章数

npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-generator-generator --save
1
2
3

文章排序规则

修改文章url（唯一ID）

npm install hexo-abbrlink --save
1

前显字数

但是我们更推荐使用 <!-- more --> 标识文章摘要。

字数统计、阅读时长

去除自带标号

版权声明

代码主题

加密访问

SEO

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
1
2

文章结束语

5.绑定域名

绑域名其实很简单，就步

1. 在阿里云或者腾讯云或者华为云申请个域名

2. 将 GitHub 的原生域名绑定到自定义域名上

   

   查看 Git Page 的IP：ping youname.github.io

   

3. 创建一个 CNAME 文件，写入申请的域名（注：CNAME是没有后缀的）

   

4. 在 GitHub 的配置中修改域名

   

参考链接：

• Hexo-Next 主题博客个性化配置超详细，超全面(两万字)
• hexo4.0 - Next7.2.4 主题优化配置
• Hexo-个人之博客主题美化
• Next -14- 为Hexo Next7.7.1 添加RSS （带按钮）
• 个人博客第8篇——优化主题（持续更新）