[关闭]
@MrXiao 2018-04-25T14:53:44.000000Z 字数 31319 阅读 2947

Hexo + Next主题博客优化

杂谈


1.开始搭建博客

2.优化:基本功能配置

接下来是配置和增强功能,如阅读统计、评论、插件之类的,这些基本配置建议在写文章之前配置好。

基本功能配置大部分是修改两个文件,都叫_config.yml。一个是站点的,一个是主题的。

与其将各个功能分散开来讲,不如直接贴出配置文件,打上注释,从头到尾看一遍就知道如何配置了。

2.1 选择主题

我选择的是NexT,是在Github上被Star最多【2018.3.30】的一个Hexo主题。从V6.0.0开始next主仓库已从 iissnan 名下 迁移至 theme-next 。组织

想要什么样的主题,去Hexo Themes上慢慢找。

至于更换主题,很简单,用NexT主题举个例子。

  1. 首先,去主题所在仓库拷贝仓库地址,如下图:

    拷贝仓库地址

  2. 然后,到博客站点根目录下,打开 git bash

    1. // next是自定义的主题名字,可以随意更改
    2. git clone https://github.com/theme-next/hexo-theme-next.git themes/next
  3. 最后,修改站点配置文件_config.yml

    1. ## Themes: https://hexo.io/themes/
    2. theme: next

2.2 站点配置文件

请先查看 Hexo官方文档 ,再查看下面我贴出的,如果这样后你还是对有些地方比较懵,可以自行 Google。

注意:文件中所有的 : 都是英文字符,且后面都有一个空格。

【2018.3.30更新】文件位置: ~/blog/_config.yml

  1. # Hexo Configuration
  2. ## Docs: https://hexo.io/docs/configuration.html
  3. ## Source: https://github.com/hexojs/hexo/
  4. # Site
  5. title: 温故而知新
  6. subtitle:
  7. description: 天下事有难易乎?<br/>为之,则难者亦易矣;<br/>不为,则易者亦难矣。
  8. author: 肖悦
  9. language: zh-CN
  10. timezone:
  11. # URL
  12. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  13. url: http://kevinXiao2016.github.io
  14. root: /
  15. # 博客文章的 URL 结构,请务必写文章之前就想好!
  16. # 详细参数请查看:https://hexo.io/docs/permalinks.html
  17. permalink: :year/:month/:day/:title/
  18. permalink_defaults:
  19. # Directory
  20. source_dir: source
  21. public_dir: public
  22. tag_dir: tags
  23. archive_dir: archives
  24. category_dir: categories
  25. code_dir: downloads/code
  26. i18n_dir: :lang
  27. skip_render:
  28. # Writing
  29. new_post_name: :title.md # File name of new posts
  30. default_layout: post
  31. titlecase: false # Transform title into titlecase
  32. external_link: true # Open external links in new tab
  33. filename_case: 0
  34. render_drafts: false
  35. post_asset_folder: false
  36. relative_link: false
  37. future: true
  38. # 代码高亮设置
  39. highlight:
  40. enable: true
  41. line_number: true
  42. auto_detect: false
  43. tab_replace:
  44. # Category & Tag
  45. default_category: uncategorized
  46. category_map:
  47. tag_map:
  48. # Date / Time format
  49. ## Hexo uses Moment.js to parse and display date
  50. ## You can customize the date format as defined in
  51. ## http://momentjs.com/docs/#/displaying/format/
  52. date_format: YYYY-MM-DD
  53. time_format: HH:mm:ss
  54. # ---------------------------------------------------------------
  55. # 扩展设置
  56. # ---------------------------------------------------------------
  57. # 集成Local Search 支持站内搜索
  58. search:
  59. path: search.xml
  60. field: post
  61. format: html
  62. limit: 10000
  63. # Pagination
  64. ## Set per_page to 0 to disable pagination
  65. per_page: 10
  66. pagination_dir: page
  67. index_generator:
  68. per_page: 10 ##首页默认10篇文章标题 如果值为0不分页
  69. ## 修改归档页面、某一分类页面、某一标签页面的显示篇数
  70. ## 参考:http://theme-next.iissnan.com/faqs.html#setting-page-size
  71. archive_generator:
  72. per_page: 10 ##归档页面默认10篇文章标题
  73. yearly: true ##生成年视图
  74. monthly: true ##生成月视图
  75. tag_generator:
  76. per_page: 10 ##标签分类页面默认10篇文章
  77. category_generator:
  78. per_page: 10 ###分类页面默认10篇文章
  79. # Extensions
  80. ## Plugins: https://hexo.io/plugins/
  81. ## Themes: https://hexo.io/themes/
  82. theme: next
  83. # Deployment
  84. ## Docs: https://hexo.io/docs/deployment.html
  85. deploy:
  86. type: git
  87. # 没有做cdn映射前,请使用下面注释掉的配置
  88. repo:
  89. github: git@github.com:kevinXiao2016/kevinXiao2016.github.io.git,master
  90. coding: git@git.coding.net:kevinXiao2016/kevinXiao2016.git,master
  91. #repository: https://github.com/kevinXiao2016/kevinXiao2016.github.io.git
  92. #branch: master

2.3 主题配置文件

如果使用的主题不是Next,那么请另 Google。建议先查看 NexT 官方文档

【2018.3.30更新】文件位置: ~/blog/themes/next/_config.yml

  1. # ---------------------------------------------------------------
  2. # Theme Core Configuration Settings
  3. # ---------------------------------------------------------------
  4. # 更新相关,参考:https://github.com/iissnan/hexo-theme-next/issues/328
  5. # 简单说:从V6.0.0开始支持以下功能,不更改主题设置,在站点中设置主题
  6. # 1.在~/blog/source 目录下新建source目录,在里面新建 next.yml文件
  7. # 2.将主题配置文件全部拷贝过去
  8. # 3.设置此处override为true,表明此文件配置可被next.yml中的配置覆盖
  9. override: true
  10. # Allow to cache content generation. Introduced in NexT v6.0.0.
  11. cache:
  12. enable: true

【2018.3.30更新】文件位置: ~/blog/source/_data/next.yml

  1. # ---------------------------------------------------------------
  2. # Site Information Settings
  3. # ---------------------------------------------------------------
  4. # 站点图标啦,直接去 https://realfavicongenerator.net
  5. # 选项弄好后,下载压缩包,解压复制粘贴
  6. # 建议放在 hexo-site/source/images/ 里(没有自己建)
  7. # 这样可以避免更新 NexT 主题的时候遇到麻烦
  8. # 最后记得要稍微改下文件名,与下面的保持一致
  9. favicon:
  10. small: /images/favicon-16x16
  11. medium: /images/favicon-32x32
  12. #apple_touch_icon: /images/apple-touch-icon-next.png
  13. #safari_pinned_tab: /images/logo.svg
  14. #android_manifest: /images/manifest.json
  15. #ms_browserconfig: /images/browserconfig.xml
  16. # Set rss to false to disable feed link.
  17. # Leave rss as empty to use site's feed link.
  18. # Set rss to specific value if you have burned your feed already.
  19. rss:
  20. # 页脚配置
  21. footer:
  22. # Specify the date when the site was setup.
  23. # If not defined, current year will be used.
  24. # 建站年份
  25. since: 2017
  26. # Icon between year and copyright info.
  27. # 年份后面的图标,为 Font Awesome 图标
  28. icon:
  29. # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
  30. # `heart` is recommended with animation in red (#ff0000).
  31. name: heart
  32. # If you want to animate the icon, set it to true.
  33. # 设置true时开启动画效果
  34. animated: true
  35. # Change the color of icon, using Hex Code.
  36. color: "#ff0000"
  37. # If not defined, will be used `author` from Hexo main config.
  38. # 如果不定义,默认用站点配置文件的 author 名
  39. copyright:
  40. # -------------------------------------------------------------
  41. # Hexo link (Powered by Hexo).
  42. # Hexo 的链接
  43. powered: true
  44. theme:
  45. # Theme & scheme info link (Theme - NexT.scheme).
  46. # 是否支持主题
  47. enable: true
  48. # Version info of NexT after scheme info (vX.X.X).
  49. # 是否显示next的版本
  50. version: true
  51. # -------------------------------------------------------------
  52. # Any custom text can be defined here.
  53. # 自定义内容
  54. #custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>
  55. # ---------------------------------------------------------------
  56. # SEO Settings
  57. # ---------------------------------------------------------------
  58. # Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
  59. # See: https://support.google.com/webmasters/answer/139066
  60. # Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
  61. canonical: true
  62. # Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
  63. seo: false
  64. # If true, will add site-subtitle to index page, added in main hexo config.
  65. # subtitle: Subtitle
  66. index_with_subtitle: false
  67. # ---------------------------------------------------------------
  68. # Menu Settings
  69. # ---------------------------------------------------------------
  70. # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
  71. # Usage: `Key: /link/ || icon`
  72. # 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.
  73. # Value before `||` delimeter is the target link.
  74. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
  75. # 菜单设置 || 菜单图标设置
  76. # 编辑 ~/blog/themes/next/languages 下的相应文件
  77. # 比如添加一个“留言”菜单,站点配置文件的 language 是 zh-Hans
  78. # 则编辑 zh-Hans.yml,在 menu: 项内添加一行 留言: 留言
  79. # 注意空格,且符号 : 为英文字符!
  80. menu:
  81. home: / || home
  82. about: /about/ || user
  83. tags: /tags/ || tags
  84. categories: /categories/ || th
  85. archives: /archives/ || archive
  86. #schedule: /schedule/ || calendar
  87. #sitemap: /sitemap.xml || sitemap
  88. #commonweal: /404/ || heartbeat
  89. # Enable/Disable menu icons / item badges.
  90. # 是否开启菜单图标
  91. menu_settings:
  92. icons: true
  93. badges: false
  94. # ---------------------------------------------------------------
  95. # Scheme Settings
  96. # ---------------------------------------------------------------
  97. # Schemes
  98. # 设计板式,都长啥样,去 README 里面的链接里看看
  99. #scheme: Muse
  100. scheme: Mist
  101. #scheme: Pisces
  102. #scheme: Gemini
  103. # ---------------------------------------------------------------
  104. # Sidebar Settings
  105. # ---------------------------------------------------------------
  106. # Posts / Categories / Tags in sidebar.
  107. site_state: true
  108. # 侧栏社交链接设置,与上面菜单差不多,要生效记得把前面的 # 去掉
  109. # Social Links.
  110. # Usage: `Key: permalink || icon`
  111. # Key is the link label showing to end users.
  112. # Value before `||` delimeter is the target permalink.
  113. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
  114. social:
  115. #GitHub: https://github.com/kevinXiao2016 || github
  116. #E-Mail: mailto:yourname@gmail.com || envelope
  117. #Google: https://plus.google.com/yourname || google
  118. #Twitter: https://twitter.com/yourname || twitter
  119. #FB Page: https://www.facebook.com/yourname || facebook
  120. #VK Group: https://vk.com/yourname || vk
  121. #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  122. #YouTube: https://youtube.com/yourname || youtube
  123. #Instagram: https://instagram.com/yourname || instagram
  124. #Skype: skype:yourname?call|chat || skype
  125. # 侧栏社交链接图标设置
  126. social_icons:
  127. enable: true
  128. icons_only: false
  129. transition: false
  130. # Dependencies: exturl: true in Tags Settings section below.
  131. # To encrypt links above use https://www.base64encode.org
  132. # Example encoded link: `GitHub: aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQ= || github`
  133. exturl: false
  134. # Follow me on GitHub banner in right-top corner.
  135. # Usage: `permalink || title`
  136. # Value before `||` delimeter is the target permalink.
  137. # Value after `||` delimeter is the title and aria-label name.
  138. github_banner: https://github.com/kevinXiao2016 || Follow me on GitHub
  139. # Blog rolls
  140. # 侧栏友链设置
  141. links_icon: globe
  142. links_title: 神奇的链接
  143. links_layout: block
  144. #links_layout: inline
  145. links:
  146. EMS规范: http://ems.top-vision.cn:8110/dm/dm.html
  147. #网易云音乐 : https://music.163.com/#/user/home?id=86590096
  148. #Coldplay Official Website: http://coldplay.com/
  149. #获取 Elon Musk 的新闻: https://elonmusknews.org/
  150. #尼古拉·特斯拉:发明了现代世界的人: http://www.bilibili.com/video/av6211226/
  151. #关于此博客: https://reuixiy.github.io/about/
  152. # Sidebar Avatar
  153. # in theme directory(source/images): /images/avatar.gif
  154. # in site directory(source/uploads): /uploads/avatar.gif
  155. # 侧栏头像设置
  156. # 建议放在 hexo-site/source/uploads/ 里(没有自己建)
  157. # 这样可以避免更新 NexT 主题的时候遇到麻烦
  158. avatar: /images/avatar.png
  159. # Table Of Contents in the Sidebar
  160. # 侧栏文章目录设置(前提是 Markdown 书写正确)
  161. toc:
  162. enable: true
  163. # Automatically add list number to toc.
  164. # 自动加数字序号
  165. number: false
  166. # If true, all words will placed on next lines if header width longer then sidebar width.
  167. # 如果标题太长,则放到下一行继续显示
  168. wrap: false
  169. # Creative Commons 4.0 International License.
  170. # http://creativecommons.org/
  171. # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
  172. #creative_commons: by-nc-sa
  173. #creative_commons:
  174. sidebar:
  175. # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  176. # 侧栏位置设置,可用值:左 | 右(只对 Pisces 和 Gemini 设计版式有效!)
  177. position: left
  178. #position: right
  179. # 侧栏显示方式
  180. # Sidebar Display, available value (only for Muse | Mist):
  181. # - post expand on posts automatically. Default.
  182. # - always expand for all pages automatically
  183. # - hide expand only when click on the sidebar toggle icon.
  184. # - remove Totally remove sidebar including sidebar toggle.
  185. display: post
  186. #display: always
  187. #display: hide
  188. #display: remove
  189. # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  190. # 只对 Pisces 和 Gemini 设计版式有效!
  191. offset: 12
  192. # Back to top in sidebar (only for Pisces | Gemini).
  193. # 只对 Pisces 和 Gemini 设计版式有效!
  194. b2t: false
  195. # Scroll percent label in b2t button.
  196. scrollpercent: true
  197. # Enable sidebar on narrow view (only for Muse | Mist).
  198. # 移动端显示侧栏,只对 Muse 和 Mist 设计版式有效!
  199. onmobile: true
  200. # ---------------------------------------------------------------
  201. # Post Settings
  202. # ---------------------------------------------------------------
  203. # Automatically scroll page to section which is under <!-- more --> mark.
  204. # 点击 [Read More],页面自动滚动到 <!-- more --> 标记处
  205. scroll_to_more: false
  206. # Automatically saving scroll position on each post/page in cookies.
  207. # 用 cookies 保存浏览的位置信息,意味着重新打开这个页面后
  208. # 页面就会自动滚动到上次的位置,除非读者清理浏览器 cookies
  209. save_scroll: false
  210. # Automatically excerpt description in homepage as preamble text.
  211. # 将每篇文章 Front-matter 里 description 的文字作为页面显示的文章摘要
  212. excerpt_description: true
  213. # Automatically Excerpt. Not recommend.
  214. # Please use <!-- more --> in the post to control excerpt accurately.
  215. # 按字数自动加入 [Read More],不建议!
  216. # 建议在文章中加入 <!-- more -->
  217. # 自定义 [Read More] 按钮之前要显示的内容!
  218. auto_excerpt:
  219. enable: false
  220. length: 150
  221. # Post meta display settings
  222. # 文章顶部显示的文章元数据设置
  223. post_meta:
  224. item_text: true
  225. created_at: true
  226. updated_at: false
  227. # Only show 'updated' if different from 'created'.
  228. updated_diff: false
  229. categories: true
  230. # Post wordcount display settings
  231. # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
  232. # 显示统计字数和估计阅读时长
  233. # 注意:这个要安装插件,先进入站点文件夹根目录
  234. # 然后:npm install hexo-symbols-count-time --save
  235. symbols_count_time:
  236. separated_meta: true
  237. item_text_post: true
  238. item_text_total: false
  239. awl: 5
  240. wpm: 200
  241. # Manual define the border radius in codeblock
  242. # Leave it empty for the default 1
  243. codeblock:
  244. border_radius:
  245. # Wechat Subscriber
  246. #wechat_subscriber:
  247. #enabled: true
  248. #qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
  249. #description: ex. subscribe to my blog by scanning my public wechat account
  250. # Reward
  251. reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
  252. wechatpay: /images/wechat-reward-image.jpg
  253. alipay: /images/alipay-reward-image.jpg
  254. #bitcoin: /images/bitcoin.png
  255. # Related popular posts
  256. # Dependencies: https://github.com/tea3/hexo-related-popular-posts
  257. related_posts:
  258. enable: false
  259. title: # custom header, leave empty to use the default one
  260. display_in_home: false
  261. params:
  262. maxCount: 5
  263. #PPMixingRate: 0.0
  264. #isDate: false
  265. #isImage: false
  266. #isExcerpt: false
  267. # Declare license on posts
  268. post_copyright:
  269. enable: false
  270. license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>
  271. # ---------------------------------------------------------------
  272. # Misc Theme Settings
  273. # ---------------------------------------------------------------
  274. # Reduce padding / margin indents on devices with narrow width.
  275. # 移动端把页面两边留白去除,个人不建议
  276. mobile_layout_economy: false
  277. # Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
  278. # Android 上 Chrome 浏览器顶部颜色设置
  279. android_chrome_color: "#222"
  280. # Custom Logo.
  281. # !!Only available for Default Scheme currently.
  282. # Options:
  283. # enabled: [true/false] - Replace with specific image
  284. # image: url-of-image - Images's url
  285. custom_logo:
  286. enabled: false
  287. image:
  288. # Code Highlight theme
  289. # Available values: normal | night | night eighties | night blue | night bright
  290. # https://github.com/chriskempson/tomorrow-theme
  291. # 代码高亮主题设置
  292. # 都长啥样自己点开上面的链接查看
  293. highlight_theme: normal
  294. # Enable "cheers" for archive page.
  295. cheers_enabled: true
  296. # Manual define the max content width
  297. # !!Only available for Gemini Scheme currently
  298. # Leave it empty for the default 75% (suggest not less than 1000px)
  299. #max_content_width: 1000px
  300. # Manual define the sidebar width
  301. # !!Only available for Gemini Scheme currently
  302. # Leave it empty for the default 240
  303. sidebar_width:
  304. # ---------------------------------------------------------------
  305. # Font Settings
  306. # - Find fonts on Google Fonts (https://www.google.com/fonts)
  307. # - All fonts set here will have the following styles:
  308. # light, light italic, normal, normal italic, bold, bold italic
  309. # - Be aware that setting too much fonts will cause site running slowly
  310. # - Introduce in 5.0.1
  311. # ---------------------------------------------------------------
  312. # CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844
  313. # To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`):
  314. # Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
  315. # ---------------------------------------------------------------
  316. # 字体设置
  317. font:
  318. enable: false
  319. # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  320. host:
  321. # Font options:
  322. # `external: true` will load this font family from `host` above.
  323. # `family: Times New Roman`. Without any quotes.
  324. # `size: xx`. Use `px` as unit.
  325. # Global font settings used for all elements in <body>.
  326. global:
  327. external: true
  328. family: Lato
  329. size:
  330. # Font settings for Headlines (H1, H2, H3, H4, H5, H6).
  331. # Fallback to `global` font settings.
  332. headings:
  333. external: true
  334. family:
  335. size:
  336. # Font settings for posts.
  337. # Fallback to `global` font settings.
  338. posts:
  339. external: true
  340. family:
  341. # Font settings for Logo.
  342. # Fallback to `global` font settings.
  343. logo:
  344. external: true
  345. family:
  346. size:
  347. # Font settings for <code> and code blocks.
  348. codes:
  349. external: true
  350. family:
  351. size:
  352. # ---------------------------------------------------------------
  353. # Third Party Services Settings
  354. # ---------------------------------------------------------------
  355. # Math Equations Render Support
  356. math:
  357. enable: false
  358. # Default(true) will load mathjax/katex script on demand
  359. # That is it only render those page who has 'mathjax: true' in Front Matter.
  360. # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  361. per_page: true
  362. engine: mathjax
  363. #engine: katex
  364. # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
  365. mathjax:
  366. # Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China
  367. cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML
  368. # For newMathJax CDN (cdnjs.cloudflare.com) with fallback to oldMathJax (cdn.mathjax.org).
  369. #cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
  370. # For direct link to MathJax.js with CloudFlare CDN (cdnjs.cloudflare.com).
  371. #cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML
  372. # For automatic detect latest version link to MathJax.js and get from Bootcss.
  373. #cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML
  374. # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin)
  375. # needed to full Katex support.
  376. katex:
  377. # Use 0.7.1 as default, jsdelivr as default CDN, works everywhere even in China
  378. cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css
  379. # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
  380. #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css
  381. # Bootcss, works great in China, but not so well in other region
  382. #cdn: //cdn.bootcss.com/KaTeX/0.7.1/katex.min.css
  383. # Han Support
  384. # Dependencies: https://github.com/theme-next/theme-next-han
  385. # 汉字标准格式,没用过暂时不了解
  386. han: false
  387. # Pangu Support
  388. # Dependencies: https://github.com/theme-next/theme-next-pangu
  389. # For more information: https://github.com/vinta/pangu.js
  390. pangu: false
  391. # Swiftype Search API Key
  392. #swiftype_key:
  393. # Baidu Analytics ID
  394. #baidu_analytics:
  395. # Disqus
  396. disqus:
  397. enable: false
  398. shortname:
  399. count: true
  400. lazyload: false
  401. # Hypercomments
  402. #hypercomments_id:
  403. # changyan
  404. changyan:
  405. enable: false
  406. appid:
  407. appkey:
  408. # leanCloud支持的评论插件
  409. # Valine.
  410. # You can get your appid and appkey from https://leancloud.cn
  411. # more info please open https://valine.js.org
  412. valine:
  413. enable: false
  414. appid: P08Jh3wwb2zPhfm9puCevcUa-*******
  415. appkey: CnhNSWBKT3kwj52v********
  416. notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  417. verify: false # Verification code
  418. placeholder: Just go go # comment box placeholder
  419. avatar: mm # gravatar style
  420. guest_info: nick,mail,link # custom comment header
  421. pageSize: 10 # pagination size
  422. # Support for youyan comments system.
  423. # You can get your uid from http://www.uyan.cc
  424. #youyan_uid: your uid
  425. # Support for LiveRe comments system.
  426. # You can get your uid from https://livere.com/insight/myCode (General web site)
  427. livere_uid: MTAyMC8yODQwNi******
  428. # Gitment
  429. # Introduction: https://imsun.net/posts/gitment-introduction/
  430. gitment:
  431. enable: false
  432. mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  433. count: true # Show comments count in post meta area
  434. lazy: false # Comments lazy loading with a button
  435. cleanly: false # Hide 'Powered by ...' on footer, and more
  436. language: # Force language, or auto switch by theme
  437. github_user: # MUST HAVE, Your Github Username
  438. github_repo: # MUST HAVE, The name of the repo you use to store Gitment comments
  439. client_id: # MUST HAVE, Github client id for the Gitment
  440. client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
  441. proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  442. redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
  443. # Baidu Share
  444. # Available value:
  445. # button | slide
  446. # Warning: Baidu Share does not support https.
  447. #baidushare:
  448. ## type: button
  449. # Share
  450. # This plugin is more useful in China, make sure you known how to use it.
  451. # And you can find the use guide at official webiste: http://www.jiathis.com/.
  452. # Warning: JiaThis does not support https.
  453. #jiathis:
  454. ##uid: Get this uid from http://www.jiathis.com/
  455. #add_this_id:
  456. # NeedMoreShare2
  457. # Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
  458. # See: https://github.com/revir/need-more-share2
  459. # Also see: https://github.com/DzmVasileusky/needShareButton
  460. # iconStyle: default | box
  461. # boxForm: horizontal | vertical
  462. # position: top / middle / bottom + Left / Center / Right
  463. # networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
  464. # Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
  465. # Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
  466. # Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
  467. needmoreshare2:
  468. enable: false
  469. postbottom:
  470. enable: false
  471. options:
  472. iconStyle: box
  473. boxForm: horizontal
  474. position: bottomCenter
  475. networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  476. float:
  477. enable: false
  478. options:
  479. iconStyle: box
  480. boxForm: horizontal
  481. position: middleRight
  482. networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  483. # Google Webmaster tools verification setting
  484. # See: https://www.google.com/webmasters/
  485. #google_site_verification:
  486. # Google Analytics
  487. #google_analytics:
  488. # Bing Webmaster tools verification setting
  489. # See: https://www.bing.com/webmaster/
  490. #bing_site_verification:
  491. # Yandex Webmaster tools verification setting
  492. # See: https://webmaster.yandex.ru/
  493. #yandex_site_verification:
  494. # CNZZ count
  495. #cnzz_siteid:
  496. # Application Insights
  497. # See https://azure.microsoft.com/en-us/services/application-insights/
  498. # application_insights:
  499. # Post widgets & FB/VK comments settings.
  500. # ---------------------------------------------------------------
  501. # Facebook SDK Support.
  502. # https://github.com/iissnan/hexo-theme-next/pull/410
  503. facebook_sdk:
  504. enable: false
  505. app_id: #<app_id>
  506. fb_admin: #<user_id>
  507. like_button: #true
  508. webmaster: #true
  509. # Facebook comments plugin
  510. # This plugin depends on Facebook SDK.
  511. # If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
  512. facebook_comments_plugin:
  513. enable: false
  514. num_of_posts: 10 # min posts num is 1
  515. width: 100% # default width is 550px
  516. scheme: light # default scheme is light (light or dark)
  517. # VKontakte API Support.
  518. # To get your AppID visit https://vk.com/editapp?act=create
  519. vkontakte_api:
  520. enable: false
  521. app_id: #<app_id>
  522. like: true
  523. comments: true
  524. num_of_posts: 10
  525. # Star rating support to each article.
  526. # To get your ID visit https://widgetpack.com
  527. rating:
  528. enable: false
  529. id: #<app_id>
  530. color: fc6423
  531. # ---------------------------------------------------------------
  532. # Show number of visitors to each article.
  533. # You can visit https://leancloud.cn get AppID and AppKey.
  534. leancloud_visitors:
  535. enable: false
  536. app_id: P08Jh3wwb2zPhfm9puCevcUa-gzGzoHsz
  537. app_key: CnhNSWBKT3kwj52vyJ36armb
  538. # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  539. # If you don't care about security in lc counter and just want to use it directly
  540. # (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
  541. security: true
  542. betterPerformance: false
  543. # Another tool to show number of visitors to each article.
  544. # visit https://console.firebase.google.com/u/0/ to get apiKey and projectId
  545. # visit https://firebase.google.com/docs/firestore/ to get more information about firestore
  546. firestore:
  547. enable: false
  548. collection: articles #required, a string collection name to access firestore database
  549. apiKey: #required
  550. projectId: #required
  551. bluebird: false #enable this if you want to include bluebird 3.5.1(core version) Promise polyfill
  552. # Show Views/Visitors of the website/page with busuanzi.
  553. # Get more information on http://ibruce.info/2015/04/04/busuanzi/
  554. busuanzi_count:
  555. enable: true
  556. total_visitors: true
  557. total_visitors_icon: user
  558. total_views: true
  559. total_views_icon: eye
  560. post_views: true
  561. post_views_icon: eye
  562. # Tencent analytics ID
  563. # tencent_analytics:
  564. # Tencent MTA ID
  565. # tencent_mta:
  566. # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
  567. baidu_push: false
  568. # Google Calendar
  569. # Share your recent schedule to others via calendar page
  570. #
  571. # API Documentation:
  572. # https://developers.google.com/google-apps/calendar/v3/reference/events/list
  573. calendar:
  574. enable: false
  575. calendar_id: <required>
  576. api_key: <required>
  577. orderBy: startTime
  578. offsetMax: 24
  579. offsetMin: 4
  580. timeZone:
  581. showDeleted: false
  582. singleEvents: true
  583. maxResults: 250
  584. # Algolia Search
  585. # See: https://github.com/theme-next/hexo-theme-next/blob/master/docs/ALGOLIA-SEARCH.md
  586. # Dependencies: https://github.com/theme-next/theme-next-algolia-instant-search
  587. algolia_search:
  588. enable: false
  589. hits:
  590. per_page: 10
  591. labels:
  592. input_placeholder: Search for Posts
  593. hits_empty: "We didn't find any results for the search: ${query}"
  594. hits_stats: "${hits} results found in ${time} ms"
  595. # Local search
  596. # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
  597. # 要安装插件才能使用,先进入站点文件夹根目录
  598. # 然后:npm install hexo-generator-searchdb --save
  599. local_search:
  600. enable: true
  601. # if auto, trigger search by changing input
  602. # if manual, trigger search by pressing enter key or search button
  603. trigger: auto
  604. # show top n results per article, show all results by setting to -1
  605. top_n_per_article: 1
  606. # unescape html strings to the readable one
  607. unescape: false
  608. # Bookmark Support
  609. # Dependencies: https://github.com/theme-next/theme-next-bookmark
  610. bookmark:
  611. enable: false
  612. # if auto
  613. # - save the reading position when closing the page
  614. # - or clicking the bookmark-icon
  615. # if manual, only save it by clicking the bookmark-icon
  616. save: auto
  617. # ---------------------------------------------------------------
  618. # Tags Settings
  619. # ---------------------------------------------------------------
  620. # External URL with BASE64 encrypt & decrypt.
  621. # Usage: {% exturl text url "title" %}
  622. # Alias: {% extlink text url "title" %}
  623. # 用法见:
  624. # https://github.com/iissnan/hexo-theme-next/pull/1438
  625. exturl: false
  626. # 主题的标签样式,有 note、label、tabs 三种
  627. # Note tag (bs-callout).
  628. note:
  629. # Note tag style values:
  630. # - simple bs-callout old alert style. Default.
  631. # - modern bs-callout new (v2-v3) alert style.
  632. # - flat flat callout style with background, like on Mozilla or StackOverflow.
  633. # - disabled disable all CSS styles import of note tag.
  634. style: simple
  635. icons: false
  636. border_radius: 3
  637. # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  638. # Offset also applied to label tag variables. This option can work with disabled note tag.
  639. light_bg_offset: 0
  640. # Label tag.
  641. label: true
  642. # Tabs tag.
  643. tabs:
  644. enable: true
  645. transition:
  646. tabs: false
  647. labels: true
  648. border_radius: 0
  649. # Reading progress bar
  650. # Dependencies: https://github.com/theme-next/theme-next-reading-progress
  651. reading_progress:
  652. enable: false
  653. color: "#37c6c0"
  654. height: 2px
  655. #! ---------------------------------------------------------------
  656. #! DO NOT EDIT THE FOLLOWING SETTINGS
  657. #! UNLESS YOU KNOW WHAT YOU ARE DOING
  658. #! ---------------------------------------------------------------
  659. # 动画
  660. # Use velocity to animate everything.
  661. motion:
  662. enable: true
  663. async: false
  664. transition:
  665. # Transition variants:
  666. # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
  667. # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
  668. # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
  669. # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
  670. # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
  671. # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
  672. post_block: fadeIn
  673. post_header: slideDownIn
  674. post_body: slideDownIn
  675. coll_header: slideLeftIn
  676. # Only for Pisces | Gemini.
  677. sidebar: slideUpIn
  678. # Fancybox. There is support for old version 2 and new version 3.
  679. # Please, choose only any one variant, do not need to install both.
  680. # For install 2.x: https://github.com/theme-next/theme-next-fancybox
  681. # For install 3.x: https://github.com/theme-next/theme-next-fancybox3
  682. # 查看图片的
  683. fancybox: false
  684. # Added switch option for separated repo in 6.0.0.
  685. # Dependencies: https://github.com/theme-next/theme-next-fastclick
  686. fastclick: false
  687. # Added switch option for separated repo in 6.0.0.
  688. # Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
  689. lazyload: false
  690. # Progress bar in the top during page loading.
  691. # Dependencies: https://github.com/theme-next/theme-next-pace
  692. pace: false
  693. # Themes list:
  694. #pace-theme-big-counter
  695. #pace-theme-bounce
  696. #pace-theme-barber-shop
  697. #pace-theme-center-atom
  698. #pace-theme-center-circle
  699. #pace-theme-center-radar
  700. #pace-theme-center-simple
  701. #pace-theme-corner-indicator
  702. #pace-theme-fill-left
  703. #pace-theme-flash
  704. #pace-theme-loading-bar
  705. #pace-theme-mac-osx
  706. #pace-theme-minimal
  707. # For example
  708. # pace_theme: pace-theme-center-simple
  709. pace_theme: pace-theme-minimal
  710. # Canvas-nest
  711. # Dependencies: https://github.com/theme-next/theme-next-canvas-nest
  712. canvas_nest: true
  713. # JavaScript 3D library.
  714. # Dependencies: https://github.com/theme-next/theme-next-three
  715. # three_waves
  716. three_waves: false
  717. # canvas_lines
  718. canvas_lines: false
  719. # canvas_sphere
  720. canvas_sphere: false
  721. # Only fit scheme Pisces
  722. # Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
  723. # Canvas-ribbon
  724. # size: The width of the ribbon.
  725. # alpha: The transparency of the ribbon.
  726. # zIndex: The display level of the ribbon.
  727. canvas_ribbon:
  728. enable: false
  729. size: 300
  730. alpha: 0.6
  731. zIndex: -1
  732. # Script Vendors.
  733. # Set a CDN address for the vendor you want to customize.
  734. # For example
  735. # jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
  736. # Be aware that you should use the same version as internal ones to avoid potential problems.
  737. # Please use the https protocol of CDN files when you enable https on your site.
  738. # 相关内容用 CDN 地址取代,加速网站访问,注意版本尽可能要一致
  739. vendors:
  740. # Internal path prefix. Please do not edit it.
  741. _internal: lib
  742. # Internal version: 2.1.3
  743. jquery:
  744. # Internal version: 2.1.5
  745. # See: http://fancyapps.com/fancybox/
  746. fancybox:
  747. fancybox_css:
  748. # Internal version: 1.0.6
  749. # See: https://github.com/ftlabs/fastclick
  750. fastclick:
  751. # Internal version: 1.9.7
  752. # See: https://github.com/tuupola/jquery_lazyload
  753. lazyload:
  754. # Internal version: 1.2.1
  755. # See: http://VelocityJS.org
  756. velocity:
  757. # Internal version: 1.2.1
  758. # See: http://VelocityJS.org
  759. velocity_ui:
  760. # Internal version: 0.7.9
  761. # See: https://faisalman.github.io/ua-parser-js/
  762. ua_parser:
  763. # Internal version: 4.6.2
  764. # See: http://fontawesome.io/
  765. fontawesome:
  766. # Internal version: 1
  767. # https://www.algolia.com
  768. algolia_instant_js:
  769. algolia_instant_css:
  770. # Internal version: 1.0.2
  771. # See: https://github.com/HubSpot/pace
  772. # Or use direct links below:
  773. # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  774. # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
  775. pace:
  776. pace_css:
  777. # Internal version: 1.0.0
  778. # https://github.com/hustcc/canvas-nest.js
  779. canvas_nest:
  780. # three
  781. three:
  782. # three_waves
  783. # https://github.com/jjandxa/three_waves
  784. three_waves:
  785. # three_waves
  786. # https://github.com/jjandxa/canvas_lines
  787. canvas_lines:
  788. # three_waves
  789. # https://github.com/jjandxa/canvas_sphere
  790. canvas_sphere:
  791. # Internal version: 1.0.0
  792. # https://github.com/zproo/canvas-ribbon
  793. canvas_ribbon:
  794. # Internal version: 3.3.0
  795. # https://github.com/ethantw/Han
  796. han:
  797. # Internal version: 3.3.0
  798. # https://github.com/vinta/pangu.js
  799. pangu:
  800. # needMoreShare2
  801. # https://github.com/revir/need-more-share2
  802. needmoreshare2_js:
  803. needmoreshare2_css:
  804. # bookmark
  805. # Internal version: 1.0.0
  806. # https://github.com/theme-next/theme-next-bookmark
  807. bookmark:
  808. # reading_progress
  809. # Internal version: 1.0
  810. # https://github.com/theme-next/theme-next-reading-progress
  811. # Example: https://cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1.1/reading_progress.min.js
  812. reading_progress:
  813. # valine comment
  814. # Example: https://cdn.jsdelivr.net/npm/valine@1.1.8/dist/Valine.min.js
  815. valine:
  816. # Assets
  817. css: css
  818. js: js
  819. images: images
  820. # Theme version
  821. version: 6.0.6

2.4 动态背景

在主题配置文件中,靠后面,改canvas_nest: true,想要更改颜色和数量?修改文件:

文件位置:~/blog/themes/next/source/lib/canvas-nest/canvas-nest.min.js

怎么修改?参考canvas-nest.js

2.5 注脚

参考hexo-footnotes

3.优化:高级功能配置

3.1 大佬们的文章

更多如外挂一样的功能配置,就直接贴大佬的文章了,哪些功能自己喜欢,按照大佬的教程来配置就行。不过也有坑,比如有些功能(超链接样式、侧栏头像圆形并旋转)可以直接通过在custom.styl添加 CSS 代码实现,无需更改其它文件!

  1. 打造个性超赞博客Hexo+NexT+GithubPages的超深度优化
  2. hexo高阶教程next主题优化
  3. hexo的next主题个性化教程:打造炫酷网站
  4. Hexo搭建博客的个性化设置

3.2 鼠标点击效果

  1. 新建mouse.js,复制love或者富强民主...中的内容到js文件中。
  2. 将mouse.js放到/themes/next/source/js/src路径下
  3. 打开/themes/next/layout/layout.swig文件,添加如下代码:

    1. <script type="text/javascript" src="/js/src/mouse.js"></script>

3.3 文章加密

参考:hexo-blog-encrypt

  1. 在博客根目录下的package.json文件中添加一行代码

    1. "hexo-blog-encrypt": "2.0.*"
  2. 在博客根目录下: npm install

  3. 在站点配置文件中配置文章加密

    1. # Security
    2. encrypt:
    3. enable: true
  4. 然后在你的文章的头部添加上对应的字段,如 password, abstract, message

    1. title: hello world
    2. date: 2016-03-30 21:18:02
    3. tags:
    4. - fdsafsdaf
    5. password: Mike
    6. abstract: 没点开文章前显示的类容,类似于<!--more-->之前写的描述.
    7. message: 点开文章后,提示输入密码的信息.

3.4 博客推广及SEO优化

建站完成后百度和Google是没有收录我们的网站的,想要搜索到我们的博客非常困难。因此优化搜索非常有必要。

博客推广

博客推广第一步,手动推广。

你可以多浏览别人的博客并留下你的爪印(博客地址),比如 评论 本文;你可以去 README.md中提到的 这个issue 留下你的爪印;你可以去 Issues页面 试着回答下大家的问题并留下你的爪印。

博客推广第二步,SEO(Search Engine Optimization)。

搜索引擎

直接推荐大佬文章:【搜索优化】Hexo-next百度和谷歌搜索优化

3.5 随机生成背景图

在主题下的/source/css/_custom/custom.style文件中,添加如下代码:

  1. body{
  2. background:url(https://source.unsplash.com/random/1920x1080);
  3. background-size:cover;
  4. background-repeat:no-repeat;
  5. background-attachment:fixed;
  6. background-position:50% 50%;
  7. }
  8. .main-inner {
  9. margin-top: 60px;
  10. padding: 60px 60px 60px 60px;
  11. background: #fff;
  12. opacity: 0.8;
  13. min-height: 500px;
  14. }

3.6 背景动画

依赖于theme-next-canvas-nest,或者3D library

  1. 进入到主题目录,如:cd themes/next
  2. 下载插件

    1. git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
    2. git clone https://github.com/theme-next/theme-next-three source/lib/three
  3. 在主题配置文件中开启,一次只开启一个

    1. canvas_nest: false
    2. three_waves: false
    3. canvas_lines: true
    4. canvas_sphere: false
  4. 插件更新

    1. $ cd themes/next/source/lib/canvas-nest
    2. $ git pull

3.7 底部footer加入运行时间

  1. ~/blog/themes/next/layout/_partials

    1. <div id="days"></div>
    2. </script>
    3. <script language="javascript">
    4. function show_date_time(){
    5. window.setTimeout("show_date_time()", 1000);
    6. BirthDay=new Date("05/27/2017 15:00:00");
    7. today=new Date();
    8. timeold=(today.getTime()-BirthDay.getTime());
    9. sectimeold=timeold/1000
    10. secondsold=Math.floor(sectimeold);
    11. msPerDay=24*60*60*1000
    12. e_daysold=timeold/msPerDay
    13. daysold=Math.floor(e_daysold);
    14. e_hrsold=(e_daysold-daysold)*24;
    15. hrsold=setzero(Math.floor(e_hrsold));
    16. e_minsold=(e_hrsold-hrsold)*60;
    17. minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    18. seconds=setzero(Math.floor((e_minsold-minsold)*60));
    19. document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
    20. }
    21. function setzero(i){
    22. if (i<10)
    23. {i="0" + i};
    24. return i;
    25. }
    26. show_date_time();
    27. </script>
  2. 要是不喜欢颜色,感觉不好看,就可以在上文所提的custom.styl加入:

    文件位置:~/blog/themes/next/source/css/_custom/custom.styl

    1. // 自定义的侧栏时间样式
    2. #days {
    3. display: block;
    4. color: rgb(7, 179, 155);
    5. font-size: 13px;
    6. margin-top: 15px;
    7. }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注