修改文章底部带 # 的标签 修改模板 /themes/next/layout/_macro/post.swig
, 搜索 rel="tag">#
, 将 #
换成 <i class="fa fa-tag"></i>
网站运行时间 在 themes/layout/_parrials/footer.swing
中添加:
代码 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 <span id ="sitetime" > </span > <script language =javascript > function siteTime ( ) { window .setTimeout("siteTime()" , 1000 ); var seconds = 1000 ; var minutes = seconds * 60 ; var hours = minutes * 60 ; var days = hours * 24 ; var years = days * 365 ; var today = new Date (); var todayYear = today.getFullYear(); var todayMonth = today.getMonth()+1 ; var todayDate = today.getDate(); var todayHour = today.getHours(); var todayMinute = today.getMinutes(); var todaySecond = today.getSeconds(); var t1 = Date .UTC(2018 ,06 ,07 ,12 ,00 ,00 ); var t2 = Date .UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond); var diff = t2-t1; var diffYears = Math .floor(diff/years); var diffDays = Math .floor((diff/days)-diffYears*365 ); var diffHours = Math .floor((diff-(diffYears*365 +diffDays)*days)/hours); var diffMinutes = Math .floor((diff-(diffYears*365 +diffDays)*days-diffHours*hours)/minutes); var diffSeconds = Math .floor((diff-(diffYears*365 +diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds); document .getElementById("sitetime" ).innerHTML=" 已运行" +diffYears+" 年 " +diffDays+" 天 " +diffHours+" 小时 " +diffMinutes+" 分钟 " +diffSeconds+" 秒" ; } siteTime(); </script >
NexT 主题添加多字体 修改 /themes/next/source/css/_variables/base.styl
文件中的字体获取方法: 1 2 3 4 5 get_font_family (config) { custom_family = hexo-config('font.' + config + '.family' ) return custom_family is a 'string' ? unquote(custom_family) : null }
再修改主题配置文件: 1 2 3 4 global: external: true family: "Consolas, 'Helvetica Neue', Helvetica, Arial"
注意, 其中 family
的设置,必须以 "
包含,里面的字体名称如果含有空格,则用 '
。 两个顺序不能反了,否则生成的 index.html
中,有一部分引用该字体作为 url 时会出错,导致 gulp 压缩也会失败。
自定义样式 文字增加背景色 在 theme/next/source/css/_custom
中的 custom.styl
文件里增加:
css 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 span #inline-yellow { display :inline; padding :.2em .6em .3em ; font-size :80% ; font-weight :bold; line-height :1 ; color :#fff ; text-align :center; white-space :nowrap; vertical-align :baseline; border-radius :0 ; background-color : #f0ad4e ; } // 颜色块-绿 span #inline-green { display :inline; padding :.2em .6em .3em ; font-size :80% ; font-weight :bold; line-height :1 ; color :#fff ; text-align :center; white-space :nowrap; vertical-align :baseline; border-radius :0 ; background-color : #5cb85c ; } // 颜色块-蓝 span #inline-blue { display :inline; padding :.2em .6em .3em ; font-size :80% ; font-weight :bold; line-height :1 ; color :#fff ; text-align :center; white-space :nowrap; vertical-align :baseline; border-radius :0 ; background-color : #2780e3 ; } // 颜色块-紫 span #inline-purple { display :inline; padding :.2em .6em .3em ; font-size :80% ; font-weight :bold; line-height :1 ; color :#fff ; text-align :center; white-space :nowrap; vertical-align :baseline; border-radius :0 ; background-color : #9954bb ; }
使用方式:
1 2 3 4 <span id ="inline-blue" > 站点配置文件 </span > <span id ="inline-purple" > 主题配置文件 </span > <span id ="inline-yellow" > 站点配置文件 </span > <span id ="inline-green" > 主题配置文件 </span >
下载按钮样式 同样,在 theme/next/source/css/_custom
中的 custom.styl
文件里增加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 a #download { display : inline-block; padding : 0 10px ; color : #000 ; background : transparent; border : 2px solid #000 ; border-radius : 2px ; transition : all .5s ease; font-weight : bold; &:hover { background : #000 ; color : #fff ; } }
使用方式:
1 <a id ="download" href ="https://git-scm.com/download/win" > <i class ="fa fa-download" > </i > <span > Download Now</span > </a >
优化友链样式 友链(links) 的样式文件在 themes\next\source\css\_common\components\sidebar\sidebar-blogroll.styl
, 可以在此处修改样式。 模板位于 themes\next\layout\_macro\sidebar.swig
文件中的
标记处。 阁主博客的友链主要增加了以十二支为索引,以及友链的图标和说明。 本文的友链模板即样式代码如下所示,读者可自行更改样式和模板,有不懂的可留言或右下角call阁主~
模板部分 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 {# Blogroll #} {% if theme.links %} <div class ="links-of-blogroll motion-element {{ " links-of-blogroll- " + theme.links_layout | default ('inline ') }}"> <div class ="links-of-blogroll-title" > <i class ="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}" > </i > {{ theme.links_title }} </div > <ul class ="links-of-blogroll-list" > {% for blogrollText, blogrollURL in theme.links %} <li class ="links-of-blogroll-item" > {% set url = blogrollURL.split('||')[0] | trim %} {% set icon = blogrollURL.split('||')[1] | trim %} {% set comment = blogrollURL.split('||')[2] | trim | default(blogrollText) %} <a href ="{{url}}" title ="{{comment}}" rel ="noopener" target ="_blank" > <img src ="{{icon}}" /> {{ blogrollText }} </a > {#{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }#} </li > {% endfor %} </ul > </div > {% endif %}
样式部分 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 .links-of-blogroll { margin-top : 10px ; font-size : 13px ; } .links-of-blogroll-title { margin-top : 0 ; font-size : 14px ; font-weight : $font-weight-bold; } .links-of-blogroll-list { margin : 0 ; padding : 0 ; list-style :cjk-earthly-branch; } .links-of-blogroll-item { padding : 2px 10px ; text-align : left; margin : 15px ; a, span.exturl { max-width : 280px ; box-sizing : border-box ; overflow : hidden ; white-space : nowrap ; text-overflow : ellipsis ; border-bottom : none ; display : inline-table ; } img { height : 35px ; width : 35px ; display : inline; vertical-align : middle; margin-right : 15px ; } }
文章末尾结束标记 在路径 \themes\next\layout\_macro
中新建 passage-end-tag.swig
文件,并添加以下内容:
1 2 3 4 5 <div > {% if not is_index %} <div style ="text-align:center;color: #ccc;font-size:14px;" > -------------本文至此结束<i class ="fa fa-heartbeat" > </i > 感谢您的阅读-------------</div > {% endif %} </div >
接着打开 \themes\next\layout\_macro\post.swig
文件, 在 post-body
之后, post-footer
之前添加代码(post-footer之前两个DIV):
1 2 3 4 5 <div > {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %} </div >
最后再主题配置文件中启用:
1 2 3 passage_end_tag: enabled: true
文章底部版权信息+复制文本版权信息 在 theme/next/layout/_macro/
下增加文件 my-copyright.swig
:
代码 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 {% if page.copyright %} <div class ="my_post_copyright" > <p > <span > 本文标题:</span > <a href ="{{ url_for(page.path) }}" > {{ page.title }}</a > </p > <p > <span > 文章作者:</span > <a href ="/" title ="访问 {{ theme.author }} 的个人博客" > {{ theme.author }}</a > </p > <p > <span > 发布时间:</span > {{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p > <p > <span > 最后更新:</span > {{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p > <p > <span > 原始链接:</span > <a href ="{{ url_for(page.path) }}" title ="{{ page.title }}" > {{ page.permalink }}</a > </p > <p > <span > 许可协议:</span > <i class ="fa fa-creative-commons" > </i > <a rel ="license" href ="https://creativecommons.org/licenses/by-nc-nd/4.0/" target ="_blank" title ="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)" > 署名-非商业性使用-禁止演绎 4.0 国际</a > 转载请保留原文链接及作者。</p > </div > <script > function addLink ( ) { var body_element = document .body; var selection = window .getSelection(); var line1 = "原文出自[Memento 博客](https://memento1990.github.io/)" ; var line2 = "除特别声明外,署名-非商业性使用-禁止演绎 4.0 国际" ; var line3 = "转载请保留原文链接及作者: " + document .location.href; if (window .clipboardData) { var copytext = selection + "\r\n\r\n" + line1 + "\n" + line2 + "\n" + line3; window .clipboardData.setData("Text" , copytext); return false ; } else { var copytext = selection + "<br /><br />" + line1 + "<br />" + line2 + "<br />" + line3; var newdiv = document .createElement('div' ); newdiv.style.position = 'absolute' ; newdiv.style.left = '-99999px' ; body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window .setTimeout(function ( ) { body_element.removeChild(newdiv); }, 0); } } document .oncopy = addLink; </script > {% endif %}
其中 div
部分,会在文章底部生成版权声明板块,script
脚本代码则是处理复制文章文本时,自动在复制内容下面追加版权声明内容;
然后在 theme/next/layout/_macro/post.swig
中增加该模块配置(在 END POST BODY
注释标记后即可):
1 2 3 4 5 <div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %} </div>