Hexo博客美化

已于 2022-03-25 10:40:15 修改
阅读量2.2k 收藏 16
点赞数 1
分类专栏： hexo 文章标签： 经验分享
于 2022-03-25 10:05:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houwhu/article/details/123728372
版权

Hexo博客美化

我们搭建好自己的博客以后，可以在hexo官网的 主题 中选择自己喜欢的博客主题，可以直接在主题中点开预览主题样式或者打开主题项目的 github 地址，将该主题下载到我们自己的博客项目中的 theme 文件夹中，然后在 _config.yml 文件中找到 theme 修改为你主题的名字，重新编译启动你的项目，就可以替换为你喜欢的主题了。当然除了更换主题为，你也可以自定义你自己的主题，修改它的样式，或者干脆按照自己理想的布局和样式来自己属于自己的完美主题。除此之外，我们的博客还可以支持一些第三方的库，来给我们的博客增加更多的功能。

我的博客之前的主题是按照自己的喜好自定义的主题，最近决定换成 next主题，我们今天会讲如何在我们的博客中集成浏览量，浏览人数，搜索，评论，看板娘等各种功能，本文这些设置和集成都是基于Next 主题集成的，其他主题方法都一样，具体的各位看官们根据自己主题提供的 _config_yml文件灵活处理。

文章目录

本文所有的设置和插件都是基于 next 主题配置的，其他主题方法都类似，具体的配置字段参考自己下载主题的 _config.yml文件提供的字段，有些不知道怎么配置字段的，可以找到自己主题对应部位的模板文件去看代码然后做相应的配置，如果模板中没有相应的代码，可以自己定义去做修改。

因为博客和主题文件夹下都有_config.yml 文件，下文为了方便区分，我们把我们的博客的配置文件叫 _config.yml，主题下面的配置文件称为 _config.theme.yml，看官们注意，下文看到 _config.theme.yml文件的描述，可别说自己的项目中没有这个东西。

基础配置

在之前的博客搭建 中，我们就讲了一些基础的配置项，比如网站的标题，图标等，这里将不再多说，我们这里主要讲next主题的一些设置。

菜单

菜单配置

在我们_config.theme.yml中找到 menu字段，下面就是我们菜单的相关配置，可以看到我们的菜单如下所示：

menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  # schedule: /schedule/ || fa fa-calendar
  about: /about/ || fa fa-user
  # sitemap: /sitemap.xml || fa fa-sitemap
  guestbook: /guestbook/ || fa fa-commenting

我们看到关于菜单的组成部分是由三部分组成，key为我们菜单的名称，value由两部分组成，前面部分为我们菜单对应的页面组成，我们点击该菜单后会跳转到对应的页面去，中间由||隔开，后面的部分为菜单对应的图标。因为hexo主题集成了fontawesome字体图标，后面对应的部分就是我们字体图标对应的类名，现在该字体库大概收录了将近700个图标，我们可以找到自己想要的图标，点击后就可以查看到该图标对应的类型，复制即可。

图标的展示配置和角标的配置：
menu_settings:
  icons: true
  badges: true

至于对应的页面，我们需要用命令去添加对应的文件类型就可:

hexo new page <menuname>

用上面命令对应我们的菜单生成相对应的页面，生成普通的文章直接用命令hexo new 'title' 或者 hexo new post 'title'，因为我们的默认类型就是文章，所以可以省略post直接添加一篇新的博客。当然我们也可以在我们博文的头部去做一些简单的配置，比如 title, date, tags...等。

阅读全文

因为我们的博客会有很多，所以在首页展示的时候不可能每篇文章都展开去展示，这就只需要在首页展示博客的开头一部分去作为摘要显示，用小块的部分在首页展示排列，然后通过按钮点击查看全文，我们不做处理的话文章默认都是展开的，我们只需要在编辑我们的博文的时候，在你想要在首页只展示的部分添加一行代码<!-- more -->标识去做分割，我们的博客就会自动在首页在你添加标识的地方切割，然后生成 阅读全文按钮，我们通过点击进入全文，当然这个文字和样式我们也都可以根据自己的审美喜欢自行修改。_config.theme.yml中修改：

read_more_btn: true

社交

我们只要找到_config.theme.yml中 的social字段，配置格式和前面提到的菜单的配置格式一样，我们只要找到自己想要配置的社交平台对应的图标简单配置就行，当然如果你不满足于该配置或者想做更个性化的配置的话，我们可以通过自定义的方式来添加自己想要的图标。而要显示我们配置的图标，则需要将social_icons下面的enable设置为true即可：

social_icons:
  enable: true
  icons_only: true
  transition: true

这里用svg格式的图片做自定义配置为例：我们可以在阿里的图标矢量库中找到你想配置的图标，点击下载，选择svg下载，将下载的图片保存到我们的目录themes/next/source/images文件夹下，在themes/next/source/css文件夹下新建 _cunstom 文件夹，然后创建 iconfont.styl文件，在里面自定义我们的图标样式：

/* sidebar social icon */
.common {
  display: flex;
  background-size: 1.5rem;
  opacity: 0.85;
  background-position: center;
  background-repeat: no-repeat;
  height: 1.5rem;
  width: 1.5rem; 
  border-radius: 0rem;
  /*鼠标停留在图标上时，图标呈现发光效果*/
  &:hover {
      opacity: 1;
    }
}
.csdn {
  background-image: url('/images/csdn.svg');
}
.github {
   background-image: url('/images/GitHub.svg');
}
...

这样我们就定义好了我们要的图标样式和图片，然后在我们的_config.theme.yml文件中修改配置：

social:
  GitHub: https://github.com/xxx || common github
  CSDN: https://blog.csdn.net || common csdn
  ...

注意：我们自定义的样式文件需要导入到我们的 main.styl中。

这样我们就完成了社交模块的自定义配置。

语言配置

在根目录_config.yml文件中找到 language，设置为你想要设置的语言即可。打开themes/next/languages，可以看到有很多中语言，我们只需要将我们想要的语言设置即可，该主题支持国际化语言，我们配置的菜单图标等自己定义的字段，在自己设置的语言文件中添加对应的字段和展示文本即可。

注意：next主题中文设置可能与next的文档有些出入，当你设置了zh-CN可能无效，打开我们的语言文件夹，我们看到中文的文件叫zh-Hans，我们只需要将设置语言的地方改为该字段，或者将中文配置文件名改成zh-CN.yml都可以。

文章底部设置

添加版权说明

我们可以在文章增加版权说明表明文章的作者，链接以及转载的信息等，如下图所示：

  • 本文作者： Axe
  • 本文链接： https://houwhu.github.io/hwh-blog.github.io/posts/53595.html
  • 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

next主题已经为我们添加了版权说明，我们只需要做简单配置就能为我们的文章添加版权说明：

首先，打开_config.theme.yml文件，找到footer，在下面找到post_copyright，将其设置为可见：

# If not defined, `author` from Hexo `_config.yml` will be used.
  post_copyright:
    enable: true
    license: CC BY-NC-SA 3.0
    license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

然后打开_config.yml，找到url，把内容改成自己的博客域名就可以了。

这样设置以后我们的每篇博文都会增加该说明，当然我们在不需要添加该说明的时候，我们只需要在该文章顶部的配置中添加copyright: false就可以了。

添加分享

分享的插件有很多，比如百度分享，多说等，我这里用need-more-share2，配置简单：

needmoreshare:
  enable: false
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
开启文章打赏

开启主题下的配置文件：

reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: false
  comment: 坚持原创技术分享，您的支持将鼓励我继续创作！

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.jpg

在reward中添加你的用于打赏的收款码，如果你觉得支付宝微信的收款码不好看，你可以在线生成二维码。

添加评论系统

评论系统的插件比较多，我这里添加的是gitalk，配置简单，样式简洁美观.

申请gitalk

申请网址：https://github.com/settings/applications/new，填写的这个信息后面是可以修改的，所以放心大胆的填，不要担心填错了。

在这里插入图片描述

注册完成后，进入 settings/ Developer settings 找到 OAuth Apps， 在这里，你就能看到clientID和clientSecret啦。把页面往下翻，能看到你刚刚填写得信息。如果你觉得不对，你可以重新填写，然后点击Update application，更新一下。

这里顺带提一下，平时我们怎么打开这个页面。进入你的GitHub主页，右上角点击Settings，点击Developer settings，进入APP界面，点击OAuth Apps，如果你申请好了，就会在这里看到。同样你也可以在右小角点击New OAuth App新建，和刚刚https://github.com/settings/applications/new的效果是一样的。

修改博客配置

首先：_config.theme.yml

comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: gitalk
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any naves, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    gitalk:
      order: -1

然后找到gitalk, 添加配置，如果没有自己在_config.theme.yml中添加：

gitalk:
  enable: true
  github_id: xxx # GitHub的
  repo: blog-comment # 存储issues的仓库名
  client_id: 6167b7xxxxxxx729a12 # GitHub Application Client ID
  client_secret: 07aaf16xxxxxxxxxxxxa8489855be8 # GitHub Application Client Secret
  admin_user: xxxx # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN
  # When the official proxy is not available, you can change it to your own proxy address
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token

可能碰到的问题

  • 未找到相关的issues进行评论：这个问题不大，你点击下面，登入一下你的Guthub账户就好了。

  • Error: Not Found： 那一定是你信息没填对，repo那里，一定要填仓库名

  • Error: Validation Failed：

    id: location.pathname,      // Ensure uniqueness and length less than 50

    就是说，你的整个链接不能太长，如果你链接超过50个字符，那么评论系统就会报错。会出现Gitalk Error: Validation Failed.你的链接，默认是根据你设置的名称来的。所以，你给文件命名的时候，注意一下。当然，你也可以用md5来缩短你的地址。

添加本地搜索

该功能依赖hexo-generator-searchdb插件，使用命令npm install hexo-generator-searchdb --save来进行安装，然后的末尾，加入以下代码即可。

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后开启主题配置文件_config.theme.yml中开启本地搜索：

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

添加萌萌哒看板娘

查看效果，请移步我的个人博客

我们这里用CDN的方式接入，简单方便，大神已经为我们写了一个可以说话，会换装的看板娘并开源，我们用起来也是非常的方便。

Fork看板娘项目

首先访问 live2d-widget 的 Github 仓库，点击右上角 Fork 该项目到自己的仓库：

向next中添加看板娘

在 /themes/hexo-theme-next/layout/_layout.njk 文件，在最后添加下面这行代码：

<script src="https://cdn.jsdelivr.net/gh/xxx/live2d-widget/autoload.js"></script>

注意： 请把cdn链接中的xxx换成你自己的GitHub用户名

开启看板娘

# 自定义看板娘
live2d:
  enable: true

然后重新生成部署博客，就看到一个萌萌哒的看板娘出现在了我们博客的左下角。

定制看板娘

我们用CDN的方式部署到了我们博客中，我们怎么修改自己的看板娘呢？

clone项目到本地

我们前面已经fork看板娘项目到自己的仓库了，注意我们这里克隆就是从自己的仓库克隆看板娘项目：

git clone https://github.com/xxx/live2d-widget.git
修改文件

看板娘项目中几个文件的作用：

  • autoload.js：自动加载看板娘；
  • waifu.css：看板娘样式；
  • waifu-tips.js：看板娘说话的脚本；
  • waifu-tips.json：看板娘说话的内容；
修改加载看板娘的路径

在 autoload.js 的开头定义了加载看板娘的路径，注意这里需要使用绝对路径：

//注意：live2d_path参数应使用绝对路径
const live2d_path = "https://cdn.jsdelivr.net/gh/Mculover666/live2d-widget/";
//const live2d_path = "/live2d-widget/";
修改样式

waifu.css中可以修改看板宁的位置。

修改完成后保存代码，commit push到远程仓库。

发布新版本

我们是使用了Github免费的CDN服务，所以还需要发布一个新的版本：

在我们的代码库找到release操作，点击Draft a new release，输入新的版本号，点击 publish release,修改我们引入的cdn链接，在你的看板娘库名后面添加版本号。

<script src="https://cdn.jsdelivr.net/gh/xxxx/live2d-widget@1.0.0/autoload.js"></script>

重新部署博客

hexo clean
hexo g -d

插件

可以看到我们前面很多配置其实都是依赖了其他的插件，hexo还有很多好玩的插件，可以增强和美化我们的博客，官方目前提供的插件已经多达几百个了，大家可以去 插件去安装配置。

small_Axe
关注
专栏目录
hexo Blog 美化篇_1
liegu0317的博客
12-11 953
hexo作为一个快速、简洁高速的博客框架,拥有众多用户,也因此theme也非常丰富 直接在GitHub上搜索hexo theme就可以找到许多好看的主题 这里我使用的是名叫 Fluid 的主题，他和其他使用量比较大的theme一样其官方文档是相当丰富 目录 1.主题安装与指定 ​ 2.theme 细节 DIY 2.1整理门面 2.2修改about Page 这是我的博客 ↓ 参考资料： 1.主题安装与指定 官方文档说的很明白，这里就不做过多赘述了 点击查阅官方文档 补...
Hexo博客项目：页面美化
修行的凡人的博客
03-10 490
基于Hexo架构，快速搭建Hexo博客
hexo博客美化
weixin_51002159的博客
12-05 726
hexo博客美化
Hexo搭建个人博客系列【七】- Butterfly主题使用及美化
viman3344的专栏
07-26 1116
是基于的的基础上进行开发的，当前版本是v4.13.0。主题官网：https://github.com/jerryc127/hexo-theme-butterfly。
Hexo 博客优化之博客美化系列（持续更新）
热门推荐
BOB'S BLOG
12-30 5万+
Hexo 博客优化之博客美化系列，预览地址：www.itbob.cn
博客美化
kanwoerzi
11-21 86
博客美化，得学学。 新浪小北http://blog.sina.com.cn/jiangbei1008
Hexo博客美化及功能增添
Reply_的专栏
01-21 994
Hexo博客美化及功能增添 补充上一篇------Mac下使用Hexo+Github搭建个人博客 6.Hexo博客美化及功能增添 1）选主题 Hexo官网：https://hexo.io/themes/ 里面有特别多的主题可以选择，我在这里选的是next这个主题。下载主题： cd ~/blog git clone https://github.com/iissnan/hexo-theme-next...
Hexo博客之主题美化
雨希的博客
07-01 1562
据说 NexT 是使用最多的Hexo主题，原因当然是比较漂亮啦！这个项目托管于github上，你可以fork一下，贡献代码。NexT官网上面给出了详细的主题配置过程，这里只是我的博客使用的一些配置以及NexT网站上配置中需要补充的部分。如果你是从头开始配置，请参考NexT官网。这篇文章介绍NexT主题的主题配置、第三方服务、内建标签、个性化设置等，通过这篇文章你就可以让你的博客个性十足奥！ 站...
Hexo博客优化之Next主题美化
huangpiao
01-26 5万+
前言 有了前面几篇博客的介绍，我们就可以很容易的搭建并编辑我们的博客了，不过既然是属于自己的博客网站，自然也就想让其更加美观，更有意思，所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本，下面我会介绍基于Ne...
搭建+美化hexo博客(让你拥有自己的博客)
旦願的博客
04-03 207
安裝必备软件 软件安装 首先我们需要安装git、node.js、npm、hexo git的安装 首先更新ubuntu存储库的软件包索引号 sudo apt-get update 安装git sudo apt install git 验证并检查git的安装版本 git --version 配置git 此时我们需要配置自己的用户信息 git config --global user.name "...." git config --global user.email "...." nod
基于Next5主题美化的一款hexo博客主题
08-08
基于Next5主题美化的一款hexo博客主题
（二）Hexo-个人之博客主题美化
weixin_45682081的博客
03-10 1363
本文以作者blinkfox的matery主题为例，对主题的部分地方进行优化，进行了一些美化。 没有博客？ Github + Hexo 搭建个人博客超详细教程 获取我配置好的主题？ git@github.com:MUYIio/Hexo-matery-Themes.git 须知： 不同的Hexo主题的美化方式可能存在一些差异，但也相差无几，把源代码放在合适的位置就可以。 前提条件： 进行博客主题美化...
hexo美化
然而
10-04 750
Hexo个性化搭建笔记 美化 1.hexo博客的启动 1.首先在命令面板中进入到博客建设目录 在输入启动命令 hexo s -p 5555 这个端口号可以自己设的 只要不冲突 问题就不大 解析 hexo 是博客 s是启动 5555是调动的端口 2.语言配置 1.官方文档给的是修改站点配置文件，将language设置你所需要的语言 官方文档代码是zh-Hans [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7LBKRYgf-1601793470031)(https:/
hexo本地博客美化
小章的编程日记
08-10 393
选项中的所有内容均为非必填的。但我仍然建议至少填写title和date的值。配置选项默认值描述titleMarkdown的文件标题文章标题，强烈建议填写此选项date文件创建时的日期时间发布时间，强烈建议填写此选项，且最好保证全局唯一author根中的author文章作者img中的某个值文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如:toptrue推荐文章（文章是否置顶），如果top值为true，则会作为首页推荐文章coverfalsev1.0.2。
hexo主题美化，让你的博客焕然一新
m0_57800664的博客
08-03 1431
全文建议配合梯子食用 hexo主题美化，让你的博客焕然一新 上篇博客中，我讲完了如何利用hexo和githubpage初步在你的ubuntu上搭好一个博客网站，但这样搭出来的网站显然不太符合我们代码人的口味(可能只有我不太喜欢？)。而这篇博客就是教你让你的hexo换个主题，并且做yi点点自定义的美化，本文选用的博客的主题是matery，也是我的博客正在使用的主题。 matery主题 matery主题是一个采用Material Design和响应式设计的 Hexo 博客主题，这是它的github仓库地址，点击
博客美化汇总
b08880415的博客
04-14 198
虽然注册博客园满6个月了，但是开始写博客还是最近的事。作为一个新手，自己码代码定制自己的博客似乎显得有点困难，所幸的是博客园有很多优秀的程序员精于此道并乐于分享。我的博客园美化方法和参考资源汇总如下。 1、申请js权限 直接在设置里点击申请，审核较慢且通过率较低。因此可以向contact@cnblogs.com发邮件，简单说明理由，一般很快就能得到回复了。 2、博客皮肤 参考教程...
Hexo博客之博客美化
凌枫ozo的博客
08-29 878
https://lqgjava.github.io/2019/08/24/Hexo博客之博客美化/ 只需阅读这一篇文章，就可以让你的博客变得丰富多彩，有添加卡通人物，添加鼠标点击爱心，添加鼠标指针样式 添加彩色滚动变换、添加背景音乐、添加动态彩带等，环境访问我的新博客，让我们一起去打造属于自己的专属博客吧！ ...
hexo fluid美化
最新发布
08-24
Hexo是一个轻量级的静态网站生成器，而`hexo-generator-fluid`插件则是Hexo主题`fluid`的一个美化版本。`Fluid`本身提供了一个简洁、响应式的布局，适用于博客和个人站点。如果你想进一步定制和美化Hexo网站，`hexo-generator-fluid`允许你在主题的基础上进行个性化配置： 1. 安装插件：在Hexo的命令行工具中，先安装`hexo-generator-fluid`，通过运行`npm install hexo-generator-fluid --save`。 2. 配置：在`_config.yml`文件中，设置`theme`为`fluid`，并配置其他选项，如导航菜单、页面布局等。 3. 修改CSS：`hexo-generator-fluid`默认的样式可以在`source/css`目录下找到。你可以修改这里的CSS规则来自定义字体、颜色、间距等。 4. 使用Liquid标签：Hexo支持Liquid模板语言，你可以添加自定义 Liquid 标签或过滤器来增强内容呈现。 5. 主题定制：如果你熟悉前端技术，还可以直接修改主题源码，例如在JavaScript中调整交互效果，或者在HTML结构上做改动。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

small_Axe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值