Trumpas Hexo tinklaraščio kūrimo vadovas nuo nulio (2024 m. leidimas)

#Tinklaraščio kūrimas

Ar jau seniai pavargote nuo estetiškai nepatrauklių tinklaraščių platformų sąsajų? Atsibodo nesibaigiantys svetainių pranešimai? Ar visada norėjote susikurti savo tinklaraštį, bet sustabdė sudėtingi vadovėliai ir galvos skausmą keliantis kodas? Jei taip, sveikiname, šis straipsnis skirtas būtent jums! Jame žingsnis po žingsnio ir kuo paprasčiau parodysime, kaip susikurti savo tinklaraštį. Jums prireiks tik šiek tiek kantrybės ir tereikės sekti nurodymus.

„Hexo“, kaip greita, paprasta ir efektyvi tinklaraščių sistema, yra tikras išsigelbėjimas pradedantiesiems, o „GitHub“ išvaduoja mus nuo papildomo serverių nuomos ir diegimo vargo. Todėl šiame straipsnyje tinklaraštį kursime naudodami „Hexo“ ir „GitHub“.

2018 metais jau buvau parašęs trumpą vadovą, kaip susikurti tinklaraštį nuo nulio. Tačiau dėl įskiepių atnaujinimų atsirado tam tikrų detalių, kurias reikia pakeisti, todėl iš naujo pristatome 2024 m. leidimo trumpą vadovą.

Pasiruošimas

Vietinio „Hexo“ statinio tinklaraščio kūrimas

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

Taip, pagrindinė tinklaraščio dalis jau baigta! Pažiūrėkime, kaip atrodo. Paleiskite:

$ hexo server

Dabar atidarykite naršyklę ir įveskite localhost:4000 – pamatysite dabartinę tinklaraščio išvaizdą. Trumpam pasidžiaukite, tada paspauskite Ctrl + C ir galėsite tęsti tolesnius veiksmus.

Pirminiai individualūs nustatymai

Temos keitimas

$ 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 #arba hexo generate
hexo server

Svetainės konfigūracija

# Site
title: Nežinomas pasaulis             // Tinklaraščio pavadinimas
subtitle:
description:  Do something cool // Parašas
author: LulalaP                 // Autorius
language: zh-Hans               // Svetainės kalba
timezone:

Šoninės juostos avataro nustatymas

avatar:
    url: /uploads/avatar.jpg

Tinklaraščio puslapių tobulinimas

Meniu pridėjimas

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

Kategorijų puslapio kūrimas

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

Žymų debesies puslapio kūrimas

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

„Apie mane“ puslapio kūrimas

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

Šoninės juostos socialinių tinklų nuorodų nustatymas

# 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

Tinklaraščio susiejimas su „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

Dabar atidarykite naršyklę ir apsilankykite http://your-name.github.io. Sveikiname, jūsų tinklaraštis jau visiškai sukonfigūruotas!

Domeno susiejimas

Šiuo metu tinklaraštis yra visiškai sukonfigūruotas ir pasiekiamas per „GitHub“ domeną. Būtų tobula, jei prie šio tinklaraščio būtų galima susieti trumpesnį domeną.

Domeno įsigijimas

Domeno DNS nustatymai

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Sukonfigūravę domeno DNS nustatymus, eikite į tinklaraščio katalogą, aplanke source sukurkite failą pavadinimu CNAME (atkreipkite dėmesį, kad jis turi būti didžiosiomis raidėmis ir be plėtinio). Atidarykite jį užrašine ir įrašykite įsigytą domeną, pvz.: www.philoli.com.

hexo g
hexo d

Dabar atidarykite naršyklę, įveskite domeno pavadinimą, paspauskite Enter ir sveikiname – jau turite tinklaraštį su savo nepriklausomu domenu.

Naujų straipsnių publikavimas

title Straipsnio pavadinimas
date Sukūrimo data (failo sukūrimo data)
updated Paskutinio atnaujinimo data (failo modifikavimo data)
comments Ar įjungti komentarus true
tags Žymės
categories Kategorijos
permalink URL pavadinimas (failo pavadinimas)
hexo g
hexo d

Individualūs nustatymai (pažengusiems)

Žemiau pateikiami kai kurie pažangesni tinklaraščio stiliaus nustatymai. Pradedantieji gali kol kas praleisti šią dalį.

RSS pridėjimas

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

Straipsnių karpymas pagrindiniame puslapyje

    <!--more-->

Citatos teksto centravimas straipsniuose

{% centerquote %}
Citatos tekstas
{% endcenterquote %}

{% centerquote %} Citatos tekstas {% endcenterquote %}

Kodo blokų stiliaus keitimas

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:

Svetainės sukūrimo datos nustatymas

since: 2024

Straipsnių nuorodų stiliaus patobulinimas

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

Tinklaraščiui fono paveikslėlio pridėjimas

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //ar paveikslėlis kartojamas ir kaip, jei neužpildo viso ploto
    background-attachment:fixed;    //ar paveikslėlis slenka kartu su puslapiu
    background-size: cover;         //apima visą plotą
    background-position:50% 50%;    //paveikslėlio pozicija
}

Tinklaraščio turinio fono nustatymas pusiau permatomu


// Tinklaraščio turinio skaidrumas
// Straipsnio turinio skaidrumo nustatymai
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;
  }
}


// Šoninės juostos skaidrumo nustatymai
.sidebar {
  opacity: 0.9;
}

// Meniu juostos skaidrumo nustatymai
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Paieškos laukelio (local-search) skaidrumo nustatymai
.popup {
  opacity: 0.9;
}

Įterptųjų kodo blokų stiliaus optimizavimas

// Kodo žymų stilius
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Svetainės apačioje pridėkite lankytojų skaičių

# Raskite copyright žymą ir įterpkite kodą į jos vidų

<div class="copyright">
# ......Čia jau yra tam tikrų nustatymų
# Čia pridėkite naują kodą
</div>

# Po pridėjimo atrodo taip:
<div class="copyright">
  # ......Čia jau yra tam tikrų nustatymų
  # Čia pridėkite naują kodą
  {%- 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
# Įsitikinę, kad viskas gerai, publikuokite
hexo d

README.md failo pridėjimas į repozitoriją

Kiekvienas projektas paprastai turi README.md failą, tačiau naudojant „Hexo“ diegimą į repozitoriją, projekto README.md failas bus perrašytas. Todėl reikia nustatyti konfigūracijos failą, kad būtų išvengta perrašymo.

„Hexo“ katalogo source šakniniame aplanke pridėkite README.md failą, pakeiskite svetainės konfigūracijos failą _config.yml, nustatydami skip_render parametro reikšmę į:

skip_render: README.md

Išsaugokite ir išeikite. Kitą kartą naudojant hexo d komandą tinklaraščiui diegti, README.md failas nebus apdorojamas.

Keletas dažnai naudojamų įskiepių

Šaltinio failų atsarginė kopija

# Pridėkite anksčiau nustatytą tinklaraščio repozitorijos adresą
git remote add https://github.com/your-name/your-name.github.io.git

# Pridėkite ir išsaugokite dabartinius pakeitimus, su komentaru
git add .
git commit -m "Šaltinio failų atnaujinimas"

# Sukurkite ir persijunkite į naują šaką
git checkout -b source

# Visą vietinės „source“ šakos turinį įkelkite į nuotolinės repozitorijos „source“ šaką
git push origin source:source

Tinklaraščio rašymas naudojant skirtingus kompiuterius

npm install -g hexo-cli
# Klonuokite repozitoriją į vietinį kompiuterį
git clone https://github.com/your-name/your-name.github.io.git

# Jei jau esate klonavę repozitoriją, prieš kiekvieną tinklaraščio atnaujinimą turite atsisiųsti naujausią šakos turinį
git pull origin

# Persijunkite į atitinkamą šaką
git checkout source

# Įdiegus visus „Hexo“ konfigūracijos įskiepius, galite pradėti atnaujinti ir redaguoti tinklaraščio turinį
npm install

# Pakeitus turinį, nepamirškite viską iškart atsisiųsti ir išsaugoti
git add .
git commit -m "Tinklaraščio atnaujinimas xxx"
git push origin source:source

# Paskelbkite ir įkelkite naujausią tinklaraščio turinį į domeno svetainę
hexo clean
hexo g  # Sugeneruoti statinius failus
hexo s  # Peržiūrėti tinklaraščio efektą vietoje
hexo d  # Paskelbti naujausią tinklaraščio turinį

Keletas dažnai naudojamų komandų apibendrinimas

hexo g
# arba hexo generate, sugeneruoja statinius tinklalapius iš šaltinio failų
hexo d
# arba hexo deploy, paskelbia ir įkelia į GitHub Pages
hexo s
# arba hexo server, paleidžia vietinį diegimo testą
hexo clean
# išvalykite statinių puslapių talpyklą, tada hexo d iš naujo sugeneruos