【Hexo】Конфигурация материала темы Hexo

Hexo

иллюстрировать

Первые две статьи представилиHexo + github pages + travis ciавтоматизированное развертывание и введениеHexoЯ считаю, что каждый атрибут в файле конфигурации , изучив первые две статьи, научил вас создавать свой собственный блог и настраивать его в соответствии со своими потребностями.

Эта статья будетMateryТема, например, чтобы объяснить, как должна быть настроена тема. Темы включают конфигурацию, настройки подключаемых модулей и меры предосторожности.

Установить тему блога

первый пришелздесьВыберите понравившуюся тему и нажмите на ее название (обратите внимание, что нажатие на картинку означает вход вdemoСайт, щелкните заголовок, чтобы перейти к соответствующемуgithubсклад), перейти кgithubсклад, скопируйте его адрес склада.

Например, я использую темуMatery, адрес проекта которого:git@github.com:blinkfox/hexo-theme-matery.git.

Откройте локальный каталог, перейдите в каталог на том же уровне, что и наш проект блога (обратите внимание, что это тот же уровень, а не внутри проекта блога), и локально клонируйте проект темы.

git clone git@github.com:blinkfox/hexo-theme-matery.git

в рамках блог-проектаthemesСоздайте новую папку с именемmateryпапку, затем скопируйте файлы темы в эту папку:

mkdir breeze-blog/themes/matery
cp -r hexo-theme-matery/* breeze-blog/themes/matery

здесьbreeze-blogэто папка, в которой находится проект моего блога, здесь вы можете заменить его своим.

Снова открываем наш конфигурационный файл (_config.yml),Исправлятьthemeсвойство, установите имя папки, в которой находится тема блога, вотmatery, следите за тем, чтобы имя папки точно совпадало.

Затем мы регенерируем статический файл блога:

cd breeze-blog
hexo clean && hexo generate
hexo server

Тогда откройте адрес нашего блога:localhost:4000, наша тема установлена.

hexo-theme-1.jpg

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

Настройка содержимого темы

новая страница

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

hexo-theme-2.jpg

Создать новую категориюcategoriesСтраница,categoriesСтраница — это страница, используемая для отображения всех категорий. Команды следующие:

hexo new page "categories"

Отредактируйте только что созданный файл подкачки/source/categories/index.md, напишите следующее:

---
title: categories
date: 2020-05-04 10:40:13
type: "categories"
layout: "categories"
---

затем создайте новый ярлыкtagsСтраница,tagsСтраница — это страница, используемая для отображения всех тегов, команда выглядит следующим образом:

hexo new page "tags"

Отредактируйте только что созданный файл подкачки/source/tags/index.md, напишите следующее:

---
title: tags
date: 2020-05-04 10:40:14
type: "tags"
layout: "tags"
---

Далее новыйaboutСтраница,aboutpage — это страница, используемая для отображения информации обо мне и моем блоге, команда выглядит следующим образом:

hexo new page "about"

Отредактируйте только что созданный файл подкачки/source/about/index.md, напишите следующее:

---
title: about
date: 2020-05-04 10:40:15
type: "about"
layout: "about"
---

Затем создайте новую доску объявленийcontactСтраница,contactСтраница — это страница, используемая для отображения информации доски объявлений, чтобы другие могли оставлять сообщения унифицированным образом.Команды следующие:

hexo new page "contact"

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

---
title: contact
date: 2020-05-04 10:40:16
type: "contact"
layout: "contact"
---

Обратите внимание, что функция доски объявлений зависит от сторонней системы комментариев, вам необходимо активировать систему комментариев, которая будет эффективной, если вы не удосужились ее использовать, вы не можете справиться, удалите заднюю часть этой опции в строке меню.

Наконец, создайте новую ссылкуfriendsСтраница,friendsСтраница — это страница, используемая для отображения дружественной информации о ссылках. Команды следующие:

hexo new page "friends"

Отредактируйте только что созданный файл подкачки/source/friends/index.md, напишите следующее:

---
title: friends
date: 2020-05-04 10:40:17
type: "friends"
layout: "friends"
---

Также в вашем блогеsourceновый каталог_dataкаталог, в_dataновый в каталогеfriends.jsonфайл, содержимое файла следующее:

[{
    "avatar": "https://mfrank2016.github.io/breeze-blog/medias/avatar.jpg",
    "name": "清风",
    "introduction": "技术博主，文章还不错",
    "url": "https://mfrank2016.github.io/breeze-blog/",
    "title": "前去学习"
}, {
    "avatar": "https://draveness.me/images/draven-logo.png",
    "name": "真没什么逻辑",
    "introduction": "面向信仰编程",
    "url": "https://draveness.me/",
    "title": "前去学习"
}]

Здесь вы можете удалить его по мере необходимости.Конечно, в зависимости от эффекта, вы можете сначала установить его так, а затем изменить его.

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

Конфигурация навигации по меню

Настройте имя, URL-адрес пути и значок значка для базовой навигации по меню.

1. Название навигации по меню может быть китайским или английским (например:Indexили主页) 2. Значок значка можно найти вFont AwesomeНайти в

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Friends:
    url: /friends
    icon: fas fa-address-book

Метод настройки вторичного меню

Если вам нужно дополнительное меню, вы можете сделать следующее на основе исходной навигации по основному меню. 1. Добавьте в меню первого уровня, где необходимо добавить меню второго уровня.childrenключевые слова (например:Aboutдобавить в менюchildren) 2. ВchildrenСоздайте вторичное меню под именем имени, URL-адресом пути и значком значка. 3. Обратите внимание, что каждый модуль вторичного меню должен быть добавлен до-. 4. Обратите внимание на формат отступа

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle-o
  Friends:
    url: /friends
    icon: fas fa-address-book
  Medias:
    icon: fas fa-list
    children:
      - name: Musics
        url: /musics
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image

воплощать в жизньhexo clean && hexo gВосстановите файл блога, после чего вы увидите соответствующее место в статье, которую используете.emojiГрамматически написанные выражения.

подсветка кода

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

npm i -S hexo-prism-plugin

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

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

поиск

Также используется в темеhexo-generator-searchПлагин Hexo для поиска контента, команда установки выглядит следующим образом:

npm install hexo-generator-search --save

в корневом каталоге Hexo_config.ymlВ файле добавьте следующие элементы конфигурации:

search:
  path: search.xml
  field: post

Схема эффекта выглядит следующим образом:

hexo-theme-3.jpg

Китайская ссылка на пиньинь (рекомендуется установка)

Если название вашей статьи на китайском языке, тоHexoПостоянные ссылки, сгенерированные по умолчанию, также будут иметь китайский язык, что не способствуетSEO,а такжеgitmentКомментарии также не поддерживают китайские ссылки. мы можем использоватьhexo-permalink-pinyin HexoПлагин позволяет генерировать постоянные ссылки на китайском языке пиньинь при создании статей.

Команда установки выглядит следующим образом:

npm i hexo-permalink-pinyin --save

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

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

Плагин подсчета слов в статьях (рекомендуется установка)

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

Команда установки выглядит следующим образом:

npm i --save hexo-wordcount

Тогда просто под эту тему_config.ymlВ файле активируйте конфигурацию, связанную с количеством слов в каждой статье:

postInfo:
  date: true
  update: true
  wordCount: true # 设置文章字数统计为 true.
  totalCount: true # 设置站点文章总字数统计为 true.
  min2read: true # 阅读时长.
  readCount: true # 阅读次数.

Добавьте поддержку эмодзи (необязательно)

MateryТема добавленаemojiПоддержка выражений, используетсяhexo-filter-github-emojisПлагин Hexo для поддержкиemojiГенерация выражения, поставьте соответствующийmarkdown emojiграмматика(::,Например::smile:) в прыжкиemojiExpression, команда установки выглядит следующим образом:

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

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

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

Добавить поддержку RSS-канала (необязательно)

Также используется в темеhexo-generator-feedПлагин Hexo для этогоRSS, команда установки выглядит следующим образом:

npm install hexo-generator-feed --save

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

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Функция живого чата (опционально)

идти кDaoVoiceОфициальная регистрация и доступ к сайтуapp_id, и воляapp_idзаполните тему_config.ymlв файле.

Добавить кTidioФункция живого чата (опционально)

идти кTidioОфициальная регистрация и доступ к сайтуPublic Key, и воляPublic Keyзаполните тему_config.ymlв файле.

Изменить социальные ссылки

по теме_config.ymlфайл, поддержка по умолчаниюQQ,GitHubи конфигурация почтового ящика, вы можете настроить его в файле темы/layout/_partial/social-link.ejsВ файле добавьте или измените нужный адрес социальной ссылки.Для добавления ссылки используйте следующий код:

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

Среди них социальные иконки (такие как:fa-github) ты сможешьFont Awesomeнашел в поиске. Вот логотипы часто используемых социальных иконок для справки:

  • Facebook: fab fa-facebook
  • Twitter: fab fa-twitter
  • Google-plus: fab fa-google-plus
  • Linkedin: fab fa-linkedin
  • Tumblr: fab fa-tumblr
  • Medium: fab fa-medium
  • Slack: fab fa-slack
  • Sina Weibo: fab fa-weibo
  • Wechat: fab fa-weixin
  • QQ: fab fa-qq
  • Zhihu: fab fa-zhihu

Измените изображение QR-кода награды

в файле темыsource/medias/rewardВ файле вы можете заменить его изображением QR-кода вашего WeChat и Alipay.

Настройте музыкальный проигрыватель (необязательно)

Для поддержки воспроизведения музыки в теме_config.ymlКонфигурацию музыки можно активировать в файле конфигурации:

# 是否在首页显示音乐
music:
  enable: true
  title:     	    #非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   #require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 503838841     #require song id / playlist id / album id / search keyword
  fixed: false      # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠

serverнеобязательныйnetease(Облачная музыка NetEase),tencent(Музыка QQ),kugou(музыка куго),xiami(Музыка Сями),

baidu(Музыка Байду).

typeнеобязательныйsong(песня),playlist(список песен),album(альбом),search(поиск по ключевому слову),artist(певец)

idПолучите пример: откройте мобильную версию NetEase Cloud Music, выберите понравившийся плейлист и нажмите «Поделиться».

Я случайно выбрал плейлист здесь, и текст после публикации выглядит следующим образом:

Делимся плейлистом печенья с соленой рыбой «День молодежи: Мечтателям, где есть воля, все сбывается»music.163.com/playlist/49…(@Облачная музыка NetEase)

4965675848Это id плейлиста.Плейлист по умолчанию в файле на самом деле неплохой.Там достаточно много песен,так что если нет особых требований,то неплохо использовать плейлист по умолчанию.

⚠️ Здесь следует обратить внимание на одну вещь: если вы хотите заменить его своим собственным плейлистом, вы обнаружите, что последующее обновление плейлиста не повлияет на него.Aplayerигрок, вCDN.JS Deli VR.net/Годовой рейтинг/Что слушать@…Как вы можете видеть в этом файле, данные получены из этого интерфейса:API.i-meheoh.com/melisten/API?…, догадываясь, что сервер напрямую записывает полученный список-список во внутреннюю базу данных, но не будет обновлять его в дальнейшем, поэтому сколько бы раз он не обновлялся, он может получить только данные, полученные в первый раз.

Таким образом, есть два решения: первое — создать новый плейлист, затем добавить достаточное количество песен за один раз, а затем заменить его идентификатором вашего плейлиста в файле конфигурации, второе — написать анализ облачного музыкального плейлиста NetEase с помощью собственного интерфейса. для получения данных NetEase Cloud Music. Мне лень, поэтому выбрал первый вариант, 23333, который до сих пор в плейлисте.

Статья Введение Введение

Подробные параметры вступительной части

Front-matterВ опциях все естьНе требуетсяиз. Но рекомендуется заполнить хотя быtitleа такжеdateценность .

параметры конфигурации По умолчанию описывать
title Markdownназвание файла Название статьи, настоятельно рекомендуется заполнить эту опцию
date Дата и время создания файла Время выпуска, настоятельно рекомендуется заполнить эту опцию, и лучше всего убедиться, что она глобально уникальна.
author корень_config.ymlсерединаauthor автор статьи
img featureImagesзначение в Для карты объектов в статье рекомендуется использовать карту (Tencent Cloud, Qiniu Cloud, Youpai Cloud и т. д.), чтобы проложить путь к изображению, например:http://xxx.com/xxx.jpg
top true Рекомендуемые статьи (независимо от того, вверху статья или нет), еслиtopзначениеtrue, она будет использоваться в качестве рекомендуемой статьи на главной странице
cover false v1.0.2Версия добавлена ​​недавно, указывая, нужно ли добавлять статью на обложку карусели на первой странице.
coverImg без v1.0.2Версия добавляется заново, указывая путь к изображению, которое статья должна отображать на обложке карусели главной страницы. Если нет, по умолчанию будет использоваться избранное изображение статьи.
password без Пароль для чтения статьи, если вы хотите установить пароль проверки чтения для статьи, вы можете установить егоpasswordзначение, которое необходимо использовать сSHA256Зашифрованный пароль, чтобы другие не могли его увидеть. Предпосылка состоит в том, что предметconfig.ymlактивирован вverifyPasswordОпции
toc true Включать ли TOC, вы можете отключить функцию TOC отдельно для статьи. Предпосылка состоит в том, что предметconfig.ymlактивирован вtocОпции
mathjax false Включить ли поддержку математических формул, включена ли эта статьяmathjax, и должен быть в теме_config.ymlЕго тоже нужно включить в файле
summary без Аннотация статьи, пользовательское содержание аннотации статьи, если этот атрибут имеет значение, то аннотация карточки статьи будет отображать этот текст, иначе программа автоматически перехватит часть статьи как аннотацию
categories без Классификация статей, классификация этой темы представляет собой макроклассификацию, для одной статьи рекомендуется только одна классификация.
tags без Теги статьи, статья может иметь несколько тегов
keywords название статьи Ключевые слова статьи, необходимые для SEO
reprintPolicy 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. еслиimgЕсли атрибут не заполнен, карта характеристик статьи будет основываться на названии статьи.hashcodeВозьмите оставшуюся часть значения, а затем выберите соответствующее избранное изображение в теме, чтобы получить избранное изображение для всех статей.Имеют свои особенности.
  2. dateЗначение стараются сделать так, чтобы каждая статья была уникальной, т.к. в этой темеGitalkа такжеGitmentИдентифицироватьidчерезdateзначение как уникальный идентификатор.
  3. Если вы хотите установить функцию чтения и проверки пароля для статьи, вы должны не только установить значение пароля, зашифрованного с помощью SHA256, в Front-matter, но также необходимо установить значение пароля, зашифрованного с помощью SHA256, в тема._config.ymlконфигурация активирована в . Есть несколько онлайн-адресов, зашифрованных SHA256, которые вы можете использовать:Китайские онлайн-инструменты с открытым исходным кодом,chahuo,Инструменты для веб-мастеров.
  4. Вы можете указать reprintPolicy в начале md-файла статьи, чтобы настроить правила перепечатки для одной статьи.

Далее идет статьяFront-matterПример.

минимальный пример

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

Самый полный пример

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

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

Наконец, позвольте мне представить плагин, который я выбрасывал в течение долгого времени, плагин оценки валина.

Плагин обзора валина

Домашняя страница плагина:valine.js.org/, есть подробные введения выше, вы можете просмотретьздесь, после регистрации подтвердите адрес электронной почты, привяжите номер мобильного телефона, а затем создайте новое приложение, чтобы получить соответствующийAppIdа такжеAppKey, а затем выполните обратную запись в файл темы до_config.ymlфайл, ноБудьте осторожны, не используйте для регистрации напрямую отечественную версию, а используйте международную, иначе вы не сможете подать заявку на доменное имя второго уровня..

valine:
  enable: true
  appId: XXX
  appKey: XXX
  notify: true
  verify: false
  visitor: true
  avatar: 'retro' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'Comment here' # Comment Box placeholder
  background: /medias/comment_bg.png

Последняя версияValineУведомления по электронной почте удалены. Если нет уведомления по электронной почте, весьма вероятно, что после того, как другие прокомментировали, вы не знаете об этом, и другая сторона не получит последующих ответов. Поэтому для его реализации необходимо настроить другой плагин, ++https://github.com/zhaojun1998/Valine-Admin++. Перед настройкой этого плагина необходимо убедитьсяValineОн отлично работает, вы можете прокомментировать его самостоятельно, чтобы проверить.

После завершения настройки вы сможете получать уведомления по электронной почте, когда другие комментируют вашу статью.

Слишком далеко,MateryТема установлена ​​и настроена, а дальше вам остается только писать в блог со спокойной душой~

![Публичный аккаунт WeChat](Боюсь 1-solve.byte IMG.com/to S-talent-i-he 2… f87f0?w=536&h=432&f=png&s=80298)

Категории