这篇文章将会告诉你
如何将你的门户个性化
- 本次教程，使用Hexo最受欢迎的主题，也是我自己在使用的主题Next
- 在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。
- 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；
- 另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
- 为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。
- 本文中配置文件的路径分别指的是：
站点配置文件：/blog/_config.yml主题配置文件：/blog/themes/next/_config.yml
- 请记住以下四条命令，以后部署门户会经常用到：
hexo clean #清除缓存hexo g #生成静态页面hexo s #开启本地服务器hexo d #部署到码云
- 其中hexo g和hexo s，在后文中统称测试二连
- 门户内的图片，建议上传到网络图库，
-
此处推荐Bmob后端云https://www.bmob.cn
以下步骤
如果在搭建门户时已经弄好
就不需要再重复操作了
直接进行到美化主题吧
- 在站点目录下打开Git Bash，输入以下代码
git clone https://github.com/iissnan/hexo-theme-next themes/next
- 打开 站点配置文件 找到theme字段，将其值修改为next。
- 到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。
- 首先启动 Hexo 本地站点，命令是 hexo s 当命令行输出中提示出：
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
- 此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。
- 现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。
- 打开主题目录的 _config.yml 配置文件
- 注意：这里要区别，不是站点目录，主题目录的路径为：blog/themes/主题文件夹名称。
- 通过查找功能找到 Schemes 模块，修改为 Gemini 风格。如果喜欢其他风格可以自己修改。如下图所示：
- 保存后，使用测试二连命令，刷新页面就可以看到新主题的界面
- 在上面的网站界面，可以发现网站的文字是英文，只要修改一下语言模式即可。
- 打开站点目录下的 _config.yml 配置文件。找到 language，设置为 zh-Hans。标题等其他参数的设置如下。
- 效果如下图所示
- 在站点目录，执行下面的命令行：
hexo new page categories
- 这个命令会新建一个分类页面，会在站点目录下的source文件夹中新建一个categories文件夹
- 打开 categories 文件夹中的 index.md 文件，添加 type 字段，设置为 “categories”
- 接着到主题目录下的 _config.yml 配置文件下，找到 menu 模块，把 categories 的注释给去掉。
- 保存后，运行测试二连命令，打开测试界面
- 文章发布前，在 front-matter 部分，多写一个 categories 字段，然后参数写上类别的名称，保存后重启服务，就可以看到文章已经被分类。如下图所示。
- 方法跟分类设置差不多，就不多讲解了
- 但是需要补充一点， front-matter 中字段有多个参数的时候，可以使用如下图的写法。
- 在站点目录安装hexo-generator-search
npm install hexo-generator-search --save
- 安装 hexo-generator-searchdb
npm install hexo-generator-searchdb --save
- 在站点目录的 _config.yml 配置文件的文末添加下面这段代码。
search: path: search.xml field: post format: html limit: 10000
- 编辑主题目录的 _config.yml 配置文件，设置 local_search 为 ture。
- 保存后，测试二连，效果图如下。
- 打开主题文件夹下的 _config.yml 配置文件
- 通过查找功能找到 avatar
- 去掉avatar前面的#，值设置成头像的链接地址。
- 将头像放置主题目录下的 source/uploads/ （目录若不存在，则新建 uploads ）
配置为：
avatar: /uploads/avatar.png
- 或者 放置在 source/images/ 目录下
配置为：
avatar: /images/avatar.png
- 或直接放上链接，如：
avatar: http://example.com/avatar.png
- 运行测试二连
- 打开主题文件夹的 sourcecss_commoncomponentssidebar 目录下的 sidebar-author.styl 文件，然后把下面的代码添加进去即可。
.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; /* 头像圆形 */ border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/ /* 鼠标经过头像旋转360度 */ -webkit-transition: -webkit-transform 1.0s ease-out; -moz-transition: -moz-transform 1.0s ease-out; transition: transform 1.0s ease-out;}img:hover { /* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused; animation-play-state:paused;*/ /* 鼠标经过头像旋转360度 */ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg);}/* Z 轴旋转动画 */@-webkit-keyframes play { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); }}@-moz-keyframes play { 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); }}@keyframes play { 0% { transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg); -moz-transform: rotateZ(-360deg); -o-transform: rotateZ(-360deg); }}
- 安装 hexo 插件，需要在 站点目录 下进行安装。
npm install --save hexo-generator-feed
- 安装完成后在站点目录下的 _config.yml 配置文件的文末添加下面这段代码：
# Extensions## Plugins: http://hexo.io/plugins/plugins: hexo-generate-feed
- 在主题文件夹下的 _config.yml 配置文件中，找到 rss ，在后面加上 /atom.xml。（注意在冒号后面要加一个空格）如下图所示：
- 重启服务，刷新页面可以看到如下效果图：
- 在主题文件夹下的 _config.yml 配置文件中，搜索 Social。在需要设置图标的前面，把#删掉，链接改为你自己的链接。
- 测试二连，效果如图
- 在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true就行了（注意分号后面要加一个空格。
- 测试二连，效果如下图
- 具体实现方法：
- 打开themesnextsourcecss_customcustom.styl
- 向里面加入：
// 主页文章添加阴影效果 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); }
- 保存后运行测试二连即可
- 具体方法实现：
- 在站点目录运行如下代码：
npm install hexo-wordcount --save
- 然后在/themes/next/layout/_partials/footer.swig文件尾部加上：
<div class="theme-info"> <div class="powered-by"></div> <span class="post-count">门户全站共{{ totalcount(site) }}字</span></div>
- 保存后测试二连即可
- 具体实现方法：
- 在站点目录下运行以下命令：
npm install hexo-wordcount --save
- 然后在主题目录的配置文件中，修改以下参数的值为true
# Post wordcount display settings# Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount: item_text: true wordcount: true min2read: true
- 保存后测试二连即可
- 具体实现方法：
- 在目录 next/layout/_macro/下新建 my-copyright.swig文件
- 在新建的文件内添加以下代码：
{% if page.copyright %}<div class="my_post_copyright"> <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <!-- JS库 sweetalert 可修改路径 --> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <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> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功！"></i></span> </p> <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> 转载请保留原文链接及作者。</p> </div><script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){ clipboard.on('success', function(){ swal({ title: "", text: '复制成功', icon: "success", showConfirmButton: true }); }); }); </script>{% endif %}
- 在目录next/source/css/_common/components/post/下新建my-post-copyright.styl
- 在新建的文件内添加以下代码：
.my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 0.93rem; line-height: 1.6em; word-break: break-all; background: rgba(255,255,255,0.4);}.my_post_copyright p{margin:0;}.my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold;}.my_post_copyright .raw { margin-left: 1em; width: 5em;}.my_post_copyright a { color: #808080; border-bottom:0;}.my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline;}.my_post_copyright:hover .fa-clipboard { color: #000;}.my_post_copyright .post-url:hover { font-weight: normal;}.my_post_copyright .copy-path { margin-left: 1em; width: 1em; +mobile(){display:none;}}.my_post_copyright .copy-path:hover { color: #808080; cursor: pointer;}
- 修改next/layout/_macro/post.swig，在代码
<div> {% if not is_index %} {% include 'wechat-subscriber.swig' %} {% endif %}</div>
- 之前添加增加如下代码：
<div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %}</div>
- 修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：
@import "my-post-copyright"
- 如果要在该博文下面增加版权信息的显示，需要在文章中增加copyright: true的设置，类似：
- 保存后测试二连即可
- 打开themes/next/layout/_partials/footer.swig,使用<!--和-->隐藏之间的代码即可，或者直接删除。位置如图：
- 在站点目录下依次输入以下命令：
npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save
- 然后在需要置顶的文章的 Front-matter 中加上 top: ，数值越大表示等级越高，越靠前显示。
- 在主题目录中打开 layout/_macro/post.swig 文件，定位到 post-header ，把下面的代码添加进去即可。
{% if post.top %} <i class="fa fa-thumb-tack"></i> <font color=7D26CD>置顶</font>{% endif %}
- 保存后测试二连即可
- 在主题目录下打开 _config.yml 配置文件，定位到 wechat_subscriber，修改相关配置，如下图所示：
# Wechat Subscriberwechat_subscriber:enabled: trueqcode: http://bmob-cdn-25022.b0.upaiyun.com/2019/05/01/501d888e40d2e16880725982a92da39c.pngdescription: 希望您可以扫一扫这个二维码，关注我的公众号。
- 主题目录下打开 _config.yml 配置文件中，定位到 reward，把微信收款码和支付宝收款码存放到网络图库中。然后如下图所示修改相关配置，animation 这个字段是设置字体跳动，可以根据个人需求设置。
- Hexo门户如何添加在线联系功能呢,发现了一个不错的网站可以提供在线联系的服务，当有用户在网页上给你留言后会通过邮件或者微信通知你，可以及时的解答用户的疑问。
- 最终的效果可以参考我门户的右下角,有个聊天的按钮,效果如下所示:
- 配置方法如下:
- 首先到DaoVoice（http://dashboard.daovoice.io）上注册一个账号,注册完成后会得到一个app_id，获取appid的步骤如下图所示:
- 修改/themes/next/layout/_partials/head.swig文件，添加内容如下：
{% if theme.daovoice %} <script> (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/2e5d695d.js","daovoice") daovoice('init', { app_id: "{{theme.daovoice_app_id}}" }); daovoice('update');</script>{% endif %}
注意 ’//widget.daovoice.io/widget/2e5d695d.js’ 中js文件名改成自己的id
- 接着打开主题配置文件_config.yml，添加如下代码：
# Online contact daovoice: truedaovoice_app_id: 这里输入前面获取的app_id
- 最后执行hexo cl && hexo g && hexo s就能看到效果了。
- 需要注意的是,next主题下聊天的按钮会和其他按钮重叠到一起，可以到聊天设置，修改下按钮的位置:
- 最后到右上角选择管理员，微信绑定,可以绑定你的微信号，关注公众号后打开小程序，就可以实时收发消息，有新的消息也会通过微信通知，设置页面如下:
- 在主题目录下的 _config.yml 配置文件中，搜索 links_title，然后根据自己的需求自己添加修改
links_icon：显示在标题前的图标。links_title：标题。links_layout：block 一行一个，inline 一行多个。links：要显示的链接以及名称。
本文来源于：不知名的某乔 | Hexo门户个性美化教程-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。
- 赞助本站
- 微信扫一扫
-
- 加入Q群
- QQ扫一扫
-
评论