搭建个人主页保姆级教程（五）

最新推荐文章于 2022-12-24 18:02:58 发布

程序员小光

最新推荐文章于 2022-12-24 18:02:58 发布

阅读量450

点赞数 1

分类专栏：博客文章标签：前端 github 经验分享

CC-BY-NC-SA

本文链接：https://blog.csdn.net/qq_41911142/article/details/124473099

版权

博客专栏收录该内容

10 篇文章 1 订阅

订阅专栏

干货时刻

hexo个人主页系列教程：本文主要讲解next主题相关插件的配置。

Pjax 优化

pjax是一款基于jQuery的插件，基于pushState和ajax，实现站点的局部刷新。它将站点转化为SPA应用，可以提升页面切换速度。同时它可以解决aplayer插件切换页面后重新播放的问题。

我们在终端依次键入以下命令（前提是终端路径为blog，即项目根目录）：

cd themes/next
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
cd ../..

进入路径themes/next/_config.yml，修改pjax字段：

pjax: true

标签云

标签云插件hexo-tag-cloud实现了较为炫酷的标签环绕效果，可以自定义标签云的字体、颜色、高亮显示。

我们在终端键入命令：

cnpm install hexo-tag-cloud --save

进入路径themes/next/layout/_macro/sidebar.swig，然后找到<div class="site-overview-wrap sidebar-panel">，在该标签的后面添加：

{% if site.tags.length > 1 %}
<script
  type="text/javascript"
  charset="utf-8"
  src="{{ url_for('/js/tagcloud.js') }}"
></script>
<script
  type="text/javascript"
  charset="utf-8"
  src="{{ url_for('/js/tagcanvas.js') }}"
></script>
<div class="widget-wrap">
  <h5 class="widget-title">标签云</h5>
  <div id="myCanvasContainer" class="widget tagcloud">
    <canvas width="250" height="250" id="resCanvas" style="width:100%">
      {{ list_tags() }}
    </canvas>
  </div>
</div>
{% endif %}

具体位置如图所示：

之后，进入项目根目录blog，打开站点配置文件_config.yml，找个空地添加以下代码：

# 标签云
tag_cloud:
  textFont: Trebuchet MS, Helvetica # 字体
  textColor: "#333" # 字体颜色
  textHeight: 20 # 字体大小
  outlineColor: "#E2E1D1"
  maxSpeed: 0.2 # 旋转速度
  pauseOnSelected: true # 当选中对应标签时，是否停止转动

OK，之后终端键入以下命令，在本地观察效果：

hexo clean; hexo g; hexo s

本地搜索

本地搜索插件hexo-generator-searchdb可以实现弹框式站内搜素功能。

在终端键入以下命令：

cnpm install hexo-generator-searchdb --save

进入项目根目录，修改站点配置文件_config.yml，添加如下配置：

search:
  path: search.xml
  field: post
  content: true
  format: html
  limit: 1000

接着进入themes/next/_config.yml，修改local_search字段：

local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1
  unescape: false
  preload: false

站点地图

站点地图放置了搜索引擎抓取的所有页面的链接，可以告诉搜索引擎网站有哪些网页能抓。帮助网站页面被诸如百度、谷歌等搜索引擎网站收录，提升个人网站的曝光度。

首先安装百度和谷歌站点地图插件hexo-generator-baidu-sitemap、hexo-generator-sitemap，可以在public目录下自动生成baidusitemap.xml、sitemap.xml文件。

cnpm install hexo-generator-baidu-sitemap --save
cnpm install hexo-generator-sitemap --save

进入项目根目录，修改站点配置文件_config.yml，添加如下配置：

# 自动生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

来点音乐

aplayer是一款网页音乐播放器，我们首先去aplayer仓库地址下载源码。

再将仓库中的dist文件夹复制到blog/themes/next/source。

在目录blog/themes/next/source/dist下新建music.js文件，添加代码：

const ap = new APlayer({
  container: document.getElementById("aplayer"),
  fixed: true,
  autoplay: true,
  theme: "#000",
  mutex: true,
  lrcType: 1,
  audio: [
    {
      name: "哪里都是你",
      artist: "队长",
      url: "http://music.163.com/song/media/outer/url?id=488249475.mp3",
      cover:
        "http://p1.music.126.net/Ieq9StJjPVyRPlmeOanldQ==/109951166470091750.jpg?param=180y180",
      lrc: "[00:00.000] 作词 : 队长\n[00:01.000] 作曲 : 队长/박수석/김문철",
    },
  ],
});

其中，lrcType: 1为歌词格式，表示以lrc字符串的方式添加歌词。音频信息中，name为歌曲名，url为歌曲地址，cover为封面图片地址，lrc为歌词字符串。不懂如何设置lrc字符串的参考：讲讲如何优雅地扒歌词。

url怎么获得？以云村为例，播放一首歌，将页面网址的id复制下来：

然后在http://music.163.com/song/media/outer/url?的后面加入刚复制的id字符串。

最后，我们进入路径themes/next/layout/_layout.swig，将下面的代码添加到<body>标签中，地方随意。

<!-- aplayer -->
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

在head标签中添加以下代码设置播放器的样式：

<link rel="stylesheet" href="/dist/APlayer.min.css" />

本地字体

next主题默认使用google fonts API来设置字体，由于google fonts API 属于国外服务器提供服务支持，因此稳定性差。我们可以将字体下载到本地中，替换字体服务。

比如我们下载了.ttf后缀的字体文件。进入路径themes/next/source，新建文件夹fonts，然后将字体文件安置其中。

接着，进入路径blog/source/_data/styles.styl，添加以下代码：

// 本地字体
@font-face {
  font-family: "alipuhui";
  src: url("../fonts/alipuhui.ttf");
}
@font-face {
  font-family: "consola";
  src: url("../fonts/consola.ttf");
}

作者下载了阿里普惠作为全局字体，consola为代码字体。

然后，进入路径themes/next/_config.yml，修改font字段：

font:
  enable: true

  global:
    external: false
    family: alipuhui
    size:

  # Font settings for site title (.site-title).
  title:
    external: false
    family:
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: false
    family:
    size:

  # Font settings for posts (.post-body).
  posts:
    external: false
    family:
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: false
    family: consola

结束语

想要学习更多优质内容的同学，关注收藏一下作者的个人主页：东曜说 ~~

程序员小光

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
搭建个人主页保姆级教程（五）

干货时刻hexo个人主页系列教程：本文主要讲解next主题相关插件的配置。Pjax 优化pjax是一款基于jQuery的插件，基于pushState和ajax，实现站点的局部刷新。它将站点转化为SPA应用，可以提升页面切换速度。同时它可以解决aplayer插件切换页面后重新播放的问题。我们在终端依次键入以下命令（前提是终端路径为blog，即项目根目录）：cd themes/nextgit clone https://github.com/theme-next/theme-next-pjax so
复制链接

扫一扫