Hexo | NexT pour créer un blog sympa

Mobile 2023-09-06 21:29:30 views: null

Annuaire d'articles

écrit devant

Cet article porte principalement sur la configuration du thème NexT et l'optimisation du style de page, faisant référence aux articles et fichiers de configuration de nombreux grands.

Les articles référencés dans cet article marqueront directement la source sous forme de lien vers le texte original, mais Google en a référencé trop, s'il y a des omissions, merci de le signaler.

Au cours de tout le processus d'optimisation et de configuration du blog au début, de nombreux bons blogs ont été collectés, et je peux publier un lien convivial plus tard pour que tout le monde puisse y jeter un œil.

L'optimisation ultérieure du contenu de cet article sera améliorée dans le blog

Pendant le processus de référence, vous devrez sortir du mur pour jeter un œil et fournir un moyen, vous pourrez l'utiliser si vous en avez besoin, les escaliers

définition de base

Il existe deux fichiers de configuration principaux dans Hexo, tous deux nommés _config.yml. Parmi eux, l'un se trouve dans le répertoire racine du site, qui contient principalement la configuration d'Hexo lui-même ; l'autre se trouve dans le répertoire du thème, qui est fourni par l'auteur du thème et est principalement utilisé pour configurer les options liées au thème.

Pour la commodité de la description, dans la description suivante, le premier sera appelé 站点配置文件, et le second sera appelé 主题配置文件.

~/hexo/_config.yml

~/hexo/themes/next/_config.yml

création de blogs

Pour savoir comment créer un blog, veuillez vous référer à ceci [ Hexo crée son propre blog personnalisé ]

Fonctions de base élémentaires

fichier de configuration du site

Le plus fiable, bien sûr, est de lire d’abord la documentation officielle d’Hexo .

Voici le fichier de configuration que j'utilise :

# 站点设置
title: 雜言非語
subtitle: 成為一個厲害得普通人
description: 小人物,码农
keywords:
author: Sun XY
language: zh-Hans
timezone:

#主题设置
theme: next

# 博客地址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://sun_xy.gitee.io/blog/
root: /blog
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# 写作文章设置
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 5
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map: 

# 日期格式/时间格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# 分页设置
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

#RSS订阅是设置
plugin: hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20


# 发布部署地址设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://gitee.com/Sun_xy/blog.git
  branch: master

# 博客搜索功能配置
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# 文章推荐功能,需要安装插件
recommended_posts:
  server: https://api.truelaurel.com #后端推荐服务器地址
  timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
  internalLinks: 3 #内部文章数量
  externalLinks: 1 #外部文章数量
  fixedNumber: false
  autoDisplay: false #自动在文章底部显示推荐文章
  excludePattern: []
  titleHtml: <h1>推荐文章</h1> #自定义标题

Style de page Web

dois savoir

Appuyez simplement sur F12 dans le navigateur, il est recommandé d'utiliser le navigateur Google Chrome pour le débogage.

Fichier de style personnalisé :themes\next\source\css\_custom\custom.styl

Après avoir modifié le fichier, enregistrez-le directement et actualisez la page pour voir l'effet.

Modifier la largeur de la page de l'article

Ouvrez themes/next/source/css/_variables/base.styl, recherchez les champs suivants et modifiez-les à la largeur appropriée :

- $content-desktop-large          = 900px
+ $content-desktop-large          = 1000px

Modifier la couleur du petit bloc de code

Modifiez \themes\next\source\css\ _variables\base.stylle fichier et ajoutez des couleurs personnalisées :

$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #fc6423
// 自定义的颜色
+ $my-code-foreground = #dd0055  // 用``围出的代码块字体颜色
+ $my-code-background = #eee  // 用``围出的代码块背景颜色

Modifier la valeur $code-backgroundde $code-foregroundla somme :

// Code & Code Blocks
$code-font-family               = $font-family-monospace
$code-font-size                 = 13px
$code-font-size                 = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius             = 4px
- $code-foreground                = $black-light
- $code-background                = $gainsboro
+ $code-background                = $my-code-background 
+ $code-foreground                = $my-code-foreground

Modifier themes\next\source\css\_custom\custom.stylle fichier et ajouter des styles personnalisés

// 文章``代码块的自定义样式
code {
    margin: 0px 3px;
    border: 1px solid #999;
}

Modifier le style du texte du lien

Modifier themes\next\source\css\_custom\custom.stylle fichier et ajouter des styles personnalisés

//文章内链接文本样式
.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;
  }
}

Modifier le style du bouton [Lire la suite]

Modifier themes\next\source\css\_custom\custom.stylle fichier et ajouter des styles personnalisés

// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

Modifier la couleur du nuage de tags (tagcloud)

Modifiez themes/next/layout/page.swigle fichier et ajoutez des styles personnalisés :

- {
   
   { tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
+ {
   
   { tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}

Modifiez simplement la valeur du paramètre correspondant. Pour la description du paramètre, voir le document officiel Hexo

Modifiez le label # en bas de l'article et changez-le en icône

Modifier le modèle /themes/next/layout/_macro/post.swig, rechercher rel="tag">#, remplacer # par<i class="fa fa-tag"></i>

L'avatar est défini dans une forme circulaire et l'effet de rotation reste

Modifiez themes\next\source\css\_common\components\sidebar\sidebar-author.styl, ajoutez le code suivant :

.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: 50%;
+  transition: 2s all;
}
   //旋转
+ .site-author-image:hover{
+   transform: rotate(360deg);
+ }

Masquer le contenu inférieur du « entraînement électrique »

Modifier themes/next/_config.ymlle fichier, définir poweredetenablefalse

# 页脚
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2018

  # Icon between year and copyright info.
  # icon: user
  icon: sun-o

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
-  powered: true
+  powered: false
  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
-    enable: true
+    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true

Ajouter une balise "fin d'article" à la fin de l'article

Modifiez dans themes/next/layout/_macro/post.swig, wechat-subscriber.swigajoutez le code suivant avant :

+ <div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>
    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}

Ajouter les informations de copyright à la fin de l'article

Il existe deux manières d'augmenter le droit d'auteur

  1. modifier le thème 配置文件, rechercherpost_copyright
post_copyright:
- enable: false
+ enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
  1. Si vous pensez que la valeur par défaut n'est pas attrayante, vous pouvez personnaliser le style, le rechercher themes/next/layout/_macro/post.swiget footerajouter le code suivant avant (assurez-vous que le style a été ajouté avant de l'ajouter) :
<div>
	  <p id="div-border-left-red">
	   <b>本文基于<a target="_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> 知识共享署名-相同方式共享 4.0 </a>国际许可协议发布</b><br/>
	    <span>
	    <b>本文地址：</b><a href="{
   
   { url_for(page.path) }}" title="{
   
   { page.title }}">{
   
   { page.permalink }}</a><br/><b>转载请注明出处，谢谢！</b>
	    </span>
	  </p>
</div>

Afficher le bouton de retour en haut et la barre latérale sur mobile

Le téléphone mobile spécifique montre que les téléphones portables peuvent être utilisés pour visiter mon blog

Le thème de mon blog est Muse, et le modèle de conception du thème est Muse ou Mist, qui peut être configuré directement dans le fichier de configuration du thème :

Modifier la configuration du thèmethemes/next/_config.yml

# Enable sidebar on narrow view
onmobile: true

Comment déboguer la page de style mobile, veuillez vous référer à la figure ci-dessous

Une fois la page déboguée, copiez le code dans :themes\next\source\css\_custom\custom.styl

Pour plus de détails, veuillez vous référer à mon fichier de style custom.styl

Ci-joint mon fichier de style custom.styl

Il n'est pas recommandé de tous les copier et coller. Il est préférable de l'ouvrir avec F12, de trouver le style correspondant en fonction de l'ID de clé et de le copier dans votre propre fichier.

// Custom styles.
/*******************首页样式*****************************/
// 顶栏宽度
.container .header-inner {
    width: 100%;
}

// .headband {
//     height: 1.5px;
//     background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
// }

// 页面顶部行高
.header {
    line-height: 1.5;
}

// // 页面背景色
// .container {
//     background-color: rgba(0, 0, 0, 0.75);
// }

// 页面留白更改
.header-inner {
    padding-top: 35px;
    padding-bottom: 0px;
}
.posts-expand {
    padding-top: 50px;
}
.posts-expand .post-meta {
    margin: 5px 0px 0px 0px;
}
.post-button {
    margin-top: 0px;
}
// 顶栏宽度
.container .header-inner {
    width: 100%;
}
// 渐变菜带，CSS代码copy自https://githubuniverse.com
// .site-meta {
//     background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
// }

//缩略图指定宽度值显示。
img.img-topic {
    width: 75%;
}


/*******************文章样式*****************************/
// 文章
.post {
    margin-bottom: 50px;
    padding: 45px 36px 36px 36px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 255, 255);
}

// 文章标题字体
.posts-expand .post-title {
    font-size: 26px;
    font-weight: 700;
}
// 文章标题动态效果
.posts-expand .post-title-link::before {
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 文章元数据（meta）留白更改
.posts-expand .post-meta {
    margin: 10px 0px 20px 0px;
}
// 文章的描述description
.posts-expand .post-meta .post-description {
    font-style: italic;
    font-size: 14px;
    margin-top: 30px;
    margin-bottom: 0px;
    color: #666;
}
// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 去除在页面文章之间的分割线
.posts-expand .post-eof {
    margin: 0px;
    background-color: rgba(255, 255, 255, 0);
}
// 去除页面底部页码上面的横线
.pagination {
    border: none;
    margin: 0px;
}

// 文章内标题样式（左边的竖线）
.post-body h2, h3, h4, h5, h6 {
    border-left: 4px solid rgb(161, 102, 171);
    margin-left: -36px;
    padding-left: 32px;
}
// 去掉图片边框
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}
// 文章``代码块的自定义样式
code {
    margin: 0px 3px;
    border: 1px solid #999;
}

// 文章```代码块顶部样式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}
// 文章```代码块diff样式
pre .addition {
    background: #e6ffed;
}
pre .deletion {
    background: #ffeef0;
}

//文章内链接文本样式
.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;
  }
}

// 自定义的文章摘要图片样式
img.img-topic {
    width: 100%;
}

/*************************侧栏样式****************************/
// 自定义的侧栏时间样式
#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}
// 右下角侧栏按钮样式
.sidebar-toggle {
    right: 10px;
    bottom: 43px;
    background-color: rgba(247, 149, 51, 0.75);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.page-post-detail .sidebar-toggle-line {
    background: rgb(7, 179, 155);
}
// 右下角返回顶部按钮样式
.back-to-top {
    line-height: 1.5;
    right: 10px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    background-color: rgba(247, 149, 51, 0.75);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}

// 侧栏
.sidebar {
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.75);
}
.sidebar-inner {
    margin-top: 30px;
}
// 侧栏顶部文字
.sidebar-nav li {
    font-size: 15px;
    font-weight: bold;
    color: rgb(7, 179, 155);
}
.sidebar-nav li:hover {
    color: rgb(161, 102, 171);
}
.sidebar-nav .sidebar-nav-active {
    color: rgb(7, 179, 155);
    border-bottom-color: rgb(161, 102, 171);
    border-bottom-width: 1.5px;
}
.sidebar-nav .sidebar-nav-active:hover {
    color: rgb(7, 179, 155);
}
// 侧栏站点作者名
.site-author-name {
    display: none;
}
// 侧栏站点描述
.site-description {
    letter-spacing: 5px;
    font-size: 15px;
    font-weight: bold;
    margin-top: 15px;
    margin-left: 13px;
    color: rgb(243, 112, 85);
}
// 侧栏站点文章、分类、标签
.site-state {
    line-height: 1.3;
    margin-left: 12px;
}
.site-state-item {
    padding: 0px 15px;
    border-left: 1.5px solid rgb(161, 102, 171);
}
// 侧栏RSS按钮样式
.feed-link {
    margin-top: 15px;
    margin-left: 7px;
}
.feed-link a {
    color: rgb(255, 255, 255);
    border: 1px solid rgb(158, 158, 158) !important;
    border-radius: 15px;
}
.feed-link a:hover {
    background-color: rgb(161, 102, 171);
}
.feed-link a i {
    color: rgb(255, 255, 255);
}
// 侧栏社交链接
.links-of-author {
    margin-top: 0px;
}
// 侧栏友链标题
.links-of-blogroll-title {
    margin-bottom: 10px;
    margin-top: 15px;
    color: rgba(7, 179, 155, 0.75);
    margin-left: 6px;
    font-size: 15px;
    font-weight: bold;
}
// 侧栏超链接样式（友链的样式）
.sidebar a {
    color: #ccc;
    border-bottom: none;
}
.sidebar a:hover {
    color: rgb(255, 255, 255);
}
// 自定义的侧栏时间样式
#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}
// 侧栏目录链接样式
.post-toc ol a {
    color: rgb(7, 179, 155);
    border-bottom: 1px solid rgb(96, 125, 139);
}
.post-toc ol a:hover {
    color: rgb(161, 102, 171);
    border-bottom-color: rgb(161, 102, 171);
}
// 侧栏目录链接样式之当前目录
.post-toc .nav .active > a {
    color: rgb(161, 102, 171);
    border-bottom-color: rgb(161, 102, 171);
}
.post-toc .nav .active > a:hover {
    color: rgb(161, 102, 171);
    border-bottom-color: rgb(161, 102, 171);
}
/* 修侧栏目录bug，如果主题配置文件_config.yml的toc是wrap: true */
.post-toc ol {
    padding: 0px 10px 5px 10px;
}
/* 侧栏目录默认全展开，已注释
.post-toc .nav .nav-child {
    display: block;
}
*/

/************************移动端样式*******************************/
@media (max-width: 1023px) {
    .container {
        background-color: rgba(0, 0, 0, 0);
    }
    .sidebar {
        // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    .feed-link {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .main {
        padding-bottom: 120px;
    }
    .posts-expand {
        margin: 0px;
        padding-top: 10px;
    }
    .posts-expand .post-title {
        font-size: 22px;
    }
    .posts-expand .post-meta {
        font-size: 10px;
    }
    .post {
        margin-bottom: 30px !important;
        padding: 20px 15px 15px 15px !important;
    }
    .post-body h2, h3, h4, h5, h6 {
        margin-left: -15px;
        padding-left: 11px;
    }
    .posts-expand .post-tags {
        margin-top: 10px;
    }
    .post-widgets {
        margin-top: 10px;
    }
    .comments {
        margin: 40px 0px 40px 0px !important;
    }
    .footer {
        // box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
    }
}
.sidebar-active #sidebar-dimmer {
    opacity: 0;
}
// 移动端左上角菜单按钮
.site-nav-toggle {
    top: 35px;
    left: 91px;
    // background-color: #222;
}
.btn-bar {
    background-color: rgb(255, 255, 255);
}
// 移动端菜单
@media (max-width: 767px) {
    .menu {
        text-align: center;
        // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }
    .site-nav {
        top: initial;
        background-color: rgba(255, 255, 255, 0.75);
        border-top: none;
        border-bottom: none;
        position: relative;
        z-index: 1024;
    }
}
//移动端顶部
@media (max-width: 767px) {
    .site-title {
        font-size: 28px !important;
        letter-spacing: 0px !important;
    }
    .site-subtitle{
        letter-spacing: 0px !important;
        padding-bottom: 0px !important;
    }
    .site-meta {
        // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }
    .menu .menu-item {
        margin: 0px 10px !important;
    }
}

Configuration avancée des fonctions avancées

Définir un titre dynamique

themes/next/source/js/srcCréé sous dytitle.js:

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    
    
    if (document.hidden) {
    
    
        $('[rel="shortcut icon"]').attr('href', "/TEP.png");
        document.title = 'w(ﾟДﾟ)w 出BUG啦！！！！';
        clearTimeout(titleTime);
    }
    else {
    
    
        $('[rel="shortcut icon"]').attr('href', "/favicon.png");
        document.title = '♪(^∇^*)又好了。。。 ' + OriginTitile;
        titleTime = setTimeout(function () {
    
    
            document.title = OriginTitile;
        }, 2000);
    }
});

Modifiez thèmes/next/layout/layout.swing, ajoutez avant :

<script type="text/javascript" src="/js/src/dytitle.js"></script>

Ajouter le temps écoulé à la barre latérale

Modifiez le fichier : themes/next/layout/_custom/sidebar.swig, ajoutez le code suivant :

BirthDay=new Date("05/27/2017 15:13:14");Changez la date par la vôtre

<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()",1000);
BirthDay=new Date("05/27/2017 15:13:14");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

modifier le fichierthemes/next/layout/_macro/sidebar.swig

        {# Blogroll #}
        {% if theme.links %}
          <div class="links-of-blogroll motion-element {
   
   { "links-of-blogroll-" + theme.links_layout | default('inline') }}">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-{
   
   { theme.links_icon | default('globe') | lower }}"></i>
              {
   
   { theme.links_title }}&nbsp;
              <i class="fa  fa-fw fa-{
   
   { theme.links_icon | default('globe') | lower }}"></i>
            </div>
            <ul class="links-of-blogroll-list">
              {% for name, link in theme.links %}
                <li class="links-of-blogroll-item">
                  <a href="{
   
   { link }}" title="{
   
   { name }}" target="_blank">{
   
   { name }}</a>
                </li>
              {% endfor %}
            </ul>
+        {% include '../_custom/sidebar.swig' %}
          </div>
         {% endif %}

-        {% include '../_custom/sidebar.swig' %}

Cliquez pour afficher l'effet d'amour

/themes/next/source/js/love.jsCréez un nouveau fichier ci-dessous love.js, puis copiez et collez le code sous le lien dans love.jsle fichier

!function (e, t, a) { function n() { c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() } function r() { for (var e = 0; e < d.length; e++)d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document);

\themes\next\layout\_layout.swigAjoutez à la fin du fichier :

{% include '_third-party/exturl.swig' %}
</body>
</html>
+ <!-- 页面点击小红心 -->
+ <script type="text/javascript" src="/js/src/love.js"></script>

Cliquez sur l'avatar pour revenir à la page d'accueil du blog

Modifiez le fichier /themes/next/layout/_macro/sidebar.swiget ajoutez le code suivant :

+        <a href="/">
          <img class="site-author-image" itemprop="image"
               src="{
   
   { url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
               alt="{
   
   { theme.author }}" />
+        </a>

Augmenter le service de partage de contenu

Modifiez themes/next/_config.ymlle fichier de configuration du thème, recherchez des mots-clés needmoreshare2, recherchez le code suivant et effectuez les modifications suivantes :

# 文章分享功能
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: vertical
      position: topRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

Concernant l'échec du chargement de l'image du QR code WeChat en cours de partage, merci à Qcmoke pour sa solution

Dans la prochaine version 5.1.4, WeChat ne peut pas charger le code QR. Il se peut que le lien de partage WeChat emballé ne soit pas valide. Je
https://github.com/iissnan/hexo-theme-nextl'ai installé via l'ancienne version de l'entrepôt, j'ai donc ce problème, mais la nouvelle version de next n'a pas ce problème. Le nouveau référentiel de versions a été déplacé vershttps://github.com/theme-next

Entrez la commande suivante :

rm -rf themes/next/source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton

Augmenter la fonction de recherche d'articles dans le site

Pour installer le plugin hexo-generator-searchdb, exécutez la commande suivante :

npm install hexo-generator-searchdb --save

Modifiez hexo/_config.ymlle fichier de configuration du site et ajoutez le code suivant à la fin :

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Modifiez themes/next/_config.ymlle fichier de configuration du thème, recherchez des mots-clés local_searchpour trouver le code suivant, enabledéfinissez-le comme truesuit :

local_search:
  enable: true

Augmentez le nombre de mots de l'article et la fonction de temps de lecture

Pour installer le plugin hexo-wordcount, exécutez la commande suivante :

 npm install hexo-wordcount --save

Modifiez themes/next/_config.ymlle fichier de configuration du thème, recherchez des mots-clés post_wordcountet modifiez comme suit :

post_wordcount:
  item_text: true
  wordcount: true #单篇文章字数
  min2read: true #单篇阅读时长
  totalcount: true #站点总字数
  separated_meta: true

Ajouter une fonction de statistiques d'accès au site

Le thème suivant intègre par défaut des plug-ins de statistiques d'accès tiers.

Modifiez themes/next/_config.ymlle fichier de configuration du thème et recherchez des mots-clésbusuanzi_count :

# 不蒜子统计，用于在页脚显示总访客数和总浏览量，将 false 改为 true 就能直接使用
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 
  site_pv_footer: 
  # custom pv span for one page only
  # 页面浏览量，不建议开启，建议用上面的 leancloud_visitors
  # 首先 leancloud 更稳定，其次 leancloud 便于管理
  # 最后，可以利用 leancloud 的 api 建立 TopX 页面
  page_pv: false
  page_pv_header: <i class="fa fa-eye"></i>
  page_pv_footer:

Actuellement, le nom de domaine « dn-lbstatics.qbox.me » a expiré, veuillez changer le nom de domaine en « busuanzi.ibruce.info » ! Par conséquent, vous devrez peut-être modifier > les informations relatives au fichier suivantes :

Modifiez themes/next/layout/_third-party/analytics/busuanzi-counter.swigle fichier, recherchez dn-lbstatics.qbox.meet modifiez le code :

> <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
>

Fonction principale de l'article

Supprimez les plugins installés par défaut :

npm uninstall hexo-generator-index --save

Installez de nouveaux plugins :

npm install hexo-generator-index-pin-top --save

Enfin, lors de la modification d'articles associés avec cette exigence, ajoutez une ligne à Front-matter (la zone séparée par - en haut du fichier) :

top: true

Si vous épinglez plusieurs articles, comment contrôlez-vous l’ordre ? Définissez la valeur de top (plus grand devant), par exemple :

# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10

L'article b est affiché avant l'article a.

LeanCloud compte le nombre d'articles lus

Il a été fourni par les grands. Pour plus de détails, veuillez cliquer sur le sujet Hexo blog-NexT : Utiliser Leancloud pour les statistiques de visite des pages

Ajouter un système de notation en bas de l'article

Je suis porteur, veuillez consulter Ultra Deep Optimization - Section 5.6 pour plus de détails

Ajouter une page TopX

Je suis paresseux, veuillez consulter la section optimisation ultra-profonde-5.8 pour plus de détails

système de commentaires

Si vous êtes déjà inscrit ci-dessus ( cliquez iciLeanCloud si vous n'êtes pas inscrit ), alors définissez simplement le et et modifiez le fichier de configuration du thème :appidappkey

# 评论系统
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  #your id
  appkey:  #your key
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

À propos de la mise à jour et de la mise à niveau du thème

Pour mettre à niveau le thème, nous devons reconfigurer le fichier de configuration du thème, devons-nous donc le faire à chaque mise à niveau ? Super gênant !

La suggestion donnée par l'auteur de NexT est d'utiliser des fichiers de données . Pour plus de détails, veuillez saisir les configurations du thème à l'aide des fichiers de données Hexo #328.

Postez le résumé suivant :

  1. Veuillez vous assurer que la version Hexo que vous utilisez est supérieure à 3
  2. Créez un nouveau fichier next.yml dans le répertoire source/_data du site (le répertoire _data devra peut-être être créé)
  3. Migrez la configuration du fichier de configuration du site et du fichier de configuration du thème vers next.yml

Toutes les configurations liées au thème peuvent être écrites dans le fichier next.yml. Le _config.yml dans le répertoire du thème n'a pas besoin d'être modifié.

Si vous êtes nouvellement installé, vous pouvez copier l'intégralité du contenu du _config.yml du thème puis le modifier

Si vous avez déjà écrit la configuration dans le _config.yml du site, coupez la configuration liée au thème dans ce fichier dans next.yml ; en même temps, copiez la configuration dans _config.yml sous le thème, ce qui équivaut à tous fusionnés dans next.yml.

Chaque fois que vous modifiez _next.yml, vous devez redémarrer le serveur hexo pour prendre effet.

Articles sur les moteurs de recherche avancés

Lorsque des articles de blog sont rédigés, personne ne s’en soucie car les moteurs de recherche n’indexent pas nos articles

Si vous souhaitez inclure des articles dans les moteurs de recherche, vous devez d'abord avoir votre propre nom de domaine. Comment acheter un nom de domaine peut se référer à cet article

Référez-vous à cet [Article sur la liaison de domaine] la configuration du patron

Pour savoir comment optimiser, veuillez vous référer directement à cette configuration principale [Optimisation de la recherche] Hexo-next Baidu et Google pour l'optimisation de la recherche.

référence:

  1. http://yangbingdong.com/2017/build-blog-hexo-advanced/
  2. https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html
  3. http://www.ehcoo.com/seo.html
  4. https://www.qcmoke.site/hexo_next.html

Je suppose que tu aimes

Origine blog.csdn.net/u012294515/article/details/83094693
conseillé
Classement
du quotidien
Plus
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)
2024-07-12(0)
2024-07-11(0)
2024-07-10(0)
2024-07-09(0)
2024-07-08(0)

Code World

© 2018 codetd.com