Hexo历险记之四美改Stun主题

最新推荐文章于 2022-12-17 18:37:15 发布
最新推荐文章于 2022-12-17 18:37:15 发布
阅读量505 收藏 5
点赞数 1
分类专栏： 君匡玩hexo 文章标签： git node.js npm
本文知识共享许可协议为CC BY-NC-SA 4.0，首发于个人博客，转载和参考请注明出处。
本文链接：https://blog.csdn.net/qq_41461536/article/details/126127819
版权

前言

接下来，我们来换一个合心意的主题！

2019年的时候，网上最出名的应该就是Next主题了，只要在搜索引擎上寻找，几乎都是建议使用Next。而我之所以另寻出路，只是主观不太喜欢，而且我在官网上浏览后，发现了很戳我审美的Stun主题。

所以，我也是建议你，先去hexo的主题官网遍览三百大道（截止到2022.7.26号已经有369个公开主题了），再具体考虑选择某个主题，微调后就成为你自己最喜欢的博客主题啦。

时隔四年，重启Hexo历险计划！

Hexo历险记之四美改Stun主题

向官方文档致敬，附上一张Stun主题 v2.1.1结构图。

主题文件目录结构

下载主题

以下载stun主题为例，给大家进行示例，在2020.7.17的最新版本为v4.2.1，我一直使用到现在没有出现过明显Bug，所以本文会继续沿用这个版本的主题。

从hexo的主题官网搜索框里找到stun，点开页面之后，点击页面内github图标，打开项目页面。认真阅读项目Readme文件，了解如何安装和配置主题。

第一步，切换到你的hexo站点目录下，克隆项目文件到themes/stun文件夹内。

$ git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun

第二步，去Hexo 根目录的_config.yml文件里修改渲染主题，就算完成了切换主题。

theme: stun

接下来，你需要分清下面这两个配置文件的作用：

  • Hexo 根目录下的 _config.yml。这是站点配置文件，里面的配置作用于整个网站。

  • Stun 根目录下的_config.yml。这是主题配置文件，里面的配置只对当前主题生效。

由于我选择的这个主题比较特别，还需要单独下载另一个插件辅助渲染。

npm install --save hexo-render-pug

美化主题

新增自定义页面

请参考官方文档-添加新页面，我想要新增四个页面，分别是用来展示分类、标签、阅读书目以及自我介绍。

image-20220726175704266

第一步，启用分类页，标签页，阅读页，博主页。

hexo new page categories
hexo new page tags
hexo new page read
hexo new page about

第二步，找到 themes\stun\languages目录下的语言文件进行修改。

# 导航栏菜单
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 博主
  read: 阅读
# 网站底部
footer:
  powered: 由 %s 大力支持
# 提示信息
prompt:
  copy_success: 恭喜亲亲，复制成功咧
  copy_error: 哎呀，复制失败了

第三步，找到 themes\stun\_config.yml 修改，图标的名称可以在https://fontawesome.com/v4.7.0/icons/获取。

menu:
  home: / || fas fa-home
  archives: /archives/ || fas fa-folder-open
  categories: /categories/ || fas fa-layer-group
  tags: /tags/ || fas fa-tags
  about: /about/ || fas fa-user
  read: /read/ || fas fa-book

最后一步，修改站点配置文件，就完成了自定义页面的添加。

language: zh-CN

展开文章目录

image-20220726180109353

修改主题配置文件。是否始终展开所有文章目录。true：始终展开，false：当文章中对应的标题到达顶部时自动展开。

toc: 
 # 是否始终展开所有文章目录。true：始终展开，false：当文章中对应的标题到达顶部时自动展开。
   expand_all: true

顶部栏设置

image-20220726180137179

将自己喜欢的图片复制后放到主题的资源配置文件夹中，比如Stun主题就是myblog\themes\stun\source\images文件夹，我将图片命名为3.jpg，如下修改主题配置文件。

header:
  # 网站顶部的高度（设置为百分数，表示所占屏幕高度的百分比。支持所有 CSS 长度单位）
  height: 60%
  # 顶部背景图片
  bg_image:
    enable: true
    # 填写图片路径或链接，图片放在myblog\themes\stun\source\images
    url: /images/3.jpg
  # 顶部背景图的遮罩效果
  mask:
    enable: true
    # 透明度（取值：0 ~ 1）
    opacity: 0.1

底部栏信息

image-20220726180152066

与修改顶部栏相似，修改主题配置文件。

footer:
  # 顶部背景图
  bg_image:
    # 是否启用
    enable: true
    # 填写图片路径或链接
    url: /images/1.jpg
  mask:
    enable: true
    # Opacity of mask (value: 0 ~ 1)
    opacity: 0.5
    
  copyright:
    enable: false
  # Hexo 链接（Powered by Hexo）
  powered:
    enable: true
  # 备案信息（只有中国开发者会用到）详情: http://www.miitbeian.gov.cn/
  beian:
    enable: true
    icp: 冀ICP备19023374号
  # 支持任何自定义文本，支持 HTML（例如：托管于 <a href="https://pages.github.com/" rel="noopener" target="_blank">Github Pages</a>）
  custom:
    enable: true
    text: 君匡博客-为了成为更好的自己

侧边栏作者信息

image-20220726180213435

我就是将圆形头像复制到了主题的资源配置文件夹，修改主题配置文件。

author:
  #侧边栏头像
  avatar:
    #填写图片路径或链接
    url: /images/君匡.jpg
    #是否显示为圆形
    rounded: true
    #头像透明度（取值：0 ~ 1）
    opacity: 1
    #hover 动画，可选值：trun(旋转) 或 shake(抖动)
    animation: trun
  #格言
  motto: 为了成为更好的自己    

社交链接

image-20220726180236345

如果不想启用某个社交链接，直接注释掉即可，修改主题配置文件，

#`||` 分隔符前面表示社交链接的链接或信息，后面表示社交链接图标。
#图标的名称在这里查找：https://fontawesome.com/v4.7.0/icons/
#如果你找不到想要的图标，可以考虑用文字来代替图标显示。
#通过添加 `origin:` 前缀即可显示文字。例如：`origin:知` 会以 `知` 代替图标显示。
social:
  github: https://github.com/JunKuangKuang/hexo-abbrlink3 || fab fa-github
  zhihu: https://www.zhihu.com/people/ke-en-da-di-27 || origin:知
  bilibili: https://space.bilibili.com/130257724/article || origin:Bili
  wechat: junxiaokuang.jpg || fab fa-weixin
  jianshu: https://www.jianshu.com/u/9e90f8e6089c || origin:简书
  csdn: https://blog.csdn.net/qq_41461536 || origin:CSDN
  toutiao: https://www.toutiao.com/c/user/token/MS4wLjABAAAAYXwxuP1jBhP4f6VzzfZ9PMXOPQXZKg5iFtjHQyKEAvM || origin:头条号
  
  #你可以自行添加这里没有的社交链接，格式如下：
  #xxx: xxx || (origin:)xxx
  
#社交链接的一些设置
social_setting:
  #是否启用
  enable: true
  #是否只显示图标
  icon_only: true 

找到 languages 目录下的语言文件zh-CN.yml，对应于鼠标经过图标时，显示的文字。

social:
  juejin: 掘金

开启fancybox

开启fancyBox

点击图片会放大到全屏幕，左右点击会切换当前文章内的所有图片，再点击空白处会恢复如初。修改主题配置文件。

fancybox: true

代码溢出换行

image-20220726180800325

对于程序猿来说，一行代码过长是很容易遇见的，修改主题配置文件。

codeblock:
 # Whether to wrap when code overflow.
 word_wrap: true

Pjax

Pjax 结合 pushState 和 ajax 技术， 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。

pjax:
  enable: true

已知问题有两个：

  • 不兼容 MathJax（必须手动刷新页面一次后，MathJax 才能正常使用，KaTex 可以正常使用）。

  • 有些 JS、CSS 文件只会在特定的页面加载，如果启用了 Pjax，则会在所有页面加载。

卜蒜子统计

image-20220726180849619

修改主题配置文件。

busuanzi:
  # 是否启用
  enable: true
  # 统计站点用户
  site_uv:
    enable: false
  # 统计站点浏览数量
  site_pv:
    enable: true
  # 统计每篇文章的 PV 数量
  post_pv:
    enable: true

favicon图标设置

image-20220726180921899

将你自己做的指定像素大小的图片放在文件夹themes\stun\source\images\icons，修改配置文件。

favicon:
  small: /images/icons/16x16.jpg
  medium: /images/icons/32x32.jpg

quicklink

使浏览器在空闲时间预取可视区内的链接，以加快后续页面的加载速度。修改主题配置文件。

quicklink:
  # 是否启用。这里启用之后并不会对所有页面生效，你还需要进行下面的设置
  enable: true
  # 设置 home 页面和 archive 页面是否启用
  home: true
  archive: true

感谢

感谢19年8月份的自己，能够坚持到现在。

官方文档致敬

hexo的主题官网

君匡
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
hexo主题应用
静Yu的博客
10-20 1万+
选择哪个全凭自己的喜好。我选择的一个主题是stun，官网效果图安装主题stun安装依赖在hexo根目录下执行现在直接应用了一个框架，后期的还需要进行美化工作。
基于Hexo+hexo-theme-stun搭建blog网站
Jianyang_usst的博客
08-17 201
Hexo是一个快速、简洁且高效的博客框架。我们可以使用Markdown写文章，然后通过Hexo生成静态网站，Hexo的主题非常丰富，很多你见过的博客都是用它生成的。
Hexo+stun主题+Gitee5分钟快速搭建你的个人Blog
前端程序员、项目经理、人工智能博主
12-17 955
其他具体相关配置和文件目录说明可参考文档->https://theme-stun.github.io/docs/zh-CN/guide/quick-start.html。首先在码云上创建一个仓库，建议是仓库名用用户名，这样的话生成的gitee pages的域名很短。这样的话，新建文章时还会建立一个同名的文件夹，我们可以图片放在这个文件夹下。看你自己创建的仓库图中指示的箭头是否都跟你自己的个人用户名称一样。root设置为仓库名(我这里没有子目录，就设置为空就行)。(在下面的每次配置中，对根目录的。
Hexo结合Stun静态博客搭建从入门到入土
BothSavage
12-19 1002
摘要 安装npm，安装hexo相关依赖，安装主题stun 修改hexo配置，修改stun配置，部署到github，gitee实现静态访问 给博客加上全局搜索，访问量统计 hexo博客编写模板 tips: 以下{$xxx}均为用户自定义 搭建环境 创建仓库 1.github 仓库命名为：{$你的ID}.github.io 2.gitee 仓库命名为：{$你的ID} 仓库名大小写一致，访问路径也是 环境安装 1.安装npm https://nodejs.org/en/download/
hexo-theme-stun::unicorn: 优雅的 Hexo 主题
07-24
一个漂亮、简洁的 Hexo 主题 语言: | :sparkles: 演示 未读代码 如果你准备长期使用 «Stun» 主题，并希望展示在这里，你只需在 README 中填入你的网站，然后提交 PR 即可。 :crystal_ball: 特性 简洁 & 快速 & 易用 & 可定制性高 响应式设计 二级导航菜单 支持图片懒加载 支持 Pjax 支持 PWA 支持 Fancybox 支持 Quicklink 支持 MathJax、KaTex 支持 Gitalk、Valine、Livere、Disqus、Utterances 评论 瀑布流式的相册页面 内置谷歌广告，一键开启 代码高亮，多种配色可选 好看的背景特效 超详细配置文档 :package: 安装 安装 «Stun» 进入 Hexo 根目录，执行指令： $ git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun 该指令
基于Hexo的安静优雅主题Ayer设计源码
最新发布
04-07
Hexo主题Ayer：基于Javascript构建，包含172个文件，包括47个EJS模板文件、36个Stylus样式文件、27个JavaScript文件、19个YAML配置文件、11个JPG图像文件、9个PNG图像文件、5个Markdown文档、3个SVG文件和2个CSS样式...
Hexo之hexo-theme-redefine-main博客主题
04-01
在众多的Hexo主题中，“hexo-theme-redefine-main”是一个流行的选择，用于构建美观且功能丰富的个人博客。这个主题以其独特的设计和丰富的自定义选项，帮助用户快速搭建个性化的网站。 首先，让我们深入了解Hexo的...
Hexo的material-x主题
02-15
Hexo的一款很美的主题，简洁，不花里胡哨，推荐使用。 本来地址在GitHub上，考虑下载很慢于是打包、放在CSDN上。 原地址:https://github.com/xaoxuu/blog-example
hexo next主题
06-29
Next主题是Hexo的官方推荐主题之一，它提供了多种布局选择，包括个人博客、作品展示和文章列表。Next的特点包括： 1. **响应式设计**：无论在桌面、平板还是手机上，Next都能提供良好的阅读体验。 2. **多语言支持*...
使用Github pages + Hexo 搭建个人博客
FirMoveBrick的博客
07-22 8615
入学以来，搭建个人博客是我如果以来想实现的愿望之一，原因是看着那些想当程序员的师兄师姐们都有属于自己的个人博客。 小编曾使用过WordPrass搭建个人博客 但最后权衡利弊，选择Github pages + Hexo 搭建个人博客。 如何使用Github pages + Hexo？ 如何使用Github pages + Hexo搭建个人博客，在这里小编是阅读朋友写的个人博客使用 Github pages + Hexo 建立个人博客网站，十分有帮助 Hexo模板挑选 可以在上面寻找自己喜欢的模板，该网站是官
hexo-theme-obsidian:He黑暗的Hexo主题，React灵敏，简单但优雅
04-28
Hexo主题：黑曜石 v1.x | ɢɴᴇᴅsɪɢɴᴇᴅ＆ᴄᴏᴅᴇᴅʙʏɪᴛʀɪᴀᴍᴏɴᴅ 黑暗的Hexo主题，React灵敏，简洁而优雅。 | :China:| 我正在开发一个名为全新主题，因此当前未积极维护该主题。 如果您来自我的博客网站，则显示的主题是新主题。 查看新的主题屏幕截图 更多屏幕截图 分类页面 分类等级 档案 文章 安装 git clone https://github.com/TriDiamond/hexo-theme-obsidian.git obsidian 用法 激活主题 打开Hexo配置文件_config.yml ，将主题设置为obsidian --- theme : obsidian 安装所需的软件包 首先打开您的终端，并在主题文件夹obsidian cd 。 cd themes/obsidian 然后运行npm以安装该主题的所有必需软件包
stun、turn、ice介绍
一步一脚印
01-12 6434
在介绍stun、turn、ice前，不得不说一个很重要的东西：NAT。 NAT也是上面三个的基础。 NAT模式 Network Address Translation，网络地址转换。 网络分为内网和外网。有一个道理：内网可以访问外网，但是外网并不能访问内网。 而NAT的出现解决了这个问题，有了NAT的存在，外网也可以访问内网（前提是内网需要先访问外网）。 NAT包含四种类型：
stun技术原理与实现(一)——背景
木头骑士的旋转木马
07-07 3818
目前支持我们互联网的基石，IPv4网络地址最初定义于1981年，至今也没有什么变化。当时全世界的计算机不过几百台，IPv4毫无压力，但其32位的地址结构早已不足以支撑现在庞大的互联网。 虽然出现了解决这一问题的IPv6，但是很难平滑过度，而今解决时间上数十万终端连入互联网的，是NAT技术。NAT技术在缓解ipv4不足，以及带来安全性提升的好处的同时，也带来了一些问题。下面就来对NAT的原理、好处
stun详解
04-15 1898
STUN是RFC3489规定的一种NAT穿透方式，它采用辅助的方法探测NAT的IP和端口。毫无疑问的，它对穿越早期的NAT起了巨大的作用，并且还将继续在NAT穿透中占有一席之地。   STUN的探测过程需要有一个公网IP的STUN server，在NAT后面的UAC必须和此server配合，互相之间发送若干个UDP数据包。UDP包中包含有UAC需要了解的信息，比如NAT外网IP，POR
STUN详解
weixin_34378969的博客
01-09 531
STUN是RFC3489规定的一种NAT穿透方式，它采用辅助的方法探测NAT的IP和端口。STUN的探测过程需要有一个公网IP的STUN server，在NAT后面的UAC必须和此server配合，互相之间发送若干个UDP数据包。UDP包中包含有UAC需要了解的信息，比如NAT外网IP，PORT等等。UAC通过是否得到这个UDP包和包中的...
stun 安装和配置
杨江的IT分享专栏
11-17 9682
为什么要安装stun server？ 我的手机在不同的防火墙后面，防火墙的NAT可能配置不合适VOIP，这就需要stun server帮助进行NAT地址翻译。stun只是工作在SIP协议栈上，不负责处理RTP语音流数据。stun server 源码 最新版本0.97 下载地址 http://sourceforge.net/projects/stun/files/stun/0.97/我是下载到/us
vs code主题_VS Code的10个Pretty Light主题
weixin_26738395的博客
09-09 5211
vs code主题The number of options you have when it comes to selecting a theme for VS Code is almost infinite. I’ve written an article before which went over pretty themes for VS Code. However, one attent...
hexo+yilia建立一个自己的博客.docx
04-05
Hexo yilia是一款受欢迎的博客主题，提供了丰富的功能和美观的界面，使得建立一个个性化的博客变得轻而易举。本文将介绍如何使用Hexo yilia建立一个自己的博客，并且分享一个优化方案的详细步骤。 首先，要建立一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值