hexo博客优化以及添加新功能

最新推荐文章于 2024-05-29 09:29:37 发布

云原生IT民工

最新推荐文章于 2024-05-29 09:29:37 发布

阅读量744

点赞数

分类专栏： hexo博客

本文链接：https://blog.csdn.net/u010948569/article/details/106967226

版权

hexo博客专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、hexo在右上角添加图标

左上角实现fork me on github或者github图标链接自己的github主页

挑选自己喜欢的样式点击 GitHub Ribbons 和 GitHub Corners ，并复制代码
在这里插入图片描述
然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址

 <div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>
    <a href="https://github.com/pythonTaotao" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"> {%- include '_partials/header.swig' %} </div>

二、添加赞赏功能

将自己的赞赏码图片上传到themes/next/source/images/下面

vi themes/next/_config.yml

# Reward
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

三、增加搜索功能

1，安装hexo-generator-searchdb，在站点的根目录下执行以下命令：

npm install hexo-generator-searchdb --save

2，添加站点的配置config

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

3,修改主题配置configg

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

四、设置中文，修改基础信息

修改站点配置文件config

# Site
title: Hexo
subtitle: ''
description: '愿有岁月可回首，且以深情共白头'           #站点描述
keywords:
author: ytliangc   John Doe     #设置作者
language: zh-Hans             #设置语言
timezone: 'Asia/Shanghai'     #配置时区

五、设置菜单

修改主题配置文件

menu:
  home: / || home
  #about: /about/|| user
  tags: /tags/|| tags
  #categories: /categories/ || th
  archives: /archives/|| archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

六、设置头像

修改主题配置文件

avatar: /images/avatar.jpg       #设置文件名称和路径
rounded: true                    #鼠标放在头像上时是否旋转
opacity: 1                       #头像放缩指数 
rotated: false                   #头像是否设为圆形，否则为矩形

七、设置文章结束标志

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后(END POST BODY)， post-footer 之前添加如代码：

    {#####################}
    {### END POST BODY ###}
    {#####################}

  <div>
    {% if not is_index %}
     {% include 'passage-end-tag.swig' %}
    {% endif %}
  </div>

    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}

然后打开主题配置文件（_config.yml),在末尾添加

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

八、hexo添加外部链接

编辑主题配置 themes/next/_config.yml

social:
  GitHub: https://github.com/pythonTaotao || github
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  CSDN: https://csdn.com || copyright
  E-Mail: lyuntao.ts@gmail.com || envelope
  微博: http://sahdlad || weibo

social_icons:
  enable: true      
  icons_only: false    #是否只是显示图标
  transition: false

九、为hexo添加RSS订阅

在根目录执行以下命令

npm install hexo-generator-feed --save

编辑站点配置文件_config.yml

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  
参数含义：
type: RSS的类型(atom/rss2)
path: 文件路径,默认是atom.xml/rss2.xml
limit: 展示文章的数量,使用0或则false代表展示全部
hub:
content: 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
content_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,，防止从中间截断.

编辑主题配置文件themes/next/_config.yml

rss: /atom.xml

十、底部显示建站时间

修改主题配置文件

# Specify the date when the site was setup
since: 2020   # 建站年份

十一、新增分类和标签功能，并在文件添加分类

！！！浏览器访问分类和标签出现错误 Cannot GET /tags/     Cannot GET /categories/

1、生成"分类"
hexo new page "categories"

2、添加tpye属性
vim source/categories/index.md

---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

3、给文章添加“categories”属性
hexo new "docker"                #新建文章

---
title: docker.md
date: 2020-06-19 10:41:55
categories: 
- docker
---

注意：hexo一篇文章只能属于一个分类，也就是说如果在“- docker”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- docker”下的 “-xxx ”分类）。
==============================================================

4、生成"标签"页
hexo new pag "tags"

5、添加tpye属性
vim source/tags/index.html
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "tags"
---

5、给文章添加"tags"属性
---
title: docker.md
date: 2020-06-19 10:41:55
categories: 
- docker
tags:
- 容器
- 安装
- 验证
---

这两个的设置几乎一模一样！是的，没错，思路都是一样的。所以我们可以打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，之后执行hexo new 文章名命令生成的文件，页面里就categories:项了。这个是后面新建文章的模板文件


scaffolds/post.md
---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

十二、给文章添加图片

安装插件
npm install hexo-asset-image --save

然后每次新建文章的时候会创建对应文章名的目录，将图片存储在对应目录下，然后进行相对路径引用即可

云原生IT民工

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
hexo博客优化以及添加新功能

一、hexo在右上角添加图标左上角实现fork me on github或者github图标链接自己的github主页挑选自己喜欢的样式点击 GitHub Ribbons 和 GitHub Corners ，并复制代码然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址 <div class="{{ container_c
复制链接

扫一扫

专栏目录