Hexo博客主题优化

短命女 2021-09-17 22:24 514阅读 0赞

标题图

Hexo博客主题优化

添加背景图

themes/*/source/css/_custom/custom.styl 中添加如下代码:

  1. body{
  2. background:url(/images/bg.jpg);
  3. background-size:cover;
  4. background-repeat:no-repeat;
  5. background-attachment:fixed;
  6. background-position:center;
  7. }

修改Logo字体

themes/*/source/css/_custom/custom.styl 中添加如下代码:

  1. @font-face {
  2. font-family: Zitiming;
  3. src: url('/fonts/##.ttf.ttf');
  4. }
  5. .site-title {
  6. font-size: 40px !important;
  7. font-family: '##' !important;
  8. }

文件在 themes/next/source/fonts 目录下,保留字体文件。

本地文章优化

  1. npm install hexo-generator-sitemap --save
  2. npm install hexo-generator-baidu-sitemap --save

站点配置文件_config.yml中添加以下代码

  1. sitemap:
  2. path: sitemap.xml
  3. baidusitemap:
  4. path: baidusitemap.xml

站点配置文件_config.yml

  1. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  2. url: http://你的网站

添加文章书写样式

效果

打开themes/next/source/css/_custom 下的 custom.styl 文件

  1. // 黄
  2. span#inline-yellow {
  3. display:inline;
  4. padding:.2em .6em .3em;
  5. font-size:80%;
  6. font-weight:bold;
  7. line-height:1;
  8. color:#fff;
  9. text-align:center;
  10. white-space:nowrap;
  11. vertical-align:baseline;
  12. border-radius:0;
  13. background-color: #f0ad4e;
  14. }
  15. // 绿
  16. span#inline-green {
  17. display:inline;
  18. padding:.2em .6em .3em;
  19. font-size:80%;
  20. font-weight:bold;
  21. line-height:1;
  22. color:#fff;
  23. text-align:center;
  24. white-space:nowrap;
  25. vertical-align:baseline;
  26. border-radius:0;
  27. background-color: #5cb85c;
  28. }
  29. // 蓝
  30. span#inline-blue {
  31. display:inline;
  32. padding:.2em .6em .3em;
  33. font-size:80%;
  34. font-weight:bold;
  35. line-height:1;
  36. color:#fff;
  37. text-align:center;
  38. white-space:nowrap;
  39. vertical-align:baseline;
  40. border-radius:0;
  41. background-color: #2780e3;
  42. }
  43. // 紫
  44. span#inline-purple {
  45. display:inline;
  46. padding:.2em .6em .3em;
  47. font-size:80%;
  48. font-weight:bold;
  49. line-height:1;
  50. color:#fff;
  51. text-align:center;
  52. white-space:nowrap;
  53. vertical-align:baseline;
  54. border-radius:0;
  55. background-color: #9954bb;
  56. }

编辑的文章地方

  1. <span id="inline-yellow"> 站点配置文件 </span>
  2. <span id="inline-blue"> 站点配置文件 </span>
  3. <span id="inline-green"> 主题配置文件 </span>
  4. <span id="inline-purple"> 主题配置文件 </span>

头像改成圆形

themes/next/source/css/_common/components/sidebar/sidebar-author.styl.site-author-image定义

  1. border-radius: 50%;
  2. -webkit-border-radius: 50%;
  3. -moz-border-radius: 50%;

robots.txt文件

hexo站点的source文件,在source文件夹中新建文件robots.txt

  1. User-agent: * Allow: /
  2. Allow: /archives/
  3. Disallow: /vendors/
  4. Disallow: /categories/
  5. Sitemap: http://www../sitemap.xml
  6. Sitemap: http://www../baidusitemap.xml
  7. # hexo robots.txt
  8. User-agent: *
  9. Allow: /
  10. Allow: /archives/
  11. Disallow: /vendors/
  12. Disallow: /js/
  13. Disallow: /css/
  14. Disallow: /fonts/
  15. Disallow: /vendors/
  16. Disallow: /fancybox/
  17. Sitemap: http://www..com/sitemap.xml
  18. Sitemap: http://www..com/baidusitemap.xml

修改内容的宽度

source/css/_variables/custom.styl 文件

  1. // 修改成你期望的宽度
  2. $content-desktop = 700px
  3. // 当视窗超过 1600px 后的宽度
  4. $content-desktop-large = 900px

文章加密

themes/*/layout/_partials/head.swig文件

  1. <script>
  2. (function(){
  3. if('{
  4. { page.password }}'){
  5. if (prompt('请输入密码') !== '{
  6. { page.password }}'){
  7. alert('密码错误');
  8. history.back();
  9. }
  10. }
  11. })();
  12. </script>

文章上

  1. ---
  2. password: 123456
  3. ---

添加头像

themes/next下的_config.yml文件

  1. avatar: http://example.com/avatar.png

或者使用本地图片,图片把放入themes/next/source/images

  1. avatar: /images/vator.png

头像旋转

  1. .site-author-image {
  2. display: block;
  3. margin: 0 auto;
  4. padding: $site-author-image-padding;
  5. max-width: $site-author-image-width;
  6. height: $site-author-image-height;
  7. border: $site-author-image-border-width solid $site-author-image-border-color;
  8. // 修改头像边框
  9. border-radius: 50%;
  10. -webkit-border-radius: 50%;
  11. -moz-border-radius: 50%;
  12. // 设置旋转
  13. transition: 1.4s all;
  14. }
  15. // 可旋转的圆形头像
  16. .site-author-image:hover {
  17. -webkit-transform: rotate(360deg);
  18. -moz-transform: rotate(360deg);
  19. -ms-transform: rotate(360deg);
  20. -transform: rotate(360deg);
  21. }

点击出现桃心效果

/themes/*/source/js/src下新建文件click.js

  1. !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

\themes\*\layout\_layout.swig文件末尾添加

  1. <!-- 页面点击小红心 -->
  2. <script type="text/javascript" src="/js/src/clicklove.js"></script>

修改访问URL路径

Hexo 站点下的 _config.yml 文件

  1. permalink: :category/:title/

创建标签目录

  1. $ cd you-site
  2. $ hexo new page tags

创建后,打开you-site/source/tagsindex.md

  1. ---
  2. title: #页面主题
  3. date: #当前创建文件时间
  4. type: "tags" # 设置页面类型
  5. ---

RSS

  1. $ npm install hexo-generator-feed --save

Hexo 站点下的_config.yml

  1. # feed
  2. # Dependencies: https://github.com/hexojs/hexo-generator-feed
  3. feed:
  4. type: atom
  5. path: atom.xml
  6. limit: 20
  7. hub:
  8. content:

文章添加边框阴影

打开 themes/*/source/css/_custom/custom.styl

  1. // 主页文章添加阴影
  2. .post {
  3. margin-top: 0px;
  4. margin-bottom: 60px;
  5. padding: 25px;
  6. -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  7. -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  8. }

显示当前浏览进度

themes/*/_config.yml

  1. # Back to top in sidebar
  2. b2t: true
  3. # Scroll percent label in b2t button
  4. scrollpercent: true

修改文章间分割线

themes/next/source/css/_common/components/post/下的post-eof.styl

  1. .posts-expand {
  2. .post-eof {
  3. display: block;
  4. // margin: $post-eof-margin-top auto $post-eof-margin-bottom;
  5. width: 0%; //分割线长度
  6. height: 0px; // 分割线高度
  7. background: $grey-light;
  8. text-align: center;
  9. }
  10. }

开启版权声明

主题配置文件下

  1. # Declare license on posts
  2. post_copyright:
  3. enable: true
  4. license: CC BY-NC-SA 3.0
  5. license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

带#号的标签

themes/next/layout/_macro/下的post.swig文件

  1. <div class="post-tags">
  2. {% for tag in post.tags %}
  3. <a href="{
  4. { url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {
  5. { tag.name }}</a>
  6. {% endfor %}
  7. </div>

文章字数统计,阅读时长

  1. $ npm i --save hexo-wordcount

themes/next下的_config.yml

  1. # Dependencies: https://github.com/willin/hexo-wordcount
  2. post_wordcount:
  3. item_text: true
  4. #字数统计
  5. wordcount: true
  6. #预览时间
  7. min2read: true
  8. #总字数
  9. totalcount: false
  10. separated_meta: true

连接样式

themes/next/source/css/_custom/下的custom.styl

  1. .post-body p a{
  2. color: #0593d3;
  3. border-bottom: none;
  4. border-bottom: 1px solid #0593d3;
  5. &:hover {
  6. color: #fc6423;
  7. border-bottom: none;
  8. border-bottom: 1px solid #fc6423;
  9. }
  10. }

添加广告

百度SSP和谷歌Adsense

注册,复制代码,在theme/*/layout/_custom/google_ad.swig, AdSense 上的代码粘贴进去,复制一份theme/*/layout/_custom/head.swig

theme/*/layout/post.swig添加:

  1. {% include '_custom/google_ad.swig' %}
  2. {% block content %}
  3. <div id="posts" class="posts-expand">
  4. {
  5. { post_template.render(page) }}
  6. {% include '_custom/google_ad.swig' %}
  7. </div>
  8. {% endblock %}

顶部加载条

themes/next下的_config.yml

  1. pace: true
  2. # Themes list:
  3. #pace-theme-big-counter
  4. #pace-theme-bounce
  5. #pace-theme-barber-shop
  6. #pace-theme-center-atom
  7. #pace-theme-center-circle
  8. #pace-theme-center-radar
  9. #pace-theme-center-simple
  10. #pace-theme-corner-indicator
  11. #pace-theme-fill-left
  12. #pace-theme-flash
  13. #pace-theme-loading-bar
  14. #pace-theme-mac-osx
  15. #pace-theme-minimal
  16. # For example
  17. # pace_theme: pace-theme-center-simple
  18. pace_theme: pace-theme-flash

添加复制功能

下载插件clipboard.js

themes/next/source/lib/,下新建clipboard文件夹

src文件夹下的文件拖动到clipboard文件夹

themes/next/source/js/src/,建立custom.js

  1. function createCopyBtns() {
  2. var $codeArea = $("figure table");
  3. if ($codeArea.length > 0) {
  4. //复制成功后将要干的事情
  5. function changeToSuccess(item) {
  6. $imgOK = $("#copyBtn").find("#imgSuccess");
  7. if ($imgOK.css("display") == "none") {
  8. $imgOK.css({
  9. opacity: 0,
  10. display: "block"
  11. });
  12. $imgOK.animate({
  13. opacity: 1
  14. }, 1000);
  15. setTimeout(function() {
  16. $imgOK.animate({
  17. opacity: 0
  18. }, 2000);
  19. }, 2000);
  20. setTimeout(function() {
  21. $imgOK.css("display", "none");
  22. }, 4000);
  23. };
  24. };
  25. $(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
  26. var clipboard = new Clipboard('#copyBtn', {
  27. target: function() {
  28. return document.querySelector("[copyFlag]");
  29. },
  30. isSupported: function() {
  31. return document.querySelector("[copyFlag]");
  32. }
  33. });
  34. clipboard.on('success',
  35. function(e) {
  36. //清除内容被选择状态
  37. e.clearSelection();
  38. changeToSuccess(e);
  39. });
  40. clipboard.on('error',
  41. function(e) {
  42. console.error('Action:', e.action);
  43. console.error('Trigger:', e.trigger);
  44. });
  45. //鼠标
  46. $("#copyBtn").hover(
  47. function() {
  48. $(this).stop();
  49. $(this).css("opacity", 1);
  50. },
  51. function() {
  52. $(this).animate({
  53. opacity: 0
  54. }, 2000);
  55. }
  56. );
  57. }
  58. }
  59. $("figure").hover(
  60. function() {
  61. //移除之前含有复制标志代码块的 copyFlag
  62. $("[copyFlag]").removeAttr("copyFlag");
  63. //在新的(当前鼠标所在代码区)代码块插入标志:copyFlag
  64. $(this).find(".code").attr("copyFlag", 1);
  65. $copyBtn = $("#copyBtn");
  66. if ($copyBtn.lenght != 0) {
  67. $copyBtn.stop();
  68. $copyBtn.css("opacity", 0.8);
  69. $copyBtn.css("display", "block");
  70. $copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
  71. $copyBtn.css("left", -$copyBtn.width() - 3);
  72. }
  73. },
  74. function() {
  75. $("#copyBtn").animate({
  76. opacity: 0
  77. }, 2000);
  78. }
  79. );
  80. $(document).ready(function() {
  81. createCopyBtns();
  82. });

themes/next/layout/_custom/建立custom.swig

  1. <script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script>
  2. <script type="text/javascript" src="/js/src/custom.js"></script>

themes/next/layout/_layout.swig,标签在</body>上面

  1. {% include '_custom/custom.swig' %}

或者

  • clipboard.min.js 推荐

保存在下面这个目录
.\themes\next\source\js\src目录下,创建clipboard-use.js

  1. /*页面载入完成后,创建复制按钮*/
  2. !function (e, t, a) {
  3. /* code */
  4. var initCopyCode = function(){
  5. var copyHtml = '';
  6. copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
  7. copyHtml += ' <i class="fa fa-globe"></i><span>copy</span>';
  8. copyHtml += '</button>';
  9. $(".highlight .code pre").before(copyHtml);
  10. new ClipboardJS('.btn-copy', {
  11. target: function(trigger) {
  12. return trigger.nextElementSibling;
  13. }
  14. });
  15. }
  16. initCopyCode();
  17. }(window, document);

.\themes\next\source\css\_custom\custom.styl样式

  1. //代码块复制按钮
  2. .highlight{
  3. //方便copy代码按钮(btn-copy)的定位
  4. position: relative;
  5. }
  6. .btn-copy {
  7. display: inline-block;
  8. cursor: pointer;
  9. background-color: #eee;
  10. background-image: linear-gradient(#fcfcfc,#eee);
  11. border: 1px solid #d5d5d5;
  12. border-radius: 3px;
  13. -webkit-user-select: none;
  14. -moz-user-select: none;
  15. -ms-user-select: none;
  16. user-select: none;
  17. -webkit-appearance: none;
  18. font-size: 13px;
  19. font-weight: 700;
  20. line-height: 20px;
  21. color: #333;
  22. -webkit-transition: opacity .3s ease-in-out;
  23. -o-transition: opacity .3s ease-in-out;
  24. transition: opacity .3s ease-in-out;
  25. padding: 2px 6px;
  26. position: absolute;
  27. right: 5px;
  28. top: 5px;
  29. opacity: 0;
  30. }
  31. .btn-copy span {
  32. margin-left: 5px;
  33. }
  34. .highlight:hover .btn-copy{
  35. opacity: 1;
  36. }

.\themes\next\layout\_layout.swig文件中,添加引用

  1. <!-- 代码块复制功能 -->
  2. <script type="text/javascript" src="/js/src/clipboard.min.js"></script>
  3. <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

我的博客

个人博客?:个人博客

如果看了觉得不错

点赞!转发!

达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

发表评论

表情:
评论列表 (有 0 条评论,514人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Hexo 搭建与主题配置

    每个技术人多少都应该写几篇博客,可以选择发布在各大平台如:简书、掘金等;也可以发布于自己搭建的博客。 本文记录了基于 Hexo 框架 + GitHub 搭建个人博客的过