1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/cungudafa-hexo-theme-sakuraplus

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

hexo-theme-sakuraplus


:one: :soon: 看一看瞧一瞧,再决定做不做

Hexo主题Sakura由Hojun大佬修改自WordPress主题Sakura,感谢原作者Mashiro.

由于sakura最近没有再更新了,我对之前的魔改笔记进行了调整和整理,开源hexo-theme-sakuraplus版本。

特性

  • 简单漂亮,文章内容美观易读
  • 响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页轮播文章及自动切换 Banner 图片
  • 背景壁纸切换(增加)
  • 时间轴式的归档页
  • 支持pjax刷新
  • 友情链接页面 (增加了config可选设置提示语和本网站信息)
  • 支持在首页的音乐播放和视频播放功能
  • 支持文章置顶和文章打赏(增加了提示语)
  • 支持 MathJax
  • TOC 目录
  • 缓加载动画
  • 增加了相册页面(一个快速查找文章的接口,后面可能会美化)
  • 增加了豆瓣读书、豆瓣电影页面
  • 增加了个性说说在线发布页面(增加了)
  • 优化了文章底部作者信息不填写时显示为空的问题
  • 优化了Valine评论模块(最新可定制表情等)
  • 可设置复制文章内容时追加版权信息(可设置是否追加版权信息)
  • 增加了 DaoVoice在线聊天功能
  • 增加了可设置代码块相关(是否显示名称、是否可复制,是否可收缩,是否可折行)
  • 增加了ICP备案信息显示(可选)
  • 增加了标签云页面(如果需要更多功能,后面可补充)
  • 增加了看板娘动画
  • 增加了可设置首页音乐提示
  • 增加了不蒜子统计、谷歌分析(Google Analytics)和文章字数统计等功能(需要安装hexo-wordcount)
  • 优化了自我介绍页面
  • 增加了自定义logo的接口
  • 增加了fancybox查看大图功能(可选)
  • 增加了外链转知乎卡片形式
  • 增加了谷歌分析和百度分析
  • 增加了widgetpack星星评分
  • 多种背景和点击动画(可选设置)
  • 优化css和js在config可配置
  • 优化文章图片阴影显示和引用样式(阅读butter)
  • 增加播放器隐藏选项
  • 新增了分析页面(echarts图)
  • 归档页新增文章日历(echarts图)
  • 新增文章描述为空时,自动获取文章前50字
  • 新增404页面
  • 新增左侧悬浮框(回到顶部,打开左侧目录,跳转评论,黑夜模式,背景音乐播放在config设置

:two: :fast_forward: 使用方法

1.下载

当你看到这里的时候,应该已经有一个自己的 Hexo 博客了。如果还没有的话,不妨使用 Hexo 和 Markdown 来写博客和文章。

点击 这里 下载 master 分支的最新稳定版的代码,解压缩后,将 hexo-theme-sakuraplus 的文件夹复制到你 Hexo 的 themes 文件夹中即可。

当然你也可以在你的 themes 文件夹下使用 Git clone 命令来下载:

git clone https://gitee.com/cungudafa/hexo-theme-sakuraplus.git

2.配置

2.1切换主题

修改 Hexo 根目录下的 _config.ymltheme 的值:theme: hexo-theme-sakuraplus

_config.yml 文件的其它修改建议

  • 请修改 _config.ymlurl 的值为你的网站主 URL(如:http://xxx.github.io)。

  • 如果你是中文用户,则建议修改 language 的值为 zh-CN

  • 建议修改permalink,可修改为短链接。 安装插件:

    npm install hexo-abbrlink --save

    主配置文件修改和添加:

    #permalink: :year/:month/:day/:title/ #主题默认文章链接配置
    permalink: post/:abbrlink.html #修改
    
    ## 启用算法生成不重复文件编号,添加
    abbrlink:
          alg: crc16   #算法: crc16(default) and crc32
          rep: hex   #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制
    
    ``` **2.5. Создание страницы с комментариями (comment) (необязательно)**
    

Страница comment используется для отображения информации о комментариях блога. Если в вашем блоге в каталоге source ещё нет файла conmment/index.md, то вам нужно создать его. Команда для этого:

hexo new page "conmment"

Отредактируйте только что созданный файл /source/contact/index.md. Он должен содержать как минимум следующее:

---
title: 留言板
type: comment
layout: "comment"
date: 2020-04-21 20:17:58
photos: https://gitee.com/cungudafa/source/raw/master/img/bg/hyo/3.jpg
---

<h2 align="center">Есть что сказать?</h2>

<h2 align="center">Есть вопросы?</h2>

**Примечание**: эта функция комментариев зависит от сторонней системы комментариев. Чтобы она работала, необходимо активировать вашу систему комментариев.

**2.6. Создание страницы со ссылками (links) (необязательно)**

Страница links используется для отображения ссылок на дружественные ресурсы. Если в вашем блоге в каталоге source ещё нет файла links/index.md, то вам нужно создать его. Команда для этого:

```bash
hexo new page "links"

Отредактируйте только что созданный файл /source/links/index.md. Он должен содержать как минимум следующее:

---
layout: links
title: links
date: 2020-02-13 23:11:06
keywords: 友人帐
description: 
comments: true
photos: https://cdn.jsdelivr.net/gh/cungudafa/img/images/pic01.jpg
links:
  - group: 多站快速门
    desc: 
    items:
    - url: https://blog.csdn.net/cungudafa
      img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg
      name: CSDN
      desc: Мой технический стек
  - group: 友情链接
    desc: 
    items:
    - url: https://blog.csdn.net/cungudafa
      img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg
      name: CSDN
      desc: Мой технический стек
    - name: Общая навигация сайта
      url: https://cungudafa.js.org/
      img: https://cungudafa.top/img/avatar.png
      desc: cungudafa.js.org
---

Советы: Обратите внимание на пробелы перед текстом. Это важно!

В файле конфигурации темы добавлены требования к странице со ссылками. В этом файле можно напрямую указать информацию о вашем сайте.

# Информация о странице со ссылками, tips поддерживает язык html
mylinkinfo:
  enable: true
  tips: '<p><strong>Советы:</strong> Сайт не требует принудительного использования https, но рекомендуется использовать безопасные ссылки для изображений аватара!</p> <p style="font-size: 13px;color: #ff9999;"> 1. Пожалуйста, сначала <font color=#ff1234 size=5>добавьте ссылку на этот сайт</font>, оставьте комментарий на этом сайте и дождитесь одобрения администратора, чтобы добавить ссылку. <br>2. Отклонить рекламные сайты, приоритет отдаётся техническим блогам~<br>3. Для отмены ссылки на этот сайт или мёртвой ссылки администратор будет периодически удалять её.</p>'
  name: cungudafa
  desc: Человек, который ведёт блог
  url: https://cungudafa.top
  img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg

3. Настройка меню навигации

Настройка основных пунктов меню, их названий, путей URL и значков.

  1. Названия пунктов меню могут быть на китайском или английском языке (например, Index или Главная страница).
  2. Значки icon можно найти в Font Awesome v4.
menus:
  Главная страница: { path: /, fa: fa-fort-awesome faa-shake }
  Архив: { path: /archives, fa: fa-archive faa-shake, submenus: { 
    Статистика: {path: /analytics/ , fa: fa-line-chart },
    Теги: {path: /tags, fa: fa-tags }, 
    Технологии: {path: /categories/технологии/, fa: fa-code }, 
    Жизнь: {path: /categories/жизнь/, fa: fa-file-text-o } #, 
    #Ресурсы: {path: /categories/ресурсы/, fa: fa-cloud-download }, 
    #Размышления: {path: /categories/размышления/, fa: fa-commenting-o },
    #Перепечатки: {path: /categories/перепечатки/, fa: fa-book }
  } }
  Список: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
    Поговорить: {path: /artitalk/, fa: fa-commenting-o fa-commenting }, 
    Фотоальбом: {path: /photos/, fa: fa-photo },
    Удовольствие от чтения: {path: /books/, fa: fa-book },
    Следить за сериалами: {path: /movies/, fa: fa-film faa-vertical }
  } }
  Доска для сообщений: { path: /comment/, fa: fa-pencil-square-o faa-tada }
  Друзья: { path: /links/, fa: fa-link faa-shake }
  Пожертвовать: { path: /donate/, fa: fa-heart faa-pulse }
  О нас: { path: /, fa: fa-leaf faa-wrench , submenus: { 
    Я?: {path:
``` Вот перевод текста на русский язык:

Советы: обратите внимание на написание вторичных меню и иконок.

  1. Код с подсветкой

Поскольку встроенная подсветка кода в Hexo выглядит не очень хорошо, в теме используется плагин hexo-prism-plugin для Hexo. Для установки выполните команду:

npm i -S hexo-prism-plugin

Затем измените значение параметра highlight.enable в файле _config.yml в корне каталога Hexo на false и добавьте соответствующие настройки плагина prism. Основные настройки:

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess' # realtime/preprocess
  theme: 'tomorrow'
  line_number: false # default false
  custom_css:
  1. Поиск

В этой теме также используется плагин hexo-generator-json-content для Hexo для создания поиска по содержимому. Команда для установки:

npm install hexo-generator-json-content --save
  1. Плагин для подсчёта количества слов в статьях (рекомендуется)

Если вы хотите отображать количество слов и время чтения в статьях, установите плагин hexo-wordcount.

Команда для установки:

npm i --save hexo-wordcount
  1. Поддержка эмодзи (необязательно)

Эта тема добавляет поддержку эмодзи, используя плагин hexo-filter-github-emojis для Hexo, который преобразует синтаксис Markdown emoji (::, например :smile:) в интерактивные эмодзи. Команда для установки:

npm install hexo-filter-github-emojis --save

Добавьте следующие настройки в файл _config.yml в корне каталога Hexo:

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:
  1. Добавление поддержки RSS-подписки (необязательно)

В этой теме также используется плагин hexo-generator-feed для Hexo для генерации RSS. Команда для установки:

npm install hexo-generator-feed --save

Добавьте следующие настройки в файл _config.yml в корне каталога Hexo:

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

Выполните команды hexo clean && hexo g, чтобы перегенерировать файлы блога, и затем в папке public вы увидите файл atom.xml, что означает успешную установку.

  1. Добавление онлайн-чата DaoVoice (необязательно)

Зарегистрируйтесь на сайте DaoVoice и получите app_id. Затем добавьте app_id в файл _config.yml темы.

# Online contact ##онлайн-чат https://www.daocloud.io/
daovoice:
  enable: false
  app_id: f6b2a0b1 ##здесь замените на свой appid с DaoVoice
  1. Онлайн-страница для публикации историй

Следуя инструкциям на официальном сайте, настройте artitalk.js.org. Эта тема объединяет пользовательские настройки фона. Подробные инструкции можно найти в руководстве по настройке.

# 动态说说页面
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://artitalk.js.org
artitalk:
  appID: CiSXX5nyVSt0RIztkC1oLL9P-MdYXbMMI
  appKEY: vrfkqkuHou88MuRKfF3OeExc
  per: 7 #每页显示说说的数量
  username: cungudafa # Leancloud中设置的用户名
  placeholder1: 没有密码,不能评论! # 密码框提示语
  lazy: 1 # 加载动画1:加载,0:取消加载
  img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg #用户默认头像
  bgimg: https://gitee.com/cungudafa/source/raw/master/img/gif/Sitich/Sitich16.gif # 输入框小动画

| Категории | Нет                          | Классификация статей, макрокатегории, рекомендуется одна категория для одной статьи |
| --- | --- | --- |
| Теги       | Нет                         | Теги статьи, одна статья может иметь несколько тегов                              |
| Описание   | По умолчанию первые 40 символов | Краткое описание статьи |
| Ключевые слова | Заголовок статьи             | Ключевые слова для SEO |
| Политика перепечатки | cc_by                    | Правила перепечатки статьи: cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint или pay |

> **Примечание**:
> 1. Если атрибут photos не указан, на главной странице будет выбрана случайная картинка из файла bg в конфигурации темы, и изображение не будет отображаться в верхней части статьи.
> 2. Значение атрибута date должно быть уникальным для каждой статьи.
> 3. Рекомендуется заполнить теги и категории статьи.
> 4. Вы можете указать политику перепечатки для отдельной статьи в разделе front-matter статьи.

**Пример Front-matter**

```yaml
---
title: Введение в тему
date: 2020-05-20 09:25:00
---

Полный пример

---
title: Полное руководство по развертыванию hexo на Alibaba Cloud
author: cungudafa
authorLink: 'https://cungudafa.top'
avatar: 'https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg'
authorAbout: Автор, который записывает свои знания
tags:
  - nginx
  - https
  - SSL
categories: технологии
comment: false
photos: https://test.png
description: Краткое описание
abbrlink: ccbf
date: 2020-03-02 13:59:10
---

2. Статистика статей

В разделе _config.yml можно настроить некоторые параметры, такие как копирование кода, просмотр больших изображений, стиль внешних ссылок Zhihu и количество слов в статье.

# Активировать ли авторские права при копировании контента поста.
# minCharNumber: Разрешить копирование авторских прав после копирования определённого количества символов.
# 是否激活复制文章时追加博客和作者的版权信息.
copyright:
  enable: false
  minCharNumber: 120 # 至少复制多少个字符就追加版权信息.
  description: Эта статья защищена авторским правом, любое её использование должно сопровождаться указанием источника.

# Связанные с кодом
code:
  lang: true # 代码块是否显示 название
  copy: true # Можно ли копировать код
  shrink: true # Может ли код сжиматься
  break: false # Может ли код переноситься

# Просмотр больших изображений
fancybox:
  enable: true

# Внешний вид ссылок на Zhihu
linkcard:
  enable: true 

# Включить статистику слов (можно установить no_word_count: true в formatton)
# Не требуется, просто установите значение false или закомментируйте
word_count: true

# Статистика busuanzi(http://busuanzi.ibruce.info/)
# 不蒜子(http://busuanzi.ibruce.info/) 网站统计
busuanziStatistics:
  enable: true
  totalTraffic: true # Общий объём трафика
  totalNumberOfvisitors: true # Общее количество посетителей

3. Пятизвёздочная оценка

Необходимо зарегистрироваться на widgetpack.com.

# widgetpack 星星评分
# To get your ID visit https://widgetpack.com
widgetpack:
  enable: true #false
  id: 23889 #<app_id>
  color: fc6423

:hibiscus: Другие дополнительные функции

16. Погода

Необходимо зарегистрироваться на официальном сайте weatherdt.com.

# weatherdt 显示 http://weatherdt.com/
weather:
  enable: false
  app_id: yqRrzxwtvs ##这里替换成你的appid

Дополнительная информация:

  1. Страница Douban для чтения книг и просмотра фильмов: Douban Reading and Movies.
  2. Карта посетителей: Карта посетителей.

17. Анализ статей

Включая анализ Baidu и анализ Google, необходимо зарегистрироваться. (Необязательная операция)

# Add google analytics configuration
# 添加 Google Analytics 配置
googleAnalytics:
  enable: false
  id:

# Add baidu analytics configuration
# 添加 baidu Analytics 配置 https://tongji.baidu.com/
baiduAnalytics:
  enable: true # 百度分析
  id: b05d6287bdeab72f3886bffe3cff054a

Эффект предварительного просмотра

Пример сайта: cungudafa.top

Видео: Bilibili

18. Самостоятельная настройка

Фон и некоторые общие оптимизации были настроены как необязательные параметры в файле конфигурации темы (чтобы избежать конфликтов анимации, рекомендуется использовать только один из параметров фона и эффектов щелчка), если вы хотите добавить больше стилей, вы можете оставить сообщение или PR, чтобы добавить их по мере необходимости.

# Рекомендуется выбрать один вариант
js:
  hititle: false #浏览器搞笑标题
  KeyBlock: false #按键屏蔽,不能F12调试和查看源代码
  bg:
    sakura_petals: false  #仅在首页花瓣飘落(大内存)
    snow_petals: false # 雪花飘落(大内存)
    piao: false #飘动彩带
    live2d_widget: false #看板娘 需jq(大内存)
    bgchange: true # 是否开启壁纸切换
  clink:
    word: false #点击出现字效
    love: false #点击出现爱心
    cursor: false # 星星跟随坠落(大内存)

Вот несколько заметок о модификации:

  1. Логотип.
  2. Дополнительные функции.
  3. Ежедневное стихотворение, одно предложение API.

:new_moon_with_face: Резюме

Вклад сообщества

@cungudafa

Журнал изменений

2.4

Количество слов в тексте изменено на необязательный параметр, можно не отображать общее количество слов.

9.8 & 10.15

Обновлены valine и artitalk, добавлены комментарии gitalk в качестве опции.

6.9 6.2

Исправить стиль блоков кода (удалить плагин npm uninstall hexo-prism-plugin). Добавить плавающий фрейм слева (вернуться наверх, открыть левый каталог; работает на маленьком экране, иначе отображается только верхний каталог), перейти к комментариям, ночной режим, воспроизведение фоновой музыки (в настройках config установить bg_music).

5.28

Исправлен CSS (https://cdn.jsdelivr.net/gh/cungudafa/cdn/css/style.css) (ошибка главной страницы). Изменён стиль цитирования в статьях (предыдущий был нечётким). Добавлен стиль изображений в статьях (добавлена тень), для заголовков h1–h5 добавлены арабские цифры. Добавлены различные эффекты облаков тегов на странице тегов.

5.25

Исправлено: при отсутствии установленной статьи на главной странице отображалась картинка 404 (выбиралась случайным образом из фона). Добавлена страница анализа (диаграмма echarts), основанная на эффекте темы matery, разработанной drew. На странице архива добавлен календарь статей (диаграмма echarts). Заголовок теперь показывает количество просмотров. Автоматически выбираются первые 50 символов в качестве описания статьи.

5.23

Планируется изменить эффект отображения страницы статьи (оптимизация отображения блоков кода и изображений таблиц).

5.22

Переделать.

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/cungudafa-hexo-theme-sakuraplus.git
git@api.gitlife.ru:oschina-mirror/cungudafa-hexo-theme-sakuraplus.git
oschina-mirror
cungudafa-hexo-theme-sakuraplus
cungudafa-hexo-theme-sakuraplus
master