Hexo | NexT para criar um blog legal

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

Diretório de artigos

escrito na frente

Este artigo é principalmente sobre configuração do tema NexT e otimização de estilo de página, referindo-se aos artigos e arquivos de configuração de muitos grandes nomes.

Os artigos referenciados neste artigo marcarão diretamente a fonte na forma de um link para o texto original, mas o Google referenciou muitos, se houver alguma omissão, indique.

Durante todo o processo de otimização e configuração do blog no estágio inicial, muitos blogs bons foram coletados e posso postar um link amigável mais tarde para que todos possam dar uma olhada.

A otimização subsequente do conteúdo deste artigo será melhorada no blog

Durante o processo de referência, você vai precisar sair da parede para dar uma olhada, e dar um jeito, você pode usar se precisar, a escada

definição básica

Existem dois arquivos de configuração principais no Hexo, ambos chamados _config.yml. Dentre eles, um está localizado no diretório raiz do site, que contém principalmente a configuração do próprio Hexo; o outro está localizado no diretório do tema, que é fornecido pelo autor do tema e é usado principalmente para configurar opções relacionadas ao tema.

Para conveniência da descrição, na descrição a seguir, o primeiro será referido como 站点配置文件e o último será referido como 主题配置文件.

~/hexo/_config.yml

~/hexo/themes/next/_config.yml

construção de blog

Para saber como construir um blog, consulte isto [ Hexo constrói seu próprio blog personalizado ]

Funções Básicas Elementares

arquivo de configuração do site

O mais confiável, claro, é ler primeiro a documentação oficial do Hexo .

Aqui está o arquivo de configuração que estou usando:

# 站点设置
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> #自定义标题

Estilo de página da web

precisa saber

Basta pressionar F12 no navegador, é recomendado usar o navegador Google Chrome para depuração.

Arquivo de estilo personalizado:themes\next\source\css\_custom\custom.styl

Após modificar o arquivo, salve-o diretamente e atualize a página para visualizar o efeito.

Modifique a largura da página do artigo

Abra themes/next/source/css/_variables/base.styl, encontre os seguintes campos e modifique para a largura apropriada:

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

Modifique a cor do pequeno bloco de código

Modifique \themes\next\source\css\ _variables\base.stylo arquivo e adicione cores personalizadas:

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

Modifique o valor $code-backgroundda $code-foregroundsoma:

// 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

Modifique themes\next\source\css\_custom\custom.stylo arquivo e adicione estilos personalizados

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

Modificar estilo de texto do link

Modifique themes\next\source\css\_custom\custom.stylo arquivo e adicione estilos personalizados

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

Modifique o estilo do botão [Leia mais]

Modifique themes\next\source\css\_custom\custom.stylo arquivo e adicione estilos personalizados

// [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%);
}

Modifique a cor da nuvem de tags (tagcloud)

Modifique themes/next/layout/page.swigo arquivo e adicione estilos personalizados:

- {
   
   { 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'}) }}

Basta modificar o valor do parâmetro correspondente. Para descrição do parâmetro, consulte o documento oficial Hexo

Modifique o rótulo # na parte inferior do artigo e altere-o para um ícone

Modifique o modelo /themes/next/layout/_macro/post.swig, pesquise rel="tag">#, substitua # por<i class="fa fa-tag"></i>

O avatar tem uma forma circular e o efeito de rotação permanece

Modifique themes\next\source\css\_common\components\sidebar\sidebar-author.styl, adicione o seguinte código:

.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);
+ }

Ocultar o conteúdo inferior da "unidade de energia"

Modifique themes/next/_config.ymlo arquivo, defina powerede enableparafalse

# 页脚
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

Adicione a tag “fim do artigo” no final do artigo

Modifique em themes/next/layout/_macro/post.swig, wechat-subscriber.swigadicione o seguinte código antes:

+ <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 %}

Anexe informações de direitos autorais no final do artigo

Existem duas maneiras de aumentar os direitos autorais

  1. modificar tema 配置文件, pesquisarpost_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. Se você acha que o padrão não é bonito, você pode personalizar o estilo, localizá-lo themes/next/layout/_macro/post.swige footeradicionar o seguinte código antes dele (certifique-se de que o estilo foi adicionado antes de adicionar):
<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>

Exibir o botão voltar ao topo e a barra lateral no celular

O celular específico mostra que os celulares podem ser usados ​​para visitar meu blog

O tema do meu blog é Muse, e o modelo de design do tema é Muse ou Mist, que pode ser configurado diretamente no arquivo de configuração do tema:

Modificar configuração do temathemes/next/_config.yml

# Enable sidebar on narrow view
onmobile: true

Como depurar a página de estilo móvel, consulte a figura abaixo

Depois que a página for depurada, copie o código para:themes\next\source\css\_custom\custom.styl

Para obter detalhes, consulte meu arquivo de estilo custom.styl

Em anexo está meu arquivo de estilo custom.styl

Não é recomendado copiar e colar todos eles, é melhor abri-lo com F12, encontrar o estilo correspondente de acordo com o ID da chave e copiá-lo para seu próprio arquivo

// 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;
    }
}

Configuração avançada de funções avançadas

Definir título dinâmico

themes/next/source/js/srcCriado em 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);
    }
});

Modifique temas/next/layout/layout.swing, adicione antes:

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

Adicione o tempo decorrido à barra lateral

Modifique o arquivo: themes/next/layout/_custom/sidebar.swig, adicione o seguinte código:

BirthDay=new Date("05/27/2017 15:13:14");Altere a data para a sua

<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>

modificar arquivothemes/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' %}

Clique para mostrar efeito de amor

/themes/next/source/js/love.jsCrie um novo arquivo abaixo love.jse copie e cole o código do link no love.jsarquivo

!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.swigAdicione no final do arquivo:

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

Clique no avatar para retornar à página inicial do blog

Modifique o arquivo /themes/next/layout/_macro/sidebar.swige adicione o seguinte código:

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

Aumente o serviço de compartilhamento de conteúdo

Modifique themes/next/_config.ymlo arquivo de configuração do tema, pesquise palavras-chave needmoreshare2, encontre o seguinte código e faça as seguintes modificações:

# 文章分享功能
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

Em relação à falha no carregamento da imagem do código QR do WeChat que está sendo compartilhada, obrigado ao Qcmoke por sua solução

Na próxima versão 5.1.4, o WeChat não pode carregar o código QR. Deve ser que o link de compartilhamento do WeChat empacotado seja inválido. Instalei
https://github.com/iissnan/hexo-theme-nextatravés da versão antiga do warehouse, então estou com esse problema, mas a nova versão do next não tem esse problema. O repositório da nova versão foi movido parahttps://github.com/theme-next

Digite o seguinte comando:

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

Aumente a função de busca de artigos no site

Para instalar o plugin hexo-generator-searchdb, execute o seguinte comando:

npm install hexo-generator-searchdb --save

Modifique hexo/_config.ymlo arquivo de configuração do site e adicione o seguinte código no final:

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

Modifique themes/next/_config.ymlo arquivo de configuração do tema, pesquise palavras-chave local_searchpara encontrar o seguinte código e enabledefina-o da trueseguinte forma:

local_search:
  enable: true

Aumente a contagem de palavras do artigo e a função de tempo de leitura

Para instalar o plugin hexo-wordcount, execute o seguinte comando:

 npm install hexo-wordcount --save

Modifique themes/next/_config.ymlo arquivo de configuração do tema, pesquise palavras-chave post_wordcounte modifique da seguinte forma:

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

Aumente a função de estatísticas de acesso ao site

O próximo tema integra plug-ins de estatísticas de acesso de terceiros por padrão.

Modifique themes/next/_config.ymlo arquivo de configuração do tema e pesquise palavras-chave busuanzi_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:

Atualmente, o nome de domínio "dn-lbstatics.qbox.me" expirou, altere o nome de domínio para "busuanzi.ibruce.info"! Portanto, pode ser necessário modificar as seguintes informações relacionadas ao arquivo:

Modifique themes/next/layout/_third-party/analytics/busuanzi-counter.swigo arquivo, encontre dn-lbstatics.qbox.mee modifique o código:

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

Função superior do artigo

Remova os plug-ins instalados por padrão:

npm uninstall hexo-generator-index --save

Instale novos plug-ins:

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

Por fim, ao editar artigos relacionados com este requisito, adicione uma linha ao Front-matter (a área separada por - no topo do arquivo):

top: true

Se você fixar vários artigos, como você controla o pedido? Defina o valor de top (maior na frente), por exemplo:

# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10

O artigo b é exibido antes do artigo a.

LeanCloud conta o número de artigos lidos

Foi fornecido pelos grandes. Para obter detalhes, clique no tópico Hexo blog-NexT: Usando leancloud para estatísticas de visitantes da página

Adicione um sistema de pontuação no final do artigo

Eu sou um porteiro, consulte Ultra Deep Optimization - Seção 5.6 para obter detalhes

Adicionar página TopX

Sou preguiçoso, consulte a seção otimização ultraprofunda 5.8 para obter detalhes

sistema de comentários

Se você já se cadastrou acima ( clique aquiLeanCloud se ainda não se cadastrou ), basta definir o e e modificar o arquivo de configuração do tema: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

Sobre atualização e atualização do tema

Para atualizar o tema, precisamos reconfigurar o arquivo de configuração do tema, então temos que fazer isso toda vez que atualizarmos? Super problemático!

A sugestão dada pelo autor do NexT é usar arquivos de dados . Para detalhes, insira as configurações do tema usando arquivos de dados Hexo #328

Poste o seguinte resumo:

  1. Certifique-se de que a versão Hexo que você está usando seja superior a 3
  2. Crie um novo arquivo next.yml no diretório source/_data do site (pode ser necessário criar o diretório _data)
  3. Migre a configuração no arquivo de configuração do site e no arquivo de configuração do tema para next.yml

Todas as configurações relacionadas ao tema podem ser gravadas no arquivo next.yml. O _config.yml no diretório do tema não precisa ser modificado.

Se você tiver instalado recentemente, poderá copiar todo o conteúdo do _config.yml do tema e modificá-lo

Se você escreveu a configuração no _config.yml do site antes, corte a configuração relacionada ao tema neste arquivo para next.yml; ao mesmo tempo, copie a configuração em _config.yml sob o tema, o que equivale a todos mesclados em next.yml.

Cada vez que você modifica _next.yml, é necessário reiniciar o servidor hexo para que tenha efeito.

Artigos de mecanismos de pesquisa avançados

Quando os artigos do blog são escritos, ninguém se preocupa com eles porque os motores de busca não indexam nossos artigos

Se quiser incluir artigos nos motores de busca, você deve primeiro ter seu próprio nome de domínio. Como comprar um nome de domínio pode consultar este artigo

Consulte este [artigo de vinculação de domínio] a configuração do chefe

Para saber como otimizar, consulte diretamente esta [Otimização de pesquisa] Hexo-next Baidu e configuração mestre de otimização de pesquisa do Google

referência:

  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

Acho que você gosta

Origin blog.csdn.net/u012294515/article/details/83094693
Recomendado
Clasificación
Diario
Más
2024-06-04(0)
2024-06-03(0)
2024-06-02(0)
2024-06-01(0)
2024-05-31(0)
2024-05-30(0)
2024-05-29(0)
2024-05-28(0)
2024-05-27(0)
2024-05-26(0)

Code World

© 2018 codetd.com