GitHub+Hexo搭建自己的Blog之-主题配置
生活随笔
收集整理的這篇文章主要介紹了
GitHub+Hexo搭建自己的Blog之-主题配置
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前言
前兩章我們已經(jīng)把Blog的環(huán)境全部搭建完畢了，但是還沒(méi)有內(nèi)容，而且hexo默認(rèn)的主題是不是感覺(jué)挺丑的，其實(shí)hexo給我們提供了很多主題模板，總有一款是你喜歡的，本篇文章將繼續(xù)說(shuō)一說(shuō)如何配置主題，怎么創(chuàng)建博文，寫(xiě)好后又如何發(fā)布，一起來(lái)看吧!
點(diǎn)我進(jìn)入hexo官網(wǎng)挑選模板
文章總覽
Hexo主目錄作用
如圖是我們myblog文件的主目錄，由上往下文件的作用
接下來(lái)詳細(xì)說(shuō)一說(shuō)?_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: 劉旺學(xué)長(zhǎng)的技術(shù)專(zhuān)欄 #網(wǎng)站標(biāo)題 subtitle: #網(wǎng)站副標(biāo)題 description: #網(wǎng)站描述 author: RoseSnow #作者 language: #語(yǔ)言 timezone: #網(wǎng)站時(shí)區(qū)。Hexo 默認(rèn)使用您電腦的時(shí)區(qū)。時(shí)區(qū)列表。比如說(shuō)：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 #你的站點(diǎn)Url root: / #站點(diǎn)的根目錄 permalink: :year/:month/:day/:title/ #文章的 永久鏈接 格式 permalink_defaults: #永久鏈接中各部分的默認(rèn)值# Directory source_dir: source #資源文件夾，這個(gè)文件夾用來(lái)存放內(nèi)容 public_dir: public #公共文件夾，這個(gè)文件夾用于存放生成的站點(diǎn)文件。 tag_dir: tags # 標(biāo)簽文件夾 archive_dir: archives #歸檔文件夾 category_dir: categories #分類(lèi)文件夾 code_dir: downloads/code #Include code 文件夾 i18n_dir: :lang #國(guó)際化（i18n）文件夾 skip_render: #跳過(guò)指定文件的渲染 # Writing new_post_name: :title.md # 新文章的文件名稱(chēng) default_layout: post #預(yù)設(shè)布局 titlecase: false # 把標(biāo)題轉(zhuǎn)換為 title case external_link: true # 在新標(biāo)簽中打開(kāi)鏈接 filename_case: 0 #把文件名稱(chēng)轉(zhuǎn)換為 (1) 小寫(xiě)或 (2) 大寫(xiě) render_drafts: false #是否顯示草稿 post_asset_folder: false #是否啟動(dòng) Asset 文件夾 relative_link: false #把鏈接改為與根目錄的相對(duì)位址 future: true #顯示未來(lái)的文章 highlight: #內(nèi)容中代碼塊的設(shè)置 enable: trueline_number: trueauto_detect: falsetab_replace:# Category & Tag default_category: uncategorized category_map: #分類(lèi)別名 tag_map: #標(biāo)簽別名# 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 #時(shí)間格式 # Pagination ## Set per_page to 0 to disable pagination per_page: 10 #分頁(yè)數(shù)量 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape #主題名稱(chēng) # Deployment ## Docs: https://hexo.io/docs/deployment.html # 部署部分的設(shè)置 deploy:type: gitrepo: git@github.com:Liuwang0330/Liuwang0330.github.io.git #這里我們之前部署到github時(shí)配置過(guò)的baranch: master |
更換Next主題
本文介紹Next主題的配置用法，其他的主題用法大體步驟是類(lèi)似的。
更多詳情：點(diǎn)我了解更多
- hexo clean?先清理一下hexo的緩存
- hexo s?本地啟動(dòng)服務(wù)
- 打開(kāi)瀏覽器：在地址欄鍵入?http://localhost:4000?預(yù)覽，如圖
Next配置
next主題應(yīng)用成功之后，也是需要友好的配置一下，打開(kāi)themes文件夾下的next文件會(huì)看到也有一個(gè)?_config.yml?的文件，有了之前的經(jīng)驗(yàn)，我們知道這個(gè)就是next主題的全局配置文件了
_config.yml配置
截取了一部分，這里基本上是需要配置的，其他的基本是默認(rèn)，更多的配置，可看這篇教程點(diǎn)我查看更多炫酷設(shè)置
| 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: # 這里配置站點(diǎn)的站標(biāo)# 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: # 這里放置站點(diǎn)的關(guān)鍵字 "前端, 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: # 網(wǎng)站的頁(yè)腳設(shè)置# Specify the date when the site was setup.# If not defined, current year will be used.since: # 網(wǎng)站的開(kāi)始運(yùn)行時(shí)間 比如設(shè)置2017 則網(wǎng)站底部顯示 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: # 菜單路徑 注意：下邊的 || 不能去掉 后邊表示的是 對(duì)應(yīng)的圖標(biāo)home: / || home # 表示主頁(yè)tags: /tags/ || tags # 表示標(biāo)簽categories: /categories/ || th # 表示分類(lèi)archives: /archives/ || archive #表示歸檔about: /about/ || user 表示關(guān)于我life: /life/ || heart#schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat # 公益活動(dòng)# Enable/Disable menu icons. menu_icons: # 這里是圖標(biāo)設(shè)置 和上邊的 || 后面的一致 enable: truehome: hometags: tagscategories: tharchives: archiveabout: userlife: heart# --------------------------------------------------------------- # Scheme Settings 這里是next主題的樣式排版設(shè)置 # ---------------------------------------------------------------# Schemes next給提供了如下四個(gè)頁(yè)面布局方式 只能選擇其中的一個(gè)使用，具體樣式，可自己動(dòng)手試試，我這里選擇的是Mist # scheme: Muse scheme: Mist # scheme: Pisces # scheme: Gemini# --------------------------------------------------------------- # Sidebar Settings 社交設(shè)置 # ---------------------------------------------------------------# 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: # 自己的社交鏈接 比如這里我設(shè)置了 Github 和 郵箱，下面還可以設(shè)置 微博之類(lèi)的 自己動(dòng)手設(shè)置試試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: # 這里是設(shè)置上面社交鏈接 的對(duì)應(yīng)圖標(biāo)的 對(duì)應(yīng)的設(shè)為 true 即可enable: trueGithub: githubicons_only: falsetransition: false# Blog rolls # 這里是設(shè)置一些相關(guān)鏈接 我這里設(shè)置了一些推薦閱讀的網(wǎng)站，可自行設(shè)置 links_icon: link links_title: 推薦閱讀 # links_layout: block links_layout: inline links:w3school: http://www.w3school.com.cn/菜鳥(niǎo)教程: http://www.runoob.com/廖雪峰官網(wǎng): 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 # 這里設(shè)置自己的頭像# Table Of Contents in the Sidebar # 文章自動(dòng)顯示的目錄 toc:enable: true# Automatically add list number to toc. 文章是否顯示序號(hào)，顯示則設(shè)置為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 設(shè)置微信添加方式 wechat_subscriber:enabled: trueqcode: /images/mywechat.jpgdescription: 掃一掃添加微信好友# Reward # 設(shè)置打賞方式 reward_comment: 如果覺(jué)得文章不錯(cuò)，請(qǐng)我吃根辣條吧~~ 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 |
?
創(chuàng)建其他頁(yè)面
首頁(yè)和歸檔是默認(rèn)存在的，不需要我們自己創(chuàng)建，但是其他的幾個(gè)諸如分類(lèi)，標(biāo)簽，關(guān)于是要我們自己創(chuàng)建的
?
創(chuàng)建分類(lèi)：終端myblog根目錄下鍵入命令?hexo new page categories?之后我們進(jìn)入?myblog/source目錄下發(fā)現(xiàn)多出一個(gè)名為?categories?的文件夾, 打開(kāi)categories下的index.md,可以看到是這樣的 如圖
標(biāo)簽頁(yè)面和關(guān)于頁(yè)面的創(chuàng)建方法都是和分類(lèi)的一樣，重復(fù)上一步即可。
創(chuàng)建第一篇博文
我們一直在配置環(huán)境，還沒(méi)有真正動(dòng)手寫(xiě)博客，下面我們來(lái)創(chuàng)建第一篇博客。
仍然是用new命令創(chuàng)建：在終端myblog下鍵入命令?hexo new page "文章標(biāo)題"
打開(kāi)source文件夾下的_posts文件，就可以看到我們剛剛創(chuàng)建的 “文章名稱(chēng)”.md的 文件，用編輯器打開(kāi)，就可以編寫(xiě)內(nèi)容了，其中文章可以設(shè)置分類(lèi)和標(biāo)簽，如圖
提交到遠(yuǎn)程服務(wù)
下面把我們的博客提交一下，上一篇我們已經(jīng)把Blog部署到了GitHub上，所以可以提交到github服務(wù)器上。
下面我們?cè)俅蜷_(kāi)網(wǎng)址?https://Liu0330.github.io?(此處更換你自己的io地址)就可以訪問(wèn)我們剛剛創(chuàng)建的博文了
總結(jié)
經(jīng)過(guò)這三篇文章，我們已經(jīng)從0到1搭建起了自己的Blog，想讓Blog更個(gè)性化，可以參考點(diǎn)我查看更多炫酷設(shè)置，接下來(lái)還有一篇會(huì)寫(xiě)一下怎么綁定個(gè)人的域名。
總結(jié)
以上是生活随笔為你收集整理的GitHub+Hexo搭建自己的Blog之-主题配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： android win10驱动安装失败,
- 下一篇： 格雷码转换成二进制c语言程序,基于PLC