GitHub+Hexo搭建自己的Blog之-主题配置
生活随笔
收集整理的這篇文章主要介紹了
GitHub+Hexo搭建自己的Blog之-主题配置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
前兩章我們已經把Blog的環境全部搭建完畢了，但是還沒有內容，而且hexo默認的主題是不是感覺挺丑的，其實hexo給我們提供了很多主題模板，總有一款是你喜歡的，本篇文章將繼續說一說如何配置主題，怎么創建博文，寫好后又如何發布，一起來看吧!
點我進入hexo官網挑選模板
文章總覽
Hexo主目錄作用
如圖是我們myblog文件的主目錄，由上往下文件的作用
接下來詳細說一說?_config.yml?文件的配置
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | # Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/# Site title: 劉旺學長的技術專欄 #網站標題 subtitle: #網站副標題 description: #網站描述 author: RoseSnow #作者 language: #語言 timezone: #網站時區。Hexo 默認使用您電腦的時區。時區列表。比如說：America/New_York, Japan, 和 UTC 。# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://Liuwang0330.com #你的站點Url root: / #站點的根目錄 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 #Include code 文件夾 i18n_dir: :lang #國際化（i18n）文件夾 skip_render: #跳過指定文件的渲染 # Writing new_post_name: :title.md # 新文章的文件名稱 default_layout: post #預設布局 titlecase: false # 把標題轉換為 title case external_link: true # 在新標簽中打開鏈接 filename_case: 0 #把文件名稱轉換為 (1) 小寫或 (2) 大寫 render_drafts: false #是否顯示草稿 post_asset_folder: false #是否啟動 Asset 文件夾 relative_link: false #把鏈接改為與根目錄的相對位址 future: true #顯示未來的文章 highlight: #內容中代碼塊的設置 enable: trueline_number: trueauto_detect: falsetab_replace:# Category & Tag default_category: uncategorized category_map: #分類別名 tag_map: #標簽別名# Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD #日期格式 time_format: HH:mm:ss #時間格式 # Pagination ## Set per_page to 0 to disable pagination per_page: 10 #分頁數量 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape #主題名稱 # Deployment ## Docs: https://hexo.io/docs/deployment.html # 部署部分的設置 deploy:type: gitrepo: git@github.com:Liuwang0330/Liuwang0330.github.io.git #這里我們之前部署到github時配置過的baranch: master |
更換Next主題
本文介紹Next主題的配置用法，其他的主題用法大體步驟是類似的。
更多詳情：點我了解更多
- hexo clean?先清理一下hexo的緩存
- hexo s?本地啟動服務
- 打開瀏覽器：在地址欄鍵入?http://localhost:4000?預覽，如圖
Next配置
next主題應用成功之后，也是需要友好的配置一下，打開themes文件夾下的next文件會看到也有一個?_config.yml?的文件，有了之前的經驗，我們知道這個就是next主題的全局配置文件了
_config.yml配置
截取了一部分，這里基本上是需要配置的，其他的基本是默認，更多的配置，可看這篇教程點我查看更多炫酷設置
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 | favicon: # 這里配置站點的站標# small: /images/favicon-16x16-next.pngmedium: /images/favicon-16x16-next.pngapple_touch_icon: /images/apple-touch-icon-next.pngsafari_pinned_tab: /images/logo.svg#android_manifest: /images/manifest.json#ms_browserconfig: /images/browserconfig.xml# Set default keywords (Use a comma to separate) keywords: # 這里放置站點的關鍵字 "前端, HTML, CSS, javascript, Vue.js, Node.js, MySQL, 微信小程序"# Set rss to false to disable feed link. # Leave rss as empty to use site's feed link. # Set rss to specific value if you have burned your feed already. rss:footer: # 網站的頁腳設置# Specify the date when the site was setup.# If not defined, current year will be used.since: # 網站的開始運行時間 比如設置2017 則網站底部顯示 2017-2018# Icon between year and copyright info.icon: user # If not defined, will be used `author` from Hexo main config.# copyright:# -------------------------------------------------------------# Hexo link (Powered by Hexo).# powered: true# theme:# Theme & scheme info link (Theme - NexT.scheme).# enable: false# Version info of NexT after scheme info (vX.X.X).# version false# -------------------------------------------------------------# Any custom text can be defined here.#custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a># --------------------------------------------------------------- # SEO Settings # ---------------------------------------------------------------# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog. # See: https://support.google.com/webmasters/answer/139066 # Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com ) canonical: true# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization. seo: false# If true, will add site-subtitle to index page, added in main hexo config. # subtitle: Subtitle index_with_subtitle: false# --------------------------------------------------------------- # Menu Settings # ---------------------------------------------------------------# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives). # Usage: `Key: /link/ || icon` # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive. # Value before `||` delimeter is the target link. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded. menu: # 菜單路徑 注意：下邊的 || 不能去掉 后邊表示的是 對應的圖標home: / || home # 表示主頁tags: /tags/ || tags # 表示標簽categories: /categories/ || th # 表示分類archives: /archives/ || archive #表示歸檔about: /about/ || user 表示關于我life: /life/ || heart#schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat # 公益活動# Enable/Disable menu icons. menu_icons: # 這里是圖標設置 和上邊的 || 后面的一致 enable: truehome: hometags: tagscategories: tharchives: archiveabout: userlife: heart# --------------------------------------------------------------- # Scheme Settings 這里是next主題的樣式排版設置 # ---------------------------------------------------------------# Schemes next給提供了如下四個頁面布局方式 只能選擇其中的一個使用，具體樣式，可自己動手試試，我這里選擇的是Mist # scheme: Muse scheme: Mist # scheme: Pisces # scheme: Gemini# --------------------------------------------------------------- # Sidebar Settings 社交設置 # ---------------------------------------------------------------# Social Links. # Usage: `Key: permalink || icon` # Key is the link label showing to end users. # Value before `||` delimeter is the target permalink. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded. social: # 自己的社交鏈接 比如這里我設置了 Github 和 郵箱，下面還可以設置 微博之類的 自己動手設置試試GitHub: https://github.com/Liuwang0330|| githubE-Mail: number_nine@126.com || envelope#Google: https://plus.google.com/yourname || google#Twitter: https://twitter.com/yourname || twitter#FB Page: https://www.facebook.com/yourname || facebook#VK Group: https://vk.com/yourname || vk#StackOverflow: https://stackoverflow.com/yourname || stack-overflow#YouTube: https://youtube.com/yourname || youtube#Instagram: https://instagram.com/yourname || instagram#Skype: skype:yourname?call|chat || skypesocial_icons: # 這里是設置上面社交鏈接 的對應圖標的 對應的設為 true 即可enable: trueGithub: githubicons_only: falsetransition: false# Blog rolls # 這里是設置一些相關鏈接 我這里設置了一些推薦閱讀的網站，可自行設置 links_icon: link links_title: 推薦閱讀 # links_layout: block links_layout: inline links:w3school: http://www.w3school.com.cn/菜鳥教程: http://www.runoob.com/廖雪峰官網: https://www.liaoxuefeng.com/# Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: /images/avatar.jpg # 這里設置自己的頭像# Table Of Contents in the Sidebar # 文章自動顯示的目錄 toc:enable: true# Automatically add list number to toc. 文章是否顯示序號，顯示則設置為truenumber: false# If true, all words will placed on next lines if header width longer then sidebar width.wrap: false# Creative Commons 4.0 International License. # http://creativecommons.org/ # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero #creative_commons: by-nc-sa #creative_commons:sidebar:# Sidebar Position, available value: left | right (only for Pisces | Gemini).position: left#position: right# Sidebar Display, available value (only for Muse | Mist):# - post expand on posts automatically. Default.# - always expand for all pages automatically# - hide expand only when click on the sidebar toggle icon.# - remove Totally remove sidebar including sidebar toggle.display: post#display: always#display: hide#display: remove# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12# Back to top in sidebar (only for Pisces | Gemini).b2t: false# Scroll percent label in b2t button.scrollpercent: false# Enable sidebar on narrow view (only for Muse | Mist).onmobile: false# --------------------------------------------------------------- # Post Settings # ---------------------------------------------------------------# Automatically scroll page to section which is under <!-- more --> mark. scroll_to_more: true# Automatically saving scroll position on each post/page in cookies. save_scroll: false# Automatically excerpt description in homepage as preamble text. excerpt_description: true# Automatically Excerpt. Not recommend. # Please use <!-- more --> in the post to control excerpt accurately. auto_excerpt:enable: truelength: 120# Post meta display settings post_meta:item_text: truecreated_at: trueupdated_at: falsecategories: true# Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount:item_text: truewordcount: truemin2read: truetotalcount: trueseparated_meta: true# Wechat Subscriber 設置微信添加方式 wechat_subscriber:enabled: trueqcode: /images/mywechat.jpgdescription: 掃一掃添加微信好友# Reward # 設置打賞方式 reward_comment: 如果覺得文章不錯，請我吃根辣條吧~~ wechatpay: /images/wxpay.png alipay: /images/alipay.png # bitcoin: /images/bitcoin.png# Declare license on posts post_copyright:enable: falselicense: CC BY-NC-SA 3.0license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/# --------------------------------------------------------------- # Misc Theme Settings # ---------------------------------------------------------------# Reduce padding / margin indents on devices with narrow width. mobile_layout_economy: false# Android Chrome header panel color ($black-deep). android_chrome_color: "#222"# Custom Logo. # !!Only available for Default Scheme currently. # Options: # enabled: [true/false] - Replace with specific image # image: url-of-image - Images's url custom_logo:enabled: falseimage:# Code Highlight theme # Available value: # normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: night eighties |
?
創建其他頁面
首頁和歸檔是默認存在的，不需要我們自己創建，但是其他的幾個諸如分類，標簽，關于是要我們自己創建的
?
創建分類：終端myblog根目錄下鍵入命令?hexo new page categories?之后我們進入?myblog/source目錄下發現多出一個名為?categories?的文件夾, 打開categories下的index.md,可以看到是這樣的 如圖
標簽頁面和關于頁面的創建方法都是和分類的一樣，重復上一步即可。
創建第一篇博文
我們一直在配置環境，還沒有真正動手寫博客，下面我們來創建第一篇博客。
仍然是用new命令創建：在終端myblog下鍵入命令?hexo new page "文章標題"
打開source文件夾下的_posts文件，就可以看到我們剛剛創建的 “文章名稱”.md的 文件，用編輯器打開，就可以編寫內容了，其中文章可以設置分類和標簽，如圖
提交到遠程服務
下面把我們的博客提交一下，上一篇我們已經把Blog部署到了GitHub上，所以可以提交到github服務器上。
下面我們再打開網址?https://Liu0330.github.io?(此處更換你自己的io地址)就可以訪問我們剛剛創建的博文了
總結
經過這三篇文章，我們已經從0到1搭建起了自己的Blog，想讓Blog更個性化，可以參考點我查看更多炫酷設置，接下來還有一篇會寫一下怎么綁定個人的域名。
總結
以上是生活随笔為你收集整理的GitHub+Hexo搭建自己的Blog之-主题配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android win10驱动安装失败,
- 下一篇： 格雷码转换成二进制c语言程序,基于PLC