看一看瞧一瞧,再决定做不做
示例站:cungudafa.top
现在看这个:cungudafa.js.org
预览视频: bilibili
由于sakura最近没有再更新了,我对之前的魔改笔记进行了调整和整理,开源hexo-theme-sakuraplus版本。
Banner
图片MathJax
TOC
目录Google Analytics
)和文章字数统计等功能(需要安装hexo-wordcount)在config设置
)
使用方法
当你看到这里的时候,应该已经有一个自己的 Hexo 博客了。如果还没有的话,不妨使用 Hexo 和 Markdown 来写博客和文章。
点击 这里 下载 master
分支的最新稳定版的代码,解压缩后,将 hexo-theme-sakuraplus
的文件夹复制到你 Hexo 的 themes
文件夹中即可。
当然你也可以在你的 themes
文件夹下使用 Git clone
命令来下载:
git clone https://gitee.com/cungudafa/hexo-theme-sakuraplus.git
修改 Hexo 根目录下的 _config.yml
的 theme
的值:theme: hexo-theme-sakuraplus
_config.yml
文件的其它修改建议
请修改 _config.yml
的 url
的值为你的网站主 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
Настройка основных пунктов меню, их названий, путей URL и значков.
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:
``` Вот перевод текста на русский язык:
Советы: обратите внимание на написание вторичных меню и иконок.
Поскольку встроенная подсветка кода в 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:
В этой теме также используется плагин hexo-generator-json-content для Hexo для создания поиска по содержимому. Команда для установки:
npm install hexo-generator-json-content --save
Если вы хотите отображать количество слов и время чтения в статьях, установите плагин hexo-wordcount.
Команда для установки:
npm i --save hexo-wordcount
Эта тема добавляет поддержку эмодзи, используя плагин 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:
В этой теме также используется плагин 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
, что означает успешную установку.
Зарегистрируйтесь на сайте DaoVoice и получите app_id
. Затем добавьте app_id
в файл _config.yml
темы.
# Online contact ##онлайн-чат https://www.daocloud.io/
daovoice:
enable: false
app_id: f6b2a0b1 ##здесь замените на свой appid с DaoVoice
Следуя инструкциям на официальном сайте, настройте 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
---
В разделе _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 # Общее количество посетителей
Необходимо зарегистрироваться на widgetpack.com.
# widgetpack 星星评分
# To get your ID visit https://widgetpack.com
widgetpack:
enable: true #false
id: 23889 #<app_id>
color: fc6423
Другие дополнительные функции
Необходимо зарегистрироваться на официальном сайте weatherdt.com.
# weatherdt 显示 http://weatherdt.com/
weather:
enable: false
app_id: yqRrzxwtvs ##这里替换成你的appid
Дополнительная информация:
- Страница Douban для чтения книг и просмотра фильмов: Douban Reading and Movies.
- Карта посетителей: Карта посетителей.
Включая анализ 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
Фон и некоторые общие оптимизации были настроены как необязательные параметры в файле конфигурации темы (чтобы избежать конфликтов анимации, рекомендуется использовать только один из параметров фона и эффектов щелчка), если вы хотите добавить больше стилей, вы можете оставить сообщение или 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 # 星星跟随坠落(大内存)
Вот несколько заметок о модификации:
Резюме
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 )