Īss ceļvedis Hexo emuāra izveidei no nulles (2024. gada versija)

#Emuāra izveide

Vai jums ir apnicis emuāru vietņu nepievilcīgais izskats? Vai esat noguris no nebeidzamajiem vietņu paziņojumiem? Vai jau sen vēlaties izveidot savu emuāru, bet sarežģītas pamācības un galvassāpes radošs kods jūs attur? Tad apsveicu! Šis raksts soli pa solim, visvienkāršākajā veidā, iemācīs jums izveidot savu emuāru. Jums nepieciešama tikai nedaudz pacietības, un jums jāseko norādījumiem soli pa solim.

Hexo ir ātrs, vienkāršs un efektīvs emuāru ietvars, kas ir īsta svētība iesācējiem. Un GitHub atbrīvo mūs no nepieciešamības papildus īrēt un izvietot serveri. Tāpēc šajā rakstā mēs izmantosim Hexo un GitHub, lai izveidotu emuāru.

  1. gadā es uzrakstīju īsu ceļvedi emuāra izveidei no nulles. Taču, pateicoties spraudņu atjauninājumiem, bija nepieciešamas dažas izmaiņas, tāpēc tagad esmu sagatavojis 2024. gada atjaunināto ceļvedi.

Sagatavošanās

Vietējā Hexo statiskā emuāra izveide

$ npm install -g hexo-cli
$ hexo init
$ npm install

Tieši tā, emuāra galvenā daļa ir pabeigta! Apskatīsim rezultātu. Izpildiet:

$ hexo server

Tagad atveriet pārlūkprogrammu un ievadiet localhost:4000, lai redzētu, kā izskatās jūsu emuārs. Nedaudz sajūsmināti aplūkojiet to, tad nospiediet Ctrl + C, lai turpinātu ar nākamajām darbībām.

Personalizēšanas iestatījumi (sākotnējie)

Tēmas maiņa

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g #vai hexo generate
hexo server

Vietnes konfigurācija

# Site
title: Nezināmā Pasaule                // Emuāra nosaukums
subtitle:
description:  Do something cool // Īss apraksts
author: LulalaP                 // Autors
language: zh-Hans               // Vietnes valoda
timezone:

Sānu joslas profila attēla iestatīšana

avatar:
    url: /uploads/avatar.jpg

Emuāra lapu pilnveidošana

Izvēlnes pievienošana

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Kategoriju lapas izveide

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Birku mākoņa lapas izveide

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

Lapas “Par mani” izveide

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

Sānu joslas sociālo saišu iestatīšana

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Emuāra saistīšana ar GitHub

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

Tagad atveriet pārlūkprogrammu un apmeklējiet http://your-name.github.io. Apsveicu, jūsu emuārs ir pilnībā izveidots!

Domēna vārda piesaiste

Emuārs ir pilnībā izveidots un pieejams caur GitHub domēnu, taču vēl labāk būtu to piesaistīt īsākam domēna vārdam.

Domēna iegāde

Domēna vārda risināšana (DNS)

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Pēc domēna risināšanas konfigurēšanas ieejiet emuāra direktorijā, mapē source izveidojiet jaunu failu ar nosaukumu CNAME (ņemiet vērā, ka jābūt lielajiem burtiem un bez paplašinājuma). Atveriet to ar Notepad un ierakstiet iegādāto domēna vārdu, piemēram: www.philoli.com.

hexo g
hexo d

Tagad atveriet pārlūkprogrammu, ievadiet domēna vārdu un nospiediet Enter. Apsveicu, jums ir savs emuārs ar neatkarīgu domēna vārdu!

Jauna raksta publicēšana

title Raksta virsraksts
date Izveidošanas datums (faila izveidošanas datums)
updated Modifikācijas datums (faila modifikācijas datums)
comments Vai iespējot komentārus true
tags Birtas
categories Kategorijas
permalink Nosaukums URL (faila nosaukums)
hexo g
hexo d

Personalizēšanas iestatījumi (padziļināti)

Zemāk ir sniegti daži padziļināti emuāra stila personalizācijas iestatījumi. Iesācēji tos var pagaidām izlaist.

RSS pievienošana

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

Rakstu saīsināšana sākumlapā

    <!--more-->

Citētā teksta centrēšana rakstos

{% centerquote %}
Citētais teksts
{% endcenterquote %}

{% centerquote %} Citētais teksts {% endcenterquote %}

Koda bloka stila maiņa

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Vietnes izveidošanas laika iestatīšana

since: 2024

Rakstu saišu stila uzlabošana

// link style
.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;
  }
}

Fona attēla pievienošana emuāram

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Kad attēls neaizpilda visu, vai atkārtot un kādā veidā
    background-attachment:fixed;    // Vai attēls seko ritināšanai
    background-size: cover;         // Pārklāj
    background-position:50% 50%;    // Attēla pozīcija
}

Emuāra satura fona caurspīdīguma iestatīšana


// Emuāra satura caurspīdīgums
// Rakstu satura caurspīdīguma iestatījumi
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


// Sānu joslas caurspīdīguma iestatījumi
.sidebar {
  opacity: 0.9;
}

// Izvēlnes joslas caurspīdīguma iestatījumi
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Meklēšanas lodziņa (local-search) caurspīdīguma iestatījumi
.popup {
  opacity: 0.9;
}

Rindas koda bloku stila optimizācija

// Koda tagu estētikas uzlabošana
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Apmeklētāju skaita pievienošana vietnes kājenē

# Atrodiet "copyright" tagu joslu un pievienojiet kodu taga iekšpusē

<div class="copyright">
# ...... šeit jau ir daži iestatījumi
# Pievienojiet jauno kodu šeit
</div>

# Pēc pievienošanas izskatīsies šādi:
<div class="copyright">
  # ...... šeit jau ir daži iestatījumi
  # Pievienojiet jauno kodu šeit
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Pēc apstiprināšanas publicējiet
hexo d

README.md faila pievienošana repozitorijam

Katrā projektā parasti ir README.md fails, taču, izvietojot to repozitorijā ar Hexo, projekta README.md fails tiks pārrakstīts. Tāpēc ir jākonfigurē iestatījumi, lai izvairītos no pārrakstīšanas.

Mapes Hexo saknes direktorijā source pievienojiet failu README.md. Modificējiet vietnes konfigurācijas failu _config.yml, iestatot parametra skip_render vērtību uz:

skip_render: README.md

Saglabājiet un izejiet. Nākamreiz, izvietojot emuāru ar komandu hexo d, README.md fails netiks renderēts.

Daži noderīgi spraudņi

Avota failu dublēšana

# Pievienojiet iepriekš iestatīto emuāra repozitorija adresi
git remote add https://github.com/your-name/your-name.github.io.git

# Pievienojiet un saglabājiet pašreizējās izmaiņas, pievienojot piezīmi
git add .
git commit -m "Avota failu atjaunināšana"

# Izveidojiet un pārslēdzieties uz jaunu zaru
git checkout -b source

# Augšupielādējiet visu lokālā "source" zara saturu uz attālā repozitorija "source" zaru
git push origin source:source

Emuāra rakstīšana no dažādiem datoriem

npm install -g hexo-cli
# Klonējiet repozitoriju lokāli
git clone https://github.com/your-name/your-name.github.io.git

# Ja repozitorijs jau ir klonēts lokāli, pirms katras emuāra atjaunināšanas ir jālejupielādē jaunākais zara saturs
git pull origin

# Pārslēdzieties uz atbilstošo zaru
git checkout source

# Pēc visu Hexo konfigurācijas spraudņu instalēšanas varat sākt atjaunināt un rediģēt emuāra saturu
npm install

# Pēc satura modificēšanas atcerieties nekavējoties veikt dublējumu
git add .
git commit -m "Emuāra atjauninājums xxx"
git push origin source:source

# Publicējiet un augšupielādējiet jaunāko emuāra saturu domēna vietnē
hexo clean
hexo g  # Ģenerēt statiskos failus
hexo s  # Priekšskatīt emuāru lokāli
hexo d  # Publicēt jaunāko emuāra saturu

Dažu biežāk izmantoto komandu kopsavilkums

hexo g
# vai hexo generate, ģenerē statiskās tīmekļa lapas no avota failiem
hexo d
# vai hexo deploy, publicē un augšupielādē GitHub Pages
hexo s
# vai hexo server, lokāla izvietošana un testēšana
hexo clean
# Iztīra statisko tīmekļa lapu kešatmiņu, pēc tam hexo d atkārtoti ģenerē