hexo theme ocean 优化の实记

爱学习的卡比兽

已于 2022-04-21 21:12:20 修改

阅读量744

点赞数 1

分类专栏：博客搭建文章标签： html

于 2022-04-10 16:21:30 首次发布

本文链接：https://blog.csdn.net/qq_31537885/article/details/124068728

版权

博客搭建专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文档详细介绍了如何优化Hexo Ocean主题，包括调整主页视频蒙版透明度、实现侧边栏自动隐藏、设置相册功能、定制鼠标样式以及使用免费CDN。此外，还提供了部署自定义静态HTML的方法和B站外链的插入方式，帮助提升博客的视觉效果和用户体验。

摘要由CSDN通过智能技术生成

传送门：
Github hexo-theme-ocean
Ocean 中文文档
 关于 Ocean 使用中的问题

页面优化

主页视频前置蒙版不透明度

themes/ocean/source/css/_partial/ocean.styl 中
.video-overlay background-color rgba(178, 191, 204, .6) → background-color rgba(178, 191, 204, .3)

侧边栏自动隐藏

于themes\ocean\source\css_partial\layou.styl

// Media Query
@media (min-width: 768px)
  .jumbotron
    margin-bottom 6rem

  .content
    margin-right aside-width

  .sidebar
    right 0
    background-color white

  .navbar-toggle
    display none

删除相关控制样式的css, 最终修改为:

// Media Query
@media (min-width: 768px)
  // .jumbotron
  //   margin-bottom 6rem

  // .content
  //   margin-right aside-width

  .sidebar
    // right 0
    background-color white

  // .navbar-toggle
  //   display none

PS：可于themes/ocean/source/css/_variables.styl 调整侧边栏宽度 aside-width

功能优化

相册功能

albums: [
        ["1", "https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/about.jpg"],	# 线上链接
        ["2", "gallery/00.jpg"],		# 本地路径
        ["3", "gallery/01.jpg"],
        ["4", "gallery/02.jpg"],
        ]

鼠标样式

于themes/ocean/source/css/style.styl 开头添加

//  普通指针样式  // 可于`https://zhutix.com/tag/cursors/`挑选样式
body
  cursor url(https://cdn.jsdelivr.net/gh/snorlaxse/jsDeliver/theme/cursor/ComixCursors-White/Comix_White_Pointer.cur),default

// 链接指针样式
a
  &:hover
    cursor url(https://cdn.jsdelivr.net/gh/snorlaxse/jsDeliver/theme/cursor/ComixCursors-White/Comix_White_Link.cur),pointer

cdn

使用jsDeliver+github搭建免费的cdn
免费CDN：jsDeliver+Github 使用方法

![](https://cdn.jsdelivr.net/gh/snorlaxse/jsDeliver/cover/gundam00.jpg)

部署自定义静态HTML

将相应项目文件夹放置于 source下
于_config.yml中修改：

# 跳过文件夹下所有子文件夹和文件
skip_render: 
  - "文件夹名/**    # ex. "- demo/**/*"

b站外链

安装插件

npm install hexo-tag-bili --save

在md文件中编辑：

<div 
     style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe 
            src="//player.bilibili.com/player.html?aid=43224979&bvid=BV1ob411S7gM&cid=75780544&page=1"
            scrolling="no" 
            border="0" 
            frameborder="no" 
            framespacing="0" 
            allowfullscreen="true" 
            style="position: absolute; width: 100%;height: 100%; left: 0; top: 0;"> 
    </iframe>
</div>