hexo-theme-ocean - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #linux #docker #nodejs #windows #cli #vue #awesome-list #security #mcp #openai #open-source

hexo-theme-ocean

(★ 495)

Ocean is a mobile-enabled Hexo theme based on the features in Hexo's default theme landscape.

파일 탐색기

최종 버전 다운로드 (.zip)

- de.yml
- default.yml
- es.yml
- fr.yml
- ja.yml
- ko.yml
- nl.yml
- no.yml
- pt.yml
- ru.yml
- zh-CN.yml
- zh-TW.yml
- - after-footer.ejs
  - archive-post.ejs
  - archive.ejs
  - article.ejs
  - footer.ejs
  - head.ejs
  - ocean.ejs
  - sidebar.ejs
  - totop.ejs
- archive.ejs
- categories.ejs
- index.ejs
- layout.ejs
- page.ejs
- post.ejs
- tags.ejs
- hexo-theme-ocean.jpg
- - 404.styl
  - _extend.styl
  - _feathericon.styl
  - _fonts.styl
  - _mixins.styl
  - _normalize.styl
  - _variables.styl
  - style.styl
- - jquery.fancybox.min.css
  - jquery.fancybox.min.js
- - forrestgump.png
  - hexo-inverted.svg
  - hexo.svg
- - busuanzi-2.3.pure.min.js
  - jquery-2.0.3.min.js
  - jquery.justifiedGallery.min.js
  - lazyload.min.js
  - ocean.js
  - pace.min.js
  - search.js
  - tocbot.min.js
- 404.html
- favicon.ico
_config.yml
LICENSE
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/zhwangart/hexo-theme-ocean

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd hexo-theme-ocean

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Ocean

Ocean is a mobile-enabled Hexo theme based on the features in Hexo's default theme landscape. Since I am a Designer and not a Coder, so please advise! I am very grateful to [youchen1992](https://github.com/youchen1992) for providing technical support during the Ocean production process.

[Preview](https://zhwangart.github.io)

[中文说明](https://zhwangart.github.io/2018/11/30/Ocean/)

![Screenshot](https://raw.githubusercontent.com/zhwangart/hexo-theme-ocean/develop/screenshots/hexo-theme-ocean.jpg)

## Install

``` bash
$ git clone https://github.com/zhwangart/hexo-theme-ocean.git themes/ocean
```

## Enable

Modify `theme` setting in `_config.yml` to `ocean`

``` yml
theme: ocean
```

## Update

``` bash
cd themes/ocean
git pull
```

## Configuration

let me know if you can’t find something.

``` yml
# Menu
menu:
  Home: /
  Archives: /archives
  Gallery: /gallery
  About: /about
  Links: /links
rss: /atom.xml

# Miscellaneous
favicon: /favicon.ico
brand: /images/hexo.svg

# 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/      # Video storage path, formats: mp4/ogg/webm
  brand: /images/hexo-inverted.svg      # Optional, a small logo

# Content
excerpt_link: Read More...

# fancybox
fancybox: true

# Local search
search_text: Search

# Gitalk
gitalk:
  enable: true
  clientID: # GitHub Application Client ID
  clientSecret: # Client Secret
  repo: # Repository name
  owner: # GitHub ID
  admin: # GitHub ID

# Valine
valine:
  enable: false    # Default: false.
  el: 'vcomments'    # The DOM element to be mounted on initialization.
  appId:    # Application appId from Leancloud.
  appKey:    # Application appKey from Leancloud.
  notify: false    # Mail notifier, Default: false.
  verify: true    # Validation code, Default: true.
  avatar: 'mp'    # Gravatar type.
  pageSize: '10'    # Number of pages per page.
  placeholder: '请输入...'    # Comment box placeholders.
```

The [feathericon](https://feathericon.com) in the menu is programmed ordely in "CSS `source/css/_partial/navbar.styl` " and can be changed or added if needed.

``` css
.nav-item
  &:nth-child(1)         // home
    .nav-item-link
      &::before
        content '\f12f'
  &:nth-child(2)         // archives
    .nav-item-link
      &::before
        content '\f12a'
  //&:nth-child(3)         // gallery
  //  .nav-item-link
  //    &::before
  //      content '\f1a9'
  //&:nth-child(4)         // about
  //  .nav-item-link
  //    &::before
  //      content '\f174'
```

## Plugins

+ [hexo-generator-search](https://github.com/hexojs/hexo-theme-landscape) Local search
	
  ```yml
  $ npm install hexo-generator-searchdb --save
  ```
  Then add the plugin configuration for hexo's configuration file `_config.yml` (note: not the theme's configuration file):
  
  ```yml
  # Hexo-generator-search
  search:
    path: search.xml
    field: post
    format: html
  ```

+ [hexo-generate-feed](https://github.com/hexojs/hexo-generator-feed) RSS

```yml
  $ npm install hexo-generator-feed --save
  ```
  
  Then add the plugin configuration for hexo's configuration file `_config.yml` (note: not the theme's configuration file):
  
  ```yml
  feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: ' '
      order_by: -date	
  ```
  
+ [hexo-generator-index-pin-top](https://github.com/netcan/hexo-generator-index-pin-top)
	
	``` bash
  $ npm uninstall hexo-generator-index --save
  $ npm install hexo-generator-index-pin-top --save
  ```

## Post poster

``` md
---
title: Post name

photos: [
        ["img_url"],
        ["img_url"]
        ]
---
```

## Gallery
Need to write in the head of the markdown, this is not a good way to write, I hope to get a better way to write on github.

``` md
---
title: Gallery

albums: [
        ["img_url","img_caption"],
        ["img_url","img_caption"]
        ]
---
```

## Toc

Use Tocbot to parse the title tags (h1~h6) in the content and insert the directory.

+ ocean/_config.yml

``` bash
	# Toc
  toc: true
	```
+ If Toc is turned on in ocean/_config.yml, then Tocbot will generate a Toc article directory in the title tag of each blog parsing content, but not all blogs require Toc, so in the Front-matter section of markdown Can be closed:

``` md
	---
  toc: false
  ---
	```

---