- 谷歌认证
- hexo-admin-ehc
- 评论系统
- 修改网页的配色，使其更加“微软”
💡 因为hexo是安装在当前文件夹, 因此不会在路径里, 无法通过 hexo 命令直接调用,
hexo位于 node_modules/hexo/bin/hexo (相对于根目录)
注：我们编写了 /h 和 /hexo.sh，现在 Linux 下可以在根目录调用 h <argument> 实现 node_modules/hexo/bin/hexo <argument> 的效果。
🔗 note
🔗 tab
🔗 首页摘要图片
hexo支持多分类和多级分类, 但要注意别用错了
如下写法会将文章放至a/b分类
categories:
- a
- b
categories: [a, b]
如下写法将文章放到a和b分类
categories:
- [a]
- [b]
而像下面这样的写法会将文章放到a和b/c分类
categories:
- [a]
- [b, c]
由于hexo的懒惰, 用md语法插入的
图片在首页无法显示, 用它提供的标签插件倒是可以兼顾, 但不够优雅. 目前没去解决, 不
过可以尝试关注 asset_img 附近代码来自己实现.
📖 hexo官方文档
📖 NexT官方文档
- 一键git部署插件 hexo-deployer-git
- emoji渲染插件 hexo-filter-github-emojis
- 文章阅读时间估计, 字数统计插件 hexo-symbols-count-time
- 站内搜索功能数据库 hexo-generator-searchdb
- 站内搜索功能 hexo-generator-search
- RSS订阅功能插件 hexo-generator-feed
- sitemap生成插件 hexo-generator-sitemap
- CJK回车产生空格问题修复插件 hexo-filter-fix-cjk-spacing
因为微信的防盗链机制, 直接复制粘贴微信推送到md文件渲染出来一个问题是一部分图片不 允许转载, 而另一部分图片会遇到跨域权限问题. 虽然跨域问题能轻松解决, 但我没有找到 破解微信的防盗链的办法. 因此直接将所有图片搬运到本地来解决这个问题.
首先将微信推送的最上一层sectionHTML元素格式化后复制到md文件中, 然后使用根目录的 wechatcopyer.py脚本一键搬运微信推送中的图片. 使用方法如下:
./wechatcopyer.py source/_posts/2019/09/软件自由日活动.md这样插入图片不再一定要用hexo提供的语法, 就用markdown语法就可以
🔗 更改方 式
💡 和链接里不一样的是因为这里的文章链接是:year/:month/:title.md所以语句稍有不同, 是:
return join(post.path.replace(/\.html?$/, ''), (post.path.replace(/\.html?$/, '')).substr((post.path.replace(/\.html?$/, '')).lastIndexOf(RegExp("\\d\\d\\d\\d/\\d\\d/\\d\\d")) + 11), this.slug);这样能便于管理文章, 更改 new_post_name 的值就可以了
🔗 参考
上传写作文件自动生成并部署. 后续考虑采用merge要更新文章的文件到Root分支, 由 travis自动部署的方式进一步减少需要下载到本地的文件数量
❗️ 在 travis-ci.com 管理, 而不是 travis-ci.org
因为没找到合适的图片暂时没改. 老网站的背景图是 themes/uestc-msc/source/images/microsoft-building-logo2-1920.jpg
🔗 参考操作
🔗 参考
next主题的样式会覆盖文章markdown文件中的样式, 需要在
source/_data/styles.styl 中设置需要的样
式 (因为友链的元素是在post-body里)
🔗 参考方案
font awesome似乎只提供单色字体图标, 也不够丰富, 而 Iconfont就很 牛皮了, 有丰富的图标, 有多色图标, 也能很容易的集成到网页.
此处采用symbol引用
❗️ 在这几个改动了的.swig文件头尾加了如果有对应自定义.swig文件就不渲染的条件语句, 不然会有重复渲染的bug, 已提PR
- 首先图省事直接把项目生成的symbol代码添加到整个站点的head, 即
themes/uestc-msc/layout/_partials/head/head.swig (目前在line54) (改后放到 source/_data/head.swig ):
{%- if theme.iconfont.source %}
<script src = "https:{{ theme.iconfont.source }}"></script>
{%- endif%}- 更改sidebar中的社交链接使用iconfont
themes/uestc-msc/layout/_partials/sidebar/site-overview.swig line 101 (改好后放到 source/_data/sidebar.swig ):
❗️只注释掉原本的font awesome语句, 万一以后还用呢 🤷
{#%- set sidebarIcon = '<i class="fa fa-fw fa-' + link.split('||')[1] | trim | default('globe') + '"></i>' %#}
{% set sidebarIcon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + link.split('||')[1] | trim + '"></use></svg>' %}- 更改footer中的用户图标使用iconfont
themes/uestc-msc/layout/_partials/footer.swig line13 (改好后放到 source/_data/footer.swig ):
<!-- <i class="fa fa-{{ theme.footer.icon.name }}"></i> -->
<svg class="icon" aria-hidden="true"><use xlink:href="#{{ theme.footer.icon.name }}"></use></svg>- 将彩色字体图标的样式添加到
source/_data/styles.styl:
//------------------------------------------------------------------------------
//colorful icons
//------------------------------------------------------------------------------
svg.icon {
width: 1.5em !important;
height: 1.5em !important;
vertical-align: -0.4em;
fill: currentColor;
overflow: hidden
}🔗 参考操作
🔗 参考操作
❗️因为实现得比较简陋, 作者链接处是直接到作者名tag的链接, 如果有两个作者会出现链 接错误问题, 因此目前每篇文章只能有一个作者. 当然这很好改.
目前直接将themes/uestc-msc/languages/zh-CN.yml中tag页面的翻译全部替换为作者页
面的翻译来将tag页面伪装为作者页面.
修改 themes/uestc-msc/layout/_macro/post.swig line271为:
{%- set tag_indicate = '<i class="fa fa-tag"></i>' %}虽然实际指定的是width但因为长宽比是固定的所以可以实现指定图片大小的功能
在themes/uestc-msc/layout/_layout.swig的body结束tag前加了一句加载设定图片宽度
脚本的语句.
<script src="/js/hexo_resize_image.js"></script>将指定图片大小的脚本放到了themes/uestc-msc/source/js/hexo_resize_image.js, 这
个文件夹的会被放到站点资源.
💡 使用很简单, 只是拓展了一下Markdown的语法. 👇例子:
在图片链接后加问号, 问号后是图片宽度和屏幕宽度的比例.