博客个性化笔记----基于Ocean

Posted on 2021-12-19 Edited on 2022-01-30 In Blog Views:

记录博客在使用 Oceon 主题时进行的各项改动，根据置顶◇代办◇与更新记录记录的更新顺序排序.

封面 [ID:89138905].

注意，本博客已更换为 NexT主题.

更新首页视频

在/themes/ocean/source/images/ocean中替换相关视频. 如果想替换文件名，打开/themes/ocean/layout/_partial/ocean.ejs，修改对应代码：

<div class="video-media">
  <video playsinline="" autoplay="" loop="" muted="" data-autoplay="" poster="<%- theme.ocean.path %>ocean.png"
    x5-video-player-type="h5">
    <source src="<%- theme.ocean.path %>ocean.mp4" type="video/mp4">
    <source src="<%- theme.ocean.path %>ocean.ogv" type="video/ogg">
    <source src="<%- theme.ocean.path %>ocean.webm" type="video/webm">
    <p>Your user agent does not support the HTML5 Video element.</p>
  </video>
  <div class="video-overlay"></div>
</div>

将其中的文件名改为自己的文件名即可.

开启Gallery功能

按照官方文档相关部分进行设置.

添加照片:

打开/source/gallery/index.md，修改Front-matter部分：

---
title: Gallery
author: YourName
albums: [
        ["address of image1","description"],
        ["address of image2","description"],
        ["address of image3","description"],
        ]
#date: Date
#type: gallery
#layout: "gallery"
---

如果操作完后无法正常显示照片，参考官方文档中的改进图片加速方法.

新增Favorites页面

创建一个 page 命名 favorites： $ hexo new page favorites
在 /themes/_config.yml 文件新增一个菜单：
收藏: /favorites

-修改 /themes/ocean/source/css/_partialnavbar.styl 文件中应该是第 35 行，favorites ，展示收藏图标，注意顺序，如果对菜单顺序不理解，看这里. 编辑 favorites 页面，格式如下：

# 样机 Mockups

<div class="card-quote">

> ![Graphics](/images/logos/lstoreLogo.svg)
> ## Graphics
> 高质量的样机素材
> [https://www.ls.graphics](https://www.ls.graphics)

> ![sketchsheets](/images/logos/sketchLogo.svg)
> ## Sketchsheets
> Sketch 稿件的样机素材
> [https://sketchsheets.com](https://sketchsheets.com)

</div>

更新icon

修改 /themes/_config.yml 文件，大约第10行:

# Miscellaneous
favicon: /filename.ico          #这里
brand: /images/filename.png     #这里

# Ocean Video
# Because I put videos in multiple formats on the same path, I just labeled the path here.
ocean:
  overlay: true
  path: /images/ocean/
  brand: /images/filename.png   #这里

分别将对应图片/图标放在/themes/ocean/source、/themes/ocean/source、/themes/ocean/source/images中.

更新404页面.

直接更换/themes/ocean/source/404.html即可. 如果只想更换改主题404页面的图片，替换 /themes/ocean/source/images/forrestgump.png图片即可.

背景添加动态线条效果

在/Hexo/themes/ocean/layout/layout.ejs文件中添加如下代码：

<!--动态线条背景-->
<script type="text/javascript"
color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

其中： color：表示线条颜色，三个数字分别为(R,G,B)，默认：（0,0,0） opacity：表示线条透明度（0~1），默认：0.5 - count：表示线条的总数量，默认：150 zIndex：表示背景的z-index属性，css属性用于控制所在层的位置，默认：-1

如果想要实现随机线条颜色效果，将上述代码中的链接内的代码拷贝至本地，将其中添加随机生成颜色代码后引用. 然后将color参数删除. 下面是我修改的随机颜色代码.

function l() {
      var randomColor = Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' +Math.floor(Math.random() * 256)
      var i = j("script"),
          w = i.length,
          v = i[w - 1];
      return {
          l: w,
          z: o(v, "zIndex", - 1),
          o: o(v, "opacity", 0.5),
          c: o(v, "color", randomColor),
          n: o(v, "count", 99)
      }

添加点击特效

参考文章纯Javascript实现鼠标点击特效（烟花特效）.

在/Hexo/themes/ocean/layout/layout.ejs文件中添加如下代码：

<!-- 页面点击特效-->
<script type="text/javascript" src="/js/click.js"></script>

在目录/themes/ocean/source/js中新建文件click.js，填入参考文章中的代码.

如果想要自定义颜色，修改代码中数组const colours = ["色值1", "色值2", "色值3", "色值4", "色值5"];中色值即可.

添加博客隐藏功能

参考hexo-hide-posts官方文档

修复Category页面无法正确显示标题的错误

研究完才发现有人已经pr过了，详见修复主题关于catefories和tags页显示网页标题为underfine问题.

加入博客评论功能

详见Ocean官方文档相关部分. 此博客仅使用了Gitalk.

实现图片懒加载

使用Hexo插件hexo-lazyload-image实现. - 运行代码$ npm install hexo-lazyload-image --save - 在 /themes/_config.yml 文件末尾加上以下代码：

lazyload:
enable: true
onlypost: false # optional
loadingImg: # optional eg ./images/loading.gif 这里填写你的懒加载图片地址，请提前将其放在博客图片库中.
isSPA: false # optional
preloadRatio: 3 # optional, default is 1

- 配置相关参数： - onlypost If true, only the images from post or page will support lazy-load. If false, the whole images of your site will use lazy-load, including the images dist from your theme, but not including the background images from CSS style.

loadingImg If you keep the value nothing (by default), then it will use the default loading image. If you want to customize the image, then you need to copy your loading image to your current theme image folder and then change this path to find it.
isSPA For performance considering, isSPA is added. If your theme is a SPA page, please set it as true to make the lazy loading works, If true, searching for each image during scrolling to support SPA page, If false (default value), the performance would be the best.
preloadRatio This option is for a better experience and default value is 1. This ratio means to pre-load the images where is within how many ratios than current screen size, even these images are not in current view point.
取消不需要的图片懒加载
<img no-lazy src="abc.png" />
以 Ocean 主题为例，修改/themes/ocean/layout/_partial/ocean.ejs中所有<img>标签, 修改/themes/ocean/layout/_partial/sidebar.ejs中所有<img>标签.

增加博客加密功能

参考hexo-blog-encrypt官方文档. 按钮样式修改在/node_modules/hexo-blog-encrypt/lib/hbe.style.css中.

END

如果你有什么别的更好的个性化方案，请与我联系，一同进步！