hexo theme lite

Tema hexo langsung

Tetap tenang, hidup dan tulis.

Tema Aplikasi Blog Halaman Single Halaman Tunggal, Menggunakan Vue , Vuex , ElementUI dan sebagainya.

Tema Blog Halaman Single Ringan, Berdasarkan Vue , Vuex dan ElementUI

Demo langsung

Demo |

Pratinjau

Mulailah & Instal

1. source node_modules Direktori Root Hexo themes

Pertama masukkan direktori root Hexo , pastikan ada themes , node_modules , source , dan file lain di direktori ini.

 cd my-hexo
ls
# output:
# _config.yml  node_modules  package.json  public  scaffolds  source  themes

2. Unduh rilis terbaru dengan menggunakan git clone

Gunakan perintah git clone untuk mengunduh versi rilis terbaru

git clone https://github.com/HeskeyBaozi/hexo-theme-lite themes/lite

Setelah git clone , hasilnya seperti ini:

Setelah menggunakan perintah, hasilnya akan terlihat seperti ini

3. Edit __config.yml dalam buku harian root Anda.

Ubah theme yang diajukan menjadi lite .

Buka file __config.yml dari direktori root, atur bidang theme untuk lite

 # Extensions
theme : lite

4. Menghasilkan file statis

hexo g

5. Jalankan server Hexo

hexo s

# output:
# INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

6. Masukkan tautan LocalHost Anda untuk melihat pratinjau blog.

Fitur

Edit file live/__ config.yml untuk menyesuaikan tema Anda.

Edit file lite/__ config.yml didefinisikan dengan mendefinisikan tema Anda.

Custm banyak hal

• Avawar |

 avatar :
  enable : true
  url : /static/images/kamuyi.jpg # mapping to '<blog root>/source/static/images/kamuyi.jpg'

Seperti biasa, / dipetakan ke <blog root>/source /source , bukan static static tema.

• Tema Filter Blur |

Anda dapat mengatur jari -jari Gaussian di sini.

Anda dapat mengatur jari -jari Gaussian Blur di sini, efeknya adalah sebagai berikut.

 blur :
  background_color : ' #ffffff '

  # 'true' corresponding to css style 'overflow: hidden'
  # 设置为'true'则对应模糊容器'overflow'选项
  hide_overflow : true

  # Alpha Value of the background color
  # 背景颜色透明值, 启用会导致高斯模糊失效
  opacity :
    enable : false # switch to 'true' will make the gaussian blur lose efficacy
    opacity_value : 0.4

  gaussian_radius : # 高斯模糊程度，数值越大越模糊
    top_navigator : 50 # 40+ preferred
    header : 30 # 5 ~ 50 preferred
    footer : 40 # 5 ~ 100 preferred

  font :
    color : ' #ffffff '

Perhatikan bahwa font.color hanya akan menegaskan warna font di area blur.

Perhatikan bahwa font.color di sini hanya akan mempengaruhi warna font dari area kabur.

• gambar latar belakang |

 background :
  background_color : ' #ffffff '

  # Custom Background Picture
  enable_picture : true
  url : /static/images/miku.jpg
  css_size : cover
  css_position : 50%

  # Gradient color
  gradient_color :
    enable : false # switch to 'true' will make custom background picture lose efficacy
    css_value : ' linear-gradient(to right, rgb(74, 135, 193), rgb(179, 177, 251)) '

Perhatikan bahwa dapat menggunakan warna gradien, ia berfungsi dengan memodifikasi background-image CSS, sehingga akan membuat gambar latar belakang kustom kehilangan efis.

Perhatikan bahwa background-image belakang warna gradien dapat diatur di sini.

Contoh:

 background :
  gradient_color :
    enable : true
    css_value : ' linear-gradient(to right, rgb(74, 135, 193), rgb(179, 177, 251)) ' # options

blur :
  opacity :
    enable : true # switch to 'true' will make the gaussian blur lose efficacy
    opacity_value : 0.4

• POST Kutipan |

Sisipkan <!-- more --> <!-- more --> > Contoh Markdown Raw Anda.

• Item menu teratas | Pengaturan Menu Navigasi Atas

 menu :
  # Basic Menu
  Home : true
  Archives : true
  Categories : false
  Tags : false

  # Custom Menu
  # 'About' link to the 'About' page if there exists '/about/index.md' in your 'source' dir.
  # 这里是一个导航到'关于我'的页面，前提是你需要在你的'source'文件夹有'/about/index.md'文件
  About : /pages/about/index

• Tata Letak Tema |

 theme_layout :
  dependent_footer : true

dependent_footer berarti bahwa tubuh utama terhubung false dekat dengan footer.

dependent_footer menunjukkan bahwa bilah informasi bawah tema false .

• Tautan Sosial |

 social :
  github : https://github.com/heskeybaozi
  weibo : http://weibo.com/52hezhiyu

  # Email link
  email : mailto:[email protected]

social_icons :
  enable : true

  # icon name docs: http://fontawesome.io/icons/
  github : fa-github-alt
  weibo : fa-weibo
  email : fa-envelope
  wechat : fa-weixin
  qq : fa-qq

• Didukung oleh

 powered_by :
  text :  Hexo Theme Lite
  url :  https://github.com/HeskeyBaozi/hexo-theme-lite/ # or false to disable link

• Ikon Situs Web Favicon |

Anda dapat menggunakan file .ico Anda sendiri ( 32px * 32px lebih disukai) untuk membalas favicon.ico asli di bawah direktori /themes/lite/source/static/ .

Anda dapat menggunakan file ikon Anda sendiri, lebih disukai ukuran 32px * 32px untuk mengganti file favicon.ico di bawah direktori /themes/lite/source/static/ .

• Halaman 404 |

 page_404 :
  # enable to use custom 404 page
  enable : false
  # filename of .md file path in your source dir
  source_path : 404/index.md

Fitur keren

• Komentar |

Kami pengguna Gitment untuk sistem komentar.

Apa Gitment ?

Gitment adalah basis sistem komentar tentang masalah gitub, yang dapat digunakan di frontend dengan pencitraan ukuran server.

Gitment adalah sistem komentar "sisi layanan 'yang menggunakan halaman masalah GitHub untuk menyimpan komentar

Klik https://heskeybaozi.github.io/ sini untuk mendaftarkan aplikasi OAuth, dan Anda akan mendapatkan client id dan client secret .

Klik di sini untuk membuat aplikasi Github Oauth, dan Anda akan mendapatkan client id dan client secret . Pastikan untuk memastikan bahwa URL callback mengembalikan nama domain utama Anda, seperti https://heskeybaozi.github.io/ .

 # https://github.com/imsun/gitment#customize
gitment :
  enable : false
  github_id : # your github id
  repository_name : # your repository name

  # client_id & secret will generated after register an OAuth App
  # reference: https://github.com/settings/applications/new
  client_id :
  client_secret :
  per_page : 8 # comments per page
  max_comment_height : 250 # default 250px

• Google Analytics |

 google_analytics :
  enable : false # remember to switch to 'true' when using google analytics

  # replace to your track_id. It starts with 'UA-'.
  # 这里替换为你的跟踪ID，记得打开`enable: true`
  track_id : UA-XXXXXX-X 

Masalah Lain |

• Pastikan Anda telah menginstal hexo-pagination hexo-pagination

npm install --save hexo-pagination # or yarn add hexo-pagination

• Kode pos yang diterjemahkan dalam satu baris?

Pastikan Anda telah memutar plugin highlight di root __config.yml Anda

Pastikan file __config.yml di direktori root Anda adalah untuk membuka plug highlight -in

 # example
highlight :
  enable : true
  line_number : true
  auto_detect : true
  tab_replace :

Cara meningkatkan tema ini |

• Metode yang Disarankan |

Jalankan perintah di root hexo dir.

Jalankan perintah ini di direktori root

 cd themes/lite

git pull

• Metode Lainnya |

Ini untuk memperbaiki folder tema dan __config.yml .

1. Simpan tema Anda __config.yml file.

2. Hapus /themes/lite Dir

3. Masukkan hexo root dir Anda

4. Jalankan komit

git clone https://github.com/HeskeyBaozi/hexo-theme-lite themes/lite

5. Ganti tema konfigurasi dengan menggunakan __config.yml yang disimpan

Pengaturan Pengembangan Bangunan |

Server Pengembangan |.