Следующее руководство Hexo по персонализации темы: создайте крутой веб-сайт

внешний интерфейс Ресурсы изображений Icon Hexo

Я вижу, что некоторые веб-сайты с некст-тематикой очень крутые, так как же их настроить? Далее я расскажу о том, как добиться некоторых крутых эффектов

Существуют в основном следующие 30 видов:

  • Реализовать fork me на github в правом верхнем или левом верхнем углу
  • Добавить RSS
  • Добавить динамический фон
  • Реализуйте эффект щелчка, чтобы появилось персиковое сердце
  • Изменить стиль текста ссылки в статье
  • Измените тег с # в нижней части статьи
  • Добавляйте тег «конец статьи» в конец каждой статьи равномерно
  • Изменить аватар автора и повернуть
  • Сжатие сообщений блога
  • Измените пользовательский стиль блока кода ``
  • Настройки маленькой социальной иконки на боковой панели
  • Статья на главной странице добавляет эффект тени
  • Добавляем трафик в низ сайта
  • добавить тепла
  • Количество слов в нижней части сайта
  • Добавьте файл README.md
  • Установить фавикон сайта
  • Реализовать статистические функции
  • Добавить верхнюю полосу загрузки
  • Добавьте информацию об авторских правах внизу статьи
  • Добавить ветку NetEase Cloud (ветка закрыта, срок ее действия истек, и она изменена на Laibili)
  • Скрыть нижнюю часть страницы на платформе Hexo / Powered by
  • Измените сердце внизу страницы
  • Зашифрованный доступ к статье
  • добавить джиатис, чтобы поделиться
  • сообщение в блоге сверху
  • Изменить размер шрифта
  • Измените шрифт награды, чтобы он не мигал
  • пользовательский стиль мыши
  • Добавьте милых питомцев в свой блог

1. Реализовать fork me на github в правом верхнем или левом верхнем углу.

Реализовать рендеринг

Конкретный метод реализации

нажмитездесьВыберите свой любимый стиль и скопируйте код. Например, я скопировал следующий код:


Затем вставьте только что скопированный код вthemes/next/layout/_layout.swigфайл (в<div class="headband"></div>ниже) и поставитьhrefИзмените на свой адрес github

2. Добавьте RSS

Реализовать рендеринг

Конкретный метод реализации

Переключитесь на путь вашего блога (меня зовут блог, в зависимости от того, как вас зовут), например, я в/Users/chenzekun/Code/Hexo/blogЭтот путь, который находится в вашем корневом каталоге

Затем установите плагин Hexo: (Этот плагин будет помещен вnode_modulesв этой папке)

$ npm install --save hexo-generator-feed

Затем откройте файл, где нарисована красная линия, как показано ниже:

Добавьте в конце внутри :(осторожностьСтавьте пробел после двоеточия, иначе будет ошибка! )

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

Затем откройте следующую папку темы_config.yml, который настраивается следующим образом: (то есть вrss:добавить после/atom.xml,Уведомлениедобавить пробел после двоеточия)

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

После запуска конфигурации:

$ hexo g

Регенерируйте один раз, и вы будете в./publicнашел в папкеatom.xmlдокумент. Затем запустите сервер, чтобы проверить, работает ли он, а затем разверните его на Github.

3. Добавьте динамический фон

Реализовать рендеринг

Конкретный метод реализации

Я уже говорил об этом в статье, нажмите для подробностеймой блог

4. Реализуйте эффект нажатия, чтобы появилось персиковое сердце

Реализовать рендеринг

Конкретный метод реализации

Введите следующее в URL

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

Затем скопируйте код внутри и создайте новый.love.js文件并且将代码复制进去，然后保存。 Будуlove.jsфайл по пути/themes/next/source/js/srcвнутри, затем открыть\themes\next\layout\_layout.swigфайла, добавьте в конец следующий код (будет ошибка, которую нельзя найти в предыдущей ссылке):

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

5. Измените стиль текста ссылки в статье

Реализовать рендеринг

Конкретный метод реализации

Изменить файлthemes\next\source\css\_common\components\post\post.styl, добавьте в конце следующий стиль css:

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

которые выбирают.post-bodyне влияет на заголовок, выберитеpЧтобы не влиять на стиль отображения «Читать полный текст» на главной странице, цвет можно определить самостоятельно.

6. Измените тег со знаком # внизу статьи.

Реализовать рендеринг

Конкретный метод реализации

Изменить шаблон/themes/next/layout/_macro/post.swig,поискrel="tag">#, заменить<i class="fa fa-tag"></i>

7. Равномерно добавьте тег «конец статьи» в конце каждой статьи.

Реализовать рендеринг

Конкретный метод реализации

на пути\themes\next\layout\_macroВ новомpassage-end-tag.swigфайл и добавьте следующее:

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

затем откройте\themes\next\layout\_macro\post.swigфайл, вpost-bodyПозже,post-footerПеред добавлением следующего кода для рисования красной части (два DIV перед нижним колонтитулом):

код показывает, как показано ниже:

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

Затем откройте файл конфигурации темы (_config.yml), добавить в конце:

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

После выполнения вышеуказанных настроек рендеры, как указано выше, будут добавляться после каждой статьи.

8. Измените аватар автора и поверните его:

Реализуйте диаграмму эффекта:

Конкретный метод реализации

Открыть\themes\next\source\css\_common\components\sidebar\sidebar-author.styl, добавьте в него следующий код:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

9. Сжатие постов в блоге

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

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

Как показано на рисунке ниже, создайте новыйgulpfile.js, и заполните следующее:


 
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

Генерация сообщений в блоге выполняетсяhexo g && gulpСогласно сgulpfile.jsКонфигурация в , сжимает файлы статических ресурсов в общем каталоге.

10. Измените пользовательский стиль блока кода ``

Реализовать рендеринг

Конкретный метод реализации

Открыть\themes\next\source\css\_custom\custom.styl, добавьте к нему: (цвет можно определить самостоятельно)

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

11. Набор социальных иконок на боковой панели

Реализовать рендеринг

Конкретный метод реализации

Откройте файл конфигурации темы (_config.yml),поискsocial_icons:,существуетбиблиотека иконокНайдите маленький значок, который вам нравится, и скопируйте имя в следующее место.

12. Главная Статьи добавляют теневые эффекты

Реализовать рендеринг

Конкретный метод реализации

Открыть\themes\next\source\css\_custom\custom.styl, добавьте к нему:

// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

13. Добавьте трафик в нижнюю часть вашего сайта

Реализовать рендеринг

Конкретный метод реализации

Открыть\themes\next\layout_partials\footer.swigФайл, перед добавлением авторских прав подчеркивает это предложение:

код показывает, как показано ниже:

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

Затем добавьте код для отображения статистики в соответствующем месте, как показано на рисунке:

код показывает, как показано ниже:

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

Здесь есть два статистических кода для разных расчетов:

  1. pvметод, один пользователь непрерывно нажимает на n статей и регистрирует n посещений.
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
  1. uvметод, один пользователь непрерывно нажимает на n статей и регистрирует количество посетителей только один раз.
<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

Выполнить после добавленияhexo d -g, а затем обновите страницу, чтобы увидеть эффект

14. Добавьте тепла

Реализуйте диаграмму эффекта:

Конкретный метод реализации

nextTheme интегрирует в себя LeanCloud, открытый/themes/next/layout/_macro/post.swig, добавьте в область, где нарисована красная линия℃:

затем открыть,/themes/next/languages/zh-Hans.yml, вы можете изменить красную рамку на тепло

15. Количество слов внизу сайта

Реализовать рендеринг

конкретный метод достижения

Перейдите в корневой каталог и запустите следующий код

$ npm install hexo-wordcount --save

затем в/themes/next/layout/_partials/footer.swigВ конце файла добавьте:

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

16. Добавьте файл README.md

Под каждым проектом обычно имеется одинREADME.mdфайл, но после деплоя на склад с помощью hexo нетREADME.mdфайл.

в каталоге HexosourceДобавьте один в корневой каталогREADME.mdфайл, измените файл конфигурации сайта _config.yml,Будуskip_renderЗначение параметра устанавливается равным

skip_render: README.md

Сохранить и выйти. использовать сноваhexo dФайл README.md не будет отображаться, когда команда развертывает блог.

17. Установите фавикон сайта

Реализовать рендеринг

конкретный метод достижения

существуетEasyIconНайдите один (32*32)icoзначок или перейдите на другой веб-сайт для загрузки или создания и измените имя значка наfavicon.ico, затем поместите значок в/themes/next/source/imagesи измените файл конфигурации темы:

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

18. Реализовать статистические функции

Реализовать рендеринг

Конкретный метод реализации

Установить в корневой каталогhexo-wordcount,бегать:

$ npm install hexo-wordcount --save

Затем в файле конфигурации темы настройте следующим образом:

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

19. Добавьте верхнюю планку загрузки

Реализовать рендеринг

Конкретный метод реализации

Открыть/themes/next/layout/_partials/head.swigФайл, добавьте код на красное поле

код показывает, как показано ниже:

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

Тем не менее, по умолчанию розовый, чтобы изменить цвет, вы можете/themes/next/layout/_partials/head.swigДобавьте следующий код в файл (после ссылки только что)

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

В настоящее время пул-реквест блогера на увеличение верхней полосы загрузки объединен ===>Подробности
Теперь обновите последнюю версию следующей темы, после обновления просто измените файл конфигурации темы (_config.yml) наpace: falseизменить наpace: trueВот и все, вы также можете изменить полосу загрузки разных стилей, как показано ниже:

20. Добавьте информацию об авторских правах внизу статьи.

Реализовать рендеринг

в каталогеnext/layout/_macro/下Добавить кmy-copyright.swig:

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '复制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

в каталогеnext/source/css/_common/components/post/добавить подmy-post-copyright.styl:

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

Исправлятьnext/layout/_macro/post.swig, в коде

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

Перед добавлением добавьте следующий код:

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

следующим образом:

Исправлятьnext/source/css/_common/components/post/post.stylфайл, добавьте код в последнюю строку:

@import "my-post-copyright"

Сохраните и восстановите. Если вы хотите добавить отображение информации об авторских правах под сообщением в блоге, вам нужно добавить параметр copyright: true в Markdown, аналогичный следующему:

---
title: 前端小项目：使用canvas绘画哆啦A梦
date: 2017-05-22 22:53:53
tags: canvas
categories: 前端
copyright: true
---

Советы: Если вы чувствуете, что вам нужно печатать каждый разcopyright: trueЕсли хлопотно, то/scaffolds/post.mdДобавьте в файл:


так каждый разhexo new "你的内容"После этого сгенерированный файл md автоматически поставитcopyright:добавить это в
(Уведомление: Если есть проблема с исходной ссылкой после ее разбора: например:http://yoursite.com/前端小项目：使用canvas绘画哆啦A梦.html, затем в корневой каталог_config.ymlнаписано так :)

Вот и все.

21. Добавьте ветку NetEase Cloud (ветка закрыта, срок ее действия истек, и она изменена на Lai Bi Li)

Реализовать рендеринг

конкретный метод достижения
Существует два метода реализации:
①Обновите следующую тему, потому что последняя версия темы уже поддерживает такие комментарии. прямо в конфигурационном файле темы_config.ymlДобавьте в файл следующую конфигурацию:

gentie_productKey: #your-gentie-product-key

②Если вы не хотите обновляться, выполните следующие действия:
Во-первых, еще в конфигурационном файле темы_config.ymlДобавьте в файл следующую конфигурацию:

gentie_productKey: #your-gentie-product-key

твойproductKeyЭто красная линия ниже

затем вlayout/_scripts/third-party/comments/добавить в каталогgentie.swig, содержимое файла следующее:

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id %}
  {% if theme.gentie_productKey %}
    {% set gentie_productKey = theme.gentie_productKey %}
    <script>
      var cloudTieConfig = {
        url: document.location.href, 
        sourceId: "",
        productKey: "{{gentie_productKey}}",
        target: "cloud-tie-wrapper"
      };
    </script>
    <script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script>
  {% endif %}
{% endif %}

затем вlayout/_scripts/third-party/comments.swigДобавить в файл:

{% include './comments/gentie.swig' %}

Наконец, вlayout/_partials/comments.swigВ конце условий в файле добавлена ​​логика суждения ссылки на подключаемый модуль облачного потока NetEase:

{% elseif theme.gentie_productKey %}
      <div id="cloud-tie-wrapper" class="cloud-tie-wrapper">
      </div>

Конкретные места следующие:

Может быть, выhexo sможно не увидеть, прямоhexo dты можешь видеть

Недавно мой друг прислал сообщение о том, что ветка NetEase Cloud будет закрыта, я проверил его в Интернете и, конечно же,

Это все слезы.В прошлый раз я использовал его, чтобы сказать много, но он оказался закрытым.Тогда это был тред Netease Cloud.

Метод по-прежнему аналогичен предыдущему

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

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

в,livere_uidЭто красная линия

затем вlayout/_scripts/third-party/comments/Добавьте livere.swig в директорию, содержимое файла следующее:

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
  {% if theme.livere_uid %}
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  {% endif %}
{% endif %}

затем вlayout/_scripts/third-party/comments.swigДобавить в файл:

{% include './comments/livere.swig' %}

Наконец, вlayout/_partials/comments.swigВ конце условия в файле добавляется логика решения о том, имеется ли ссылка на плагин LiveRe:

{% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}

над

22. Скрыть нижнюю часть веб-страницы на платформе Hexo / Powered by Hexo

Открытьthemes/next/layout/_partials/footer.swig, Используйте "", чтобы скрыть код между ними или удалить его напрямую. Расположение показано:

23. Измените сердце внизу страницы

Все еще открытthemes/next/layout/_partials/footer.swig,оказаться:

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

24. Зашифрованный доступ к статье

Реализовать рендеринг

Конкретный метод реализации

Открытьthemes->next->layout->_partials->head.swigфайл, вставьте такой фрагмент кода в следующее место:

код показывает, как показано ниже:

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

Тогда напишите что-то вроде этого в статье:

25. Добавьте джиати, чтобы поделиться

существуетФайл конфигурации темы, джиа это правда, вот и все, как показано ниже

По умолчанию это так:


Если вы хотите настроить его, откройтеthemes/next/layout/_partials/share/jiathis.swigПросто отредактируйте красную строку

26. Сообщение в блоге сверху

Исправлятьhero-generator-indexПлагин, поставьте файл:node_modules/hexo-generator-index/lib/generator.jsЗамените код внутри на:

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

добавить в статьюtopзначение, чем больше значение, тем более продвинутая статья, например

---
title: 解决Charles乱码问题
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

27. Изменить размер шрифта

Открыть\themes\next\source\css\ _variables\base.stylфайл, будет$font-size-baseизменить на16px,Следующим образом:

$font-size-base            =16px

28. Измените шрифт подсказки, чтобы он не мигал

Изменить файлnext/source/css/_common/components/post/post-reward.styl, а затем аннотировать функцию в немwechat:hoverа такжеalipay:hover,следующим образом:

/* 注释文字闪动函数
 #wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
 #alipay:hover p{
   animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/

29. Пользовательский стиль мыши

Открытьthemes/next/source/css/_custom/custom.styl, напишите в нем следующий код

// 鼠标样式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }

URL-адрес должен быть ico-изображением, и ico-изображение можно загрузить в Интернет (я использую Qiniu Yuntu Bed), затем получить внешнюю ссылку и скопировать ее в URL-адрес.

30. Добавьте милых питомцев в свой блог

Реализовать рендеринг

Конкретный метод реализации
Перейдите на путь к вашему блогу в терминале и введите следующий код:

npm install -save hexo-helper-live2d

затем откройтеHexo/blog/themes/next/layout
из_layout.swig, поместите следующий код в</body>До:

{{ live2d() }}

затем вhexoиз_config.ymlДобавьте параметры к:

live2d:
  model: wanko
  bottom: -30

Затем можно увидеть hexo clean , hexo g , hexo d .

Ниже приведены некоторые модели, которые вы можете изменить на разных домашних животных.

  • модель название модели по умолчанию: z16
    • Gantzert_Felixander
    • Epsilon2.1
    • haru
    • miku
    • ni-j
    • nico
    • nito
    • nipsilon
    • nietzsche
    • shizuku
    • tsumiki
    • wanko
    • z16
    • hibiki
    • koharu
    • haruto
    • Unitychan
    • tororo
    • hijiki
  • ширина ширина значение по умолчанию: 150
  • высота высота значение по умолчанию: 300
  • className <canvas>Имя класса элемента. По умолчанию: live2d.
  • id <canvas>идентификатор элемента Значение по умолчанию: live2dcanvas
  • bottom <canvas>Нижнее смещение элемента По умолчанию: -20 Настройте этот параметр, если модель расположена неправильно.

Есть минусы в использовании этого: при просмотре на мобильном телефоне ощущения не очень приятные, питомец постоянно блокирует текст, да и загрузка немного медленная.

Уведомление! Если у вас есть следующая проблема, когда вы находитесь в шестнадцатеричном формате d

Вы можете сделать это, сначала удалите папку .deploy_git под hexo, затем запустите

git config --global core.autocrlf false

Просто повторно очистите гексо, гексо г, гексо д

Спасибо

Большое спасибо за статьи великих богов, я действительно многому научился, некоторые забыли записать, искренне благодарю вас здесь. Хотя это немного бросок, он действительно полон чувством выполненного долга.Дорога бесконечная его длинная и далекая, я буду искать вверх и вниз!

Добро пожаловать в гостимой блог

Ссылочные статьи:

  1. blog.CSDN.net/мастер ant_D…
  2. кастом 4 закалка.com/2017/04/27/…
  3. Больше, чем ширина.Что/2017/01/25/…
  4. Woohoo. Vita и .net/posts/20 post 30…  
  5. thief.one/2017/03/03/…
Категории