hexo搭建个人独立博客

2024-06-23 23:22| 来源: 网络整理| 查看: 265

NexT主题定制优化

作者: seriouszyx 独立博客记录了日常学习总结代码均可在 Github 上找到（求Star）

2019.04.15

发过这篇文章之后好多人跟我讨论过，感谢大家喜欢我的博客样式。博客也经历过几次大改，一直都没有稳定的状态，所以我把源码上传到了 GitHub 的 hexo 分支上，便大家交流学习。

使用Hexo来搭建静态网站已经越来越简单，网上的教程也有很多，所以在这里主要讲一下我的美化方案，先给大家看一下我的样式（慢慢死宅气2333）：这里写图片描述

这里写图片描述

我的网站链接主题 NexT: NexT.Gemini 评论 livere 搜索 Swiftype 托管国内：Coding Pages国外: GitHub 源码 GitHub 主题配置文件

背景的设置在custom.styl

// Custom styles. //背景图片相关 @media screen and (min-width:1200px) { body { background-image:url(/images/bg1.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position:50% 50%; background-size: cover } #footer a { color:#eee; } //改变背景色和透明度 .main-inner { background: #fff; opacity: 0.9; } // 文章标题动态效果 .posts-expand .post-title-link::before { background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%); } code { color: #ff7600; background: #fbf7f8; margin: 2px; } // 大代码块的自定义样式 .highlight, pre { margin: 5px 0; padding: 5px; border-radius: 3px; } .highlight, code, pre { border: 1px solid #d6d6d6; } } .site-title { font-size: 24px; font-weight: 400; font-family: 'Damion',"PingFang SC","Microsoft YaHei",sans-serif; } // 自定义页脚跳动的心样式 @keyframes heartAnimate { 0%,100%{transform:scale(1);} 10%,30%{transform:scale(0.9);} 20%,40%,60%,80%{transform:scale(1.1);} 50%,70%{transform:scale(1.1);} } #heart { animation: heartAnimate 1.33s ease-in-out infinite; } .with-love { color: rgb(255, 113, 168); }

我的配置文件：

# =============================================================== # ========================= ATTENTION! ========================== # =============================================================== # NexT repository is moving here: https://github.com/theme-next # =============================================================== # It's rebase to v6.0.0 and future maintenance will resume there # =============================================================== # --------------------------------------------------------------- # Theme Core Configuration Settings # --------------------------------------------------------------- # Set to true, if you want to fully override the default configuration. # Useful if you don't want to inherit the theme _config.yml configurations. override: false # --------------------------------------------------------------- # Site Information Settings # --------------------------------------------------------------- # To get or check favicons visit: https://realfavicongenerator.net # Put your favicons into `hexo-site/source/` (recommend) or `hexo-site/themes/next/source/images/` directory. # Default NexT favicons placed in `hexo-site/themes/next/source/images/` directory. # And if you want to place your icons in `hexo-site/source/` root directory, you must remove `/images` prefix from pathes. # For example, you put your favicons into `hexo-site/source/images` directory. # Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo. favicon: small: /images/favicon-16x16-next.png medium: /images/favicon-32x32-next.png apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml # Set default keywords (Use a comma to separate) keywords: "Hexo, NexT" # 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: 2018 # Icon between year and copyright info. icon: heart # 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: true # Version info of NexT after scheme info (vX.X.X). version: true # ------------------------------------------------------------- # Any custom text can be defined here. #custom_text: Hosted by GitHub Pages # --------------------------------------------------------------- # 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 about: /about/ || user tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat top: /top/ || signal # Enable/Disable menu icons. menu_icons: enable: true # --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #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: https://github.com/seriouszyx || github E-Mail: mailto:[email protected] || envelope Google: https://plus.google.com/seriouszyx || google Twitter: https://twitter.com/seriouszyx1 || 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 || skype social_icons: enable: true icons_only: false transition: false GitHub: github # Blog rolls links_icon: link links_title: Links links_layout: block #links_layout: inline #links: #Title: http://example.com/ # Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: /uploads/avatar1.jpg # Table Of Contents in the Sidebar toc: enable: true # Automatically add list number to toc. number: true # If true, all words will placed on next lines if header width longer then sidebar width. wrap: true # 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: true # Scroll percent label in b2t button. scrollpercent: true # Enable sidebar on narrow view (only for Muse | Mist). onmobile: false # --------------------------------------------------------------- # Post Settings # --------------------------------------------------------------- # Automatically scroll page to section which is under mark. scroll_to_more: false # Automatically saving scroll position on each post/page in cookies. save_scroll: false # Automatically excerpt description in homepage as preamble text. excerpt_description: false # Automatically Excerpt. Not recommend. # Please use in the post to control excerpt accurately. auto_excerpt: enable: false length: 150 # Post meta display settings post_meta: item_text: true created_at: true updated_at: false categories: true # Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount: item_text: true wordcount: false min2read: false totalcount: false separated_meta: true # Wechat Subscriber #wechat_subscriber: #enabled: true #qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg #description: ex. subscribe to my blog by scanning my public wechat account # Reward reward_comment: 大吉大利！ wechatpay: /images/wechat.png alipay: /images/alipay.jpg #bitcoin: /images/bitcoin.png # Declare license on posts post_copyright: enable: false license: CC BY-NC-SA 3.0 license_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: "#fff" # 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: false image: # Code Highlight theme # Available value: # normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: normal # --------------------------------------------------------------- # Font Settings # - Find fonts on Google Fonts (https://www.google.com/fonts) # - All fonts set here will have the following styles: # light, light italic, normal, normal italic, bold, bold italic # - Be aware that setting too much fonts will cause site running slowly # - Introduce in 5.0.1 # --------------------------------------------------------------- # CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844 # To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`): # Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS # --------------------------------------------------------------- font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default). host: https://fonts.cat.net # Font options: # `external: true` will load this font family from `host` above. # `family: Times New Roman`. Without any quotes. # `size: xx`. Use `px` as unit. # Global font settings used on element. global: external: true family: Monda # Font settings for Headlines (h1, h2, h3, h4, h5, h6). # Fallback to `global` font settings. headings: external: true # Font settings for posts. # Fallback to `global` font settings. posts: external: true family: # Font settings for Logo. # Fallback to `global` font settings. logo: external: true family: # Font settings for and code blocks. codes: external: true family: # --------------------------------------------------------------- # Third Party Services Settings # --------------------------------------------------------------- # MathJax Support mathjax: enable: false per_page: false cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML # Han Support docs: https://hanzi.pro/ han: false # Swiftype Search API Key #swiftype_key: # Baidu Analytics ID #baidu_analytics: # Duoshuo ShortName #duoshuo_shortname: # Disqus disqus: enable: false shortname: count: true # Hypercomments #hypercomments_id: # changyan changyan: enable: false appid: appkey: # Valine. # You can get your appid and appkey from https://leancloud.cn # more info please open https://valine.js.org valine: enable: false appid: # your leancloud application appid appkey: # your leancloud application appkey notify: false # mail notifier , https://github.com/xCss/Valine/wiki verify: false # Verification code placeholder: Just go go # comment box placeholder avatar: mm # gravatar style guest_info: nick,mail,link # custom comment header pageSize: 10 # pagination size # Support for youyan comments system. # You can get your uid from http://www.uyan.cc #youyan_uid: your uid # Support for LiveRe comments system. # You can get your uid from https://livere.com/insight/myCode (General web site) livere_uid: MTAyMC8zODM2MS8xNDg4OQ== # Gitment # Introduction: https://imsun.net/posts/gitment-introduction/ # You can get your Github ID from https://api.github.com/users/ gitment: enable: false mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway count: true # Show comments count in post meta area lazy: false # Comments lazy loading with a button cleanly: false # Hide 'Powered by ...' on footer, and more language: # Force language, or auto switch by theme github_user: # MUST HAVE, Your Github ID github_repo: # MUST HAVE, The repo you use to store Gitment comments client_id: # MUST HAVE, Github client id for the Gitment client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled # Baidu Share # Available value: # button | slide # Warning: Baidu Share does not support https. #baidushare: ## type: button # Share # This plugin is more useful in China, make sure you known how to use it. # And you can find the use guide at official webiste: http://www.jiathis.com/. # Warning: JiaThis does not support https. #jiathis: ##uid: Get this uid from http://www.jiathis.com/ #add_this_id: # Share #duoshuo_share: true # NeedMoreShare2 # This plugin is a pure javascript sharing lib which is useful in China. # See: https://github.com/revir/need-more-share2 # Also see: https://github.com/DzmVasileusky/needShareButton # iconStyle: default | box # boxForm: horizontal | vertical # position: top / middle / bottom + Left / Center / Right # networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit, # Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot, # Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine, # Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru needmoreshare2: enable: false postbottom: enable: false options: iconStyle: box boxForm: horizontal position: bottomCenter networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook float: enable: false options: iconStyle: box boxForm: horizontal position: middleRight networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ #google_site_verification: # Google Analytics #google_analytics: # Bing Webmaster tools verification setting # See: https://www.bing.com/webmaster/ #bing_site_verification: # Yandex Webmaster tools verification setting # See: https://webmaster.yandex.ru/ #yandex_site_verification: # CNZZ count #cnzz_siteid: # Application Insights # See https://azure.microsoft.com/en-us/services/application-insights/ # application_insights: # Make duoshuo show UA # user_id must NOT be null when admin_enable is true! # you can visit http://dev.duoshuo.com get duoshuo user id. duoshuo_info: ua_enable: true admin_enable: false user_id: 0 #admin_nickname: Author # Post widgets & FB/VK comments settings. # --------------------------------------------------------------- # Facebook SDK Support. # https://github.com/iissnan/hexo-theme-next/pull/410 facebook_sdk: enable: false app_id: # fb_admin: # like_button: #true webmaster: #true # Facebook comments plugin # This plugin depends on Facebook SDK. # If facebook_sdk.enable is false, Facebook comments plugin is unavailable. facebook_comments_plugin: enable: false num_of_posts: 10 # min posts num is 1 width: 100% # default width is 550px scheme: light # default scheme is light (light or dark) # VKontakte API Support. # To get your AppID visit https://vk.com/editapp?act=create vkontakte_api: enable: false app_id: # like: true comments: true num_of_posts: 10 # Star rating support to each article. # To get your ID visit https://widgetpack.com rating: enable: false id: # color: fc6423 # --------------------------------------------------------------- # Show number of visitors to each article. # You can visit https://leancloud.cn get AppID and AppKey. leancloud_visitors: enable: false app_id: # app_key: # # Another tool to show number of visitors to each article. # visit https://console.firebase.google.com/u/0/ to get apiKey and projectId # visit https://firebase.google.com/docs/firestore/ to get more information about firestore firestore: enable: false collection: articles #required, a string collection name to access firestore database apiKey: #required projectId: #required bluebird: false #enable this if you want to include bluebird 3.5.1(core version) Promise polyfill # Show PV/UV of the website/page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi/ busuanzi_count: # count values only if the other configs are false enable: true # custom uv span for the whole site site_uv: true site_uv_header: Visitor site_uv_footer: # custom pv span for the whole site site_pv: true site_pv_header: Total Visit site_pv_footer: # custom pv span for one page only page_pv: true page_pv_header: View page_pv_footer: # Tencent analytics ID # tencent_analytics: # Tencent MTA ID # tencent_mta: # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: false # Google Calendar # Share your recent schedule to others via calendar page # # API Documentation: # https://developers.google.com/google-apps/calendar/v3/reference/events/list calendar: enable: false calendar_id: api_key: orderBy: startTime offsetMax: 24 offsetMin: 4 timeZone: showDeleted: false singleEvents: true maxResults: 250 # Algolia Search algolia_search: enable: false hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" hits_stats: "${hits} results found in ${time} ms" # Local search # Dependencies: https://github.com/flashlab/hexo-generator-search local_search: enable: true # if auto, trigger search by changing input # if manual, trigger search by pressing enter key or search button trigger: auto # show top n results per article, show all results by setting to -1 top_n_per_article: 1 # --------------------------------------------------------------- # Tags Settings # --------------------------------------------------------------- # External URL with BASE64 encrypt & decrypt. # Usage: {% exturl text url "title" %} # Alias: {% extlink text url "title" %} exturl: false # Note tag (bs-callout). note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style: flat icons: true border_radius: 3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0 # Label tag. label: true # Tabs tag. tabs: enable: true transition: tabs: true labels: true border_radius: 0 #! --------------------------------------------------------------- #! DO NOT EDIT THE FOLLOWING SETTINGS #! UNLESS YOU KNOW WHAT YOU ARE DOING #! --------------------------------------------------------------- # Use velocity to animate everything. motion: enable: true async: false transition: # Transition variants: # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut post_block: fadeIn post_header: slideDownIn post_body: slideDownIn coll_header: slideLeftIn # Only for Pisces | Gemini. sidebar: slideUpIn # Fancybox fancybox: true # Progress bar in the top during page loading. pace: true # Themes list: #pace-theme-big-counter #pace-theme-bounce #pace-theme-barber-shop #pace-theme-center-atom #pace-theme-center-circle #pace-theme-center-radar #pace-theme-center-simple #pace-theme-corner-indicator #pace-theme-fill-left pace_theme: pace-theme-flash #pace-theme-loading-bar #pace-theme-mac-osx #pace-theme-minimal # For example # pace_theme: pace-theme-center-simple # pace_theme: pace-theme-minimal # Canvas-nest canvas_nest: false # three_waves three_waves: false # canvas_lines canvas_lines: false # canvas_sphere canvas_sphere: false # Only fit scheme Pisces # Canvas-ribbon # size: The width of the ribbon. # alpha: The transparency of the ribbon. # zIndex: The display level of the ribbon. canvas_ribbon: enable: false size: 300 alpha: 0.6 zIndex: -1 # Script Vendors. # Set a CDN address for the vendor you want to customize. # For example # jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js # Be aware that you should use the same version as internal ones to avoid potential problems. # Please use the https protocol of CDN files when you enable https on your site. vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js # Internal version: 2.1.5 # See: http://fancyapps.com/fancybox/ fancybox: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js fancybox_css: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css # Internal version: 1.0.6 # See: https://github.com/ftlabs/fastclick fastclick: https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js # Internal version: 1.2.1 # See: http://VelocityJS.org velocity: https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js # Internal version: 1.2.1 # See: http://VelocityJS.org velocity_ui: https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.9/ua-parser.min.js # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Internal version: 1.0.2 # See: https://github.com/HubSpot/pace # Or use direct links below: # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css # Internal version: 1.0.0 # https://github.com/hustcc/canvas-nest.js canvas_nest: # three three: # three_waves # https://github.com/jjandxa/three_waves three_waves: # three_waves # https://github.com/jjandxa/canvas_lines canvas_lines: # three_waves # https://github.com/jjandxa/canvas_sphere canvas_sphere: # Internal version: 1.0.0 # https://github.com/zproo/canvas-ribbon canvas_ribbon: # Internal version: 3.3.0 # https://github.com/ethantw/Han han: # needMoreShare2 # https://github.com/revir/need-more-share2 needMoreShare2: # Assets css: css js: js images: images # Theme version version: 5.1.4 # 文章末尾添加“本文结束”标记 passage_end_tag: enabled: true

【本文地址】

公司简介

联系我们