添加相册
可以使用Next自带功能Group Pictures建立相册或者在文章中插入图片,这是一种最简单的方法。
标签云特效,参考cloud。
- 安装:
npm install hexo-tag-cloud@^2.0.* --save
- 对于next8版本,找到
theme/next/layout/_macro/sidebar.njk
,打开后搜索back2top.sidebar
,在其上方添加如下代码。
1 2 3 4 5 6 7 8 9 10 11 12
| {% if site.tags.length > 1 %} <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script> <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script> <div class="widget-wrap"> <h3 class="widget-title">Tag Cloud</h3> #为标签云命名,建议不命名,直接删除此行 <div id="myCanvasContainer" class="widget tagcloud"> <canvas width="250" height="250" id="resCanvas" style="width:100%"> {{ list_tags() }} </canvas> </div> </div> {% endif %}
|
hexo-tag-cloud
插件支持自定义,可以改变标签云的字体和颜色,还有突出高亮。在站点配置
里添加如下的配置项:
1 2 3 4 5 6 7
| tag_cloud: textFont: Trebuchet MS, Helvetica textColor: '#333' textHeight: 25 outlineColor: '#E2E1D1' maxSpeed: 0.5 pauseOnSelected: true # true 意味着当选中对应 tag 时,停止转动
|
自定义友情链接
next主题自带添加友情链接功能,在侧栏下方显示。
1 2 3 4 5 6
| links_settings: icon: fa fa-globe title: 友情链接 layout: inline # Available values: block | inline links: name: url
|
- 先关闭原先的友情链接,注释掉即可。
- 现在要在侧栏上方菜单里添加友情链接选项,
hexo new page "links"
,打开Hexo\source\links
里的index.md
,修改title、type等。
1 2 3 4
| title: 友情链接 #为了标题中出现 type: "links" #必须有 comments: true # 是否再下方显示评论栏 此处编辑你想写的内容,默认显示在所有友情链接下方。比如放置申请友链的要求等。
|
- 在
themes\next\languages\zh-CN
里添加links的翻译。如果已有翻译,也可以自行改成其他翻译,比如友链、朋友等。
- 此创建方法针对我所使用的next8.8.1,其它不同版本的next主题也可以参照以下方法。
在Hexo\themes\next\layout\_partials\page
里新建links.njk
文件,复制以下内容:
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
| {% block content %} {######################} {### LINKS BLOCK ###} {######################} <div id="links"> <style> .links-content{ margin-top:1rem; }
.link-navigation::after { content: " "; display: block; clear: both; } .card { width: 300px; font-size: 1rem; padding: 10px 20px; border-radius: 4px; transition-duration: 0.15s; margin-bottom: 1rem; display:flex; } .card:nth-child(odd) { float: left; } .card:nth-child(even) { float: right; } .card:hover { transform: scale(1.1); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } .card a { border:none; } .card .ava { width: 3rem!important; height: 3rem!important; margin:0!important; margin-right: 1em!important; border-radius:4px; } .card .card-header { font-style: italic; overflow: hidden; width: 236px; } .card .card-header a { font-style: normal; color: #2bbc8a; font-weight: bold; text-decoration: none; } .card .card-header a:hover { color: #d480aa; text-decoration: none; } .card .card-header .info { font-style:normal; color:#a3a3a3; font-size:14px; min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style> <div class="links-content"> <div class="link-navigation"> {% for link in theme.mylinks %} <div class="card"> <img class="ava" src="{{ link.avatar }}"/> <div class="card-header"> <div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div> <div class="info">{{ link.info }}</div> </div> </div> {% endfor %} </div> {{ page.content }} </div> </div> {##########################} {### END LINKS BLOCK ###} {##########################} {% endblock %}
|
修改Hexo\themes\next\layout\page.njk
文件,注意格式。
在
1 2
| {%- elif page.type === 'schedule' and not page.title %} {{- __('title.schedule') + page_title_suffix }}
|
下面添加:
1 2
| {%- elif page.type === 'links' and not page.title %} {{- __('title.links') + page_title_suffix }}
|
在
1 2
| {% elif page.type === 'schedule' %} {%- include '_partials/page/schedule.njk' -%}
|
下面添加:
1 2
| {% elif page.type === 'links' %} {%- include '_partials/page/links.njk' -%}
|
在主题配置
文件_config.yml
末尾处添加友链:
1 2 3 4 5 6 7 8 9
| mylinks: - nickname: #友链名称 avatar: #友链头像 site: #友链地址 info: #友链说明 - nickname: #友链名称 avatar: #友链头像 site: #友链地址 info: #友链说明
|