Hexo站点建设之——修改网站图标

一 概述

  • 自建站点为何显示的是主题图标
  • 如何查找网站图标
  • 如何修改网站图标

二 自建站点为何显示的是主题图标

使用hexo搭建好的站点,网站的图标默认显示的是,右键检查,网站源码—>Elements标签下—>head,可以看到Hexo next主题默认的网页图标使用的是hexo-theme-next/source/images/favicon-next

三 如何查找网站图标

从下列站点下载免费图标,并修改名字为favicon对应的名字

四 如何修改网站图标

/themes/next/_config.yml中修改成自己的图标

favicon:
  small: /images/favicon.ico
  #medium: /images/favicon-32x32-next.png
  medium: /images/favicon.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

五 效果预览

### 关于Hexo博客页脚美化的最佳实践 对于希望提升Hexo博客视觉效果的用户来说,优化页脚是一个重要的方面。在进行这一工作时,可以借鉴已有的经验来实现更优的结果。 #### 使用官方推荐的方法调整样式 当考虑对基于Material主题的Hexo博客进行自定义时,建议优先采用官方文档中的指导原则[^1]。这不仅有助于保持系统的稳定性和兼容性,而且能确保随着版本迭代而获得最新的特性支持。 #### 配置文件内的CSS覆盖 如果目标是改变特定区域如页脚的设计,则可以在`_config.yml`或者相应子目录下的配置文件里引入额外的CSS规则。例如,在NexT主题环境下,可以通过编辑`scheme/Muse/layout/_partial/footer.swig`这样的模板文件路径来进行局部定制化处理[^2]。不过需要注意的是,直接修改源代码可能带来维护上的困难;因此提倡创建独立的静态资源文件夹用于存放私有样式的`.css`文件,并通过链接方式加载到页面中去。 #### 利用插件增强功能 除了直接编写HTML/CSS外,还可以探索Hexo社区提供的众多插件选项。某些专门针对外观改进设计的小工具或许正好满足需求——比如添加社交图标、版权说明或是返回顶部按钮等功能模块都能极大地丰富底部栏的内容构成[^3]。 ```html <!-- 在站点根目录下新建 source/css/custom.css 文件 --> <style> footer { background-color: #f8f9fa; padding: 2rem; } </style> <link rel="stylesheet" href="/css/custom.css"> ``` 上述方法提供了几种不同的途径来达到美化Hexo博客页脚的目的。每种策略都有各自的优点和适用场景,可以根据实际情况和个人偏好做出选择。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值