Плоская гексо-тема

hexo-theme-skapp

Описание Проекта

Тему скаппа автор написал из обсессивно-компульсивного расстройства, чтобы глаз радовал. . . крик. . .

Прикрепите адрес предварительного просмотра:demo

Эффект темы

языковая поддержка

Поддержка темы по умолчаниюzh-cn,enДва языка, если вам нужны другие языки, вы можете расширить его самостоятельно, написать соответствующий язык в виде файла yml и разместить его под темойlanguagesпод файл.

Как использовать

Пожалуйста, обратитесь к базовой конструкции шестнадцатеричного блогагексо официальный сайт, а затем выполните следующие операции после настройки проекта hexo.

Для всех следующих операций по умолчанию используется текущий путь к каталогу проекта блога hexo. Пожалуйста, введите проект самостоятельно.

Используйте git, чтобы клонировать тему в папку тем вашего проекта блога hexo.

cd themes && git clone https://github.com/Mrminfive/hexo-theme-skapp.git

После завершения клонирования корневой каталог будет_config.ymlв файлеthemeполе установлено наhexo-theme-skappи установите соответствующие зависимости узла:

npm install --save-dev hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign

После установки зависимостей запишите следующую конфигурацию в корневой каталог_config.ymlв файле

# Lunr
lunr:
  field: all
  fulltext: false
  path: assets/lunr/

# filter_cleanup
hfc_useref:
  enable: true
  concat: true

hfc_html:
  enable: true
  exclude:

hfc_css:
  enable: true
  exclude: 
    - '*.min.css'

hfc_js:
  enable: true
  mangle: true
  exclude: 
    - '*.min.js'

hfc_img:
  enable: false
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

hfc_favicons:
  enable: false
  src: img/blog-logo.png
  target: img/
  icons:
    android: true
    appleIcon: true
    appleStartup: false
    coast: false
    favicons: true
    firefox: false
    opengraph: false
    windows: true
    yandex: false

хорошо, на этом среда, необходимая для компиляции темы, завершена, вы можете использоватьhexo s --debugЛокальный предварительный просмотр теперь доступен.

Конфигурация темы

языковые настройки

изменить корень_config.ymlфайл, будетlanguageУстановите желаемый язык:

language: zh-cn

В настоящее время тема поддерживает следующие языки:

язык	код
English	en
Упрощенный китайский	zh-cn

меню настроек

изменить корень_config.ymlфайл, будетmenuУстановите следующим образом:

menu:
  home: / 
  archive: /archives
  about: /about

Элементы меню по умолчанию для темы:

ключевое значение	установить значение	Отображаемый текст (упрощенный китайский)
home	home: /	титульная страница
archive	archive: /archives	архив
about	about: /about	о

вaboutВстроенный с темами404Страницу также необходимо создать вручную, и способ создания следующий:

Создать страницу:

hexo new page about

Затем отредактируйте файл index.md в папке about в исходной папке:

---
title: 关于
date: 2017-07-29 00:50:51
type: about
layout: about
---

...(以下内容将渲染在关于页面中)

Страница 404 напрямую создает файл 404.md в исходном каталоге.Содержимое файла выглядит следующим образом:

---
title: 404 Page Not Found
date: 2017-08-04 23:36:59
type: error
layout: error
---

Конфигурация информации блога

Следующая конфигурация находится в корне_config.ymlсередина:

# Site
# 博客的标题
title: MINFIVE

# banner显示的子标题
subtitle: MINFIVE BLOG

# banner显示的简短介绍
subtitle_desc: 日常学习与兴趣交流

# seo关键字
keywords: minfive, minfive blog, 前端博客, 前端, 程序员, 前端开发, 全栈开发, node.js, javascript

# 博客介绍（同时用于seo）
description: 日常学习与兴趣交流的个人博客

# 个人介绍
introduction: 不思量，自难忘！

# 博客的favicon图标，支持本地及在线两种方式，本地请将图标放置于 themes/hexo-theme-skapp/source/img 目录下
favicon_ico: http://oo12ugek5.bkt.clouddn.com/blog/images/favicon.ico

# 博客的左上角logo图标，支持本地及在线两种方式
logo: http://oo12ugek5.bkt.clouddn.com/images/logo-text-white.png

# 头像/二维码（用于显示在底部）二选一
avatar: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
# qrcode: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png

# 文章的默认封面
default_cover: http://oo12ugek5.bkt.clouddn.com/images/default_cover.png

# header 的背景图
header_cover: http://oo12ugek5.bkt.clouddn.com/blog/images/banner-bg.jpg

# 404 页面的背景图
error_page_bg: http://oo12ugek5.bkt.clouddn.com/blog/images/dogs.jpg

# 页面加载loading图标
loader_img: http://oo12ugek5.bkt.clouddn.com/blog/images/loader.gif

# 站长信息
author:
  name: minfive
  link: https://github.com/Mrminfive
# 用于页面 footer 的站长信息
about:
  info: 本站是基于 Hexo 搭建的静态资源博客，主要用于分享日常学习、生活及工作的一些心得总结，欢迎点击右下角订阅 rss。
  address: Guangzhou, Guangdong Province, China
  email: chenxiaowu1994@outlook.com

Контакты

существует/source/_dataСоздано в каталогеcontact.xmlФайл будет генерировать соответствующие ссылки на вкладки в нижней части страницы, например:

Содержание конфигурации следующее:

- title: github
  icon: icon-github
  link: https://github.com/Mrminfive
- title: email
  icon: icon-email
  link: mailto:chenxiaowu1994@outlook.com
- title: rss
  icon: icon-rss
  link: /atom.xml

вtitleуказывает ссылкуtitleстоимость,iconУказывает на использование значков css,linkПредставляет ссылку перехода.

iconПоддерживаются только следующие значения:

icon-email: Почта
icon-rss: rss
icon-in: linkedin
icon-twitter: twitter
icon-facebook: facebook
icon-github: github
icon-zhihu: Знаю почти
icon-douban: Дубан
icon-weibo: Вейбо

внешняя ссылка

существуетsource/_dataСоздано в каталогеfooter_link.xmlФайл создаст соответствующий список внешних ссылок внизу страницы, например:

Содержание конфигурации следующее:

firend_link:
  - name: hexo-theme-skapp
    desc: hexo-theme-skapp
    link: https://github.com/Mrminfive/hexo-theme-skapp

build_tools:
  - name: Hexo
    desc: Blog Framework
    link: https://hexo.io/
скопировать код

вnameпредставляет отображаемое значение ссылки,descуказывает ссылкуtitleстоимость,linkПредставляет ссылку перехода.

Каждый массив в файле представляет столбец ссылок, а значение ключа данных представляет заголовок соответствующего столбца, например:firend_linkвести переписку友情链接, позволяя устанавливать многоколоночные ссылки, просто нужноhexo-theme-skapp/languagesВы можете установить соответствующее значение сравнения в языковой конфигурации ниже.

Индивидуальная конфигурация

Тема использует предварительно скомпилированные стили sass, а автор инкапсулирует все основные параметры стиля вhexo-theme-skapp/source/scssвниз_theme.scssВ файле файла:

/**
 * blog theme 
 */

$main-color: #19abd6                                !default;
$main-color--hover: lighten($main-color, 10%)       !default;

$font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"PingFang SC","Lantinghei SC","Microsoft Yahei","Hiragino Sans GB","Microsoft Sans Serif","WenQuanYi Micro Hei",sans           !default;

$main-fc: #666                                      !default;
$main-fs: 14px                                      !default;
$main-lh: 1.7                                       !default;

$title-fc: #242f35                                  !default;

$hint-fc: #19abd6                                   !default;

$bgc--main: #fff                                    !default;
$bgc--bottom: #2d383e                               !default;
$bgc--footer: #242f35                               !default;

$border-c: #d8e5f3                                  !default;

$transition: .3s                                    !default;

$mq-desktop--wide: 1280px                           !default;
$mq-desktop: 980px                                  !default;
$mq-mobile: 736px                                   !default;

$pad: 15px                                          !default;

$z-index--bottom: 1                                 !default;
$z-index--center: 50                                !default;
$z-index--top: 100                                  !default;

Желающие могут изменить его самостоятельно.

Услуги третьих лиц

Статистика Байду

Тема имеет встроенную статистику Baidu.Чтобы использовать статистику Baidu, вам нужно только получить идентификатор скрипта статистики Baidu и настроить его на корень._config.ymlсередина:

# Baidu statistic
baidu_statistic: e3267498201dfa9699a5c509424709d6

Статистика

Тема больше не доступна.Статья статистики pv не включена по умолчанию.Его можно использовать в корне_config.ymlКонфигурация включена:

# Busuanzi
busuanzi: true

Поиск контента

Тема использует lunr для поиска на месте, и конфигурация в настоящее время не поддерживается.

rss

Запишите следующий код в корень_config.ymlсередина:

# Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

# Sitemap
sitemap:
  path: sitemap.xml

Система комментариев

Интеграция темыgitalkкак функция комментариев. Чтобы включить функцию комментариев, вам необходимо зарегистрировать приложение Github.Подробнее см.gitalk документация, после завершения приложения в корне_config.ymlКонфигурация:

# Gitalk
gitTalk:
  clientId: ***
  clientSecret: ***
  repo: ***
  owner: ***
  admin: 
    - ***