VuePress

给博客添加评论功能

こ雲淡風輕ζ 提交于 2020-11-23 06:37:58
给博客添加评论功能 没有评论功能的博客总是不完整的。 于是动手给博客添加上了,基于以下: LeanCloud 提供云存储服务 Valine 一款基于LeanCloud的快速、简洁且高效的无后端评论系统 0.云服务注册 网址 > https://leancloud.cn/ 0.1 创建应用: 创建应用需要实名认证,通过支付宝扫码。 0.2 找到应用Keys 1.安装以上两个工具 npm install --save leancloud-storage valine 2.创建评论组件 创建文件 /docs/.vuepress/components/Valine.vue 编辑为以下内容,并填入自己的 AppId 和 AppKey <template> <div> <hr> <div id="vcomments"></div> </div> </template> <script> export default { name: 'Valine', mounted: function(){ // require window const Valine = require('valine'); if (typeof window !== 'undefined') { this.window = window window.AV = require('leancloud-storage') }

vuepress 插件 markdown 拓展

前提是你 提交于 2020-08-20 06:06:29
https://github.com/markdown-it/markdown-it-container 插件开发时需要更新md文件, 否则可能因为缓存问题导致看不到新的效果 在md文件中通过使用标记在此处添加其他站点的博客链接, 如果没有显示no link或者空 官方的例子 var md = require('markdown-it')(); md.use(require('markdown-it-container'), 'spoiler', { validate: function(params) { return params.trim().match(/^spoiler\s+(.*)$/); }, render: function (tokens, idx) { var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/); if (tokens[idx].nesting === 1) { // opening tag return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n'; } else { // closing tag return '</details>\n'; } } }); console.log(md.render('

eleBlog:一款简洁明快的博客园主题

眉间皱痕 提交于 2020-08-18 11:39:09
ele-cnblog 一款使用了ElementUI的博客园主题 专注 eleBlog的宗旨是让阅读更加专注。提供三种代码高亮方案,提供大纲用于阅读导航,提供黑夜模式。 易用 基于模块化开发,颜色全局定义,对页面加载速度进行了优化,提供源码和注释,方便管理和修改。 平台 对比自己搭建博客,博客园的百度SEO效果做的更好。对比Segmentfault等平台,博客园的自由度更高。 如何使用 你仅需要三步就可以使用本主题 申请 JS 权限(申请理由填“美化博客园主题”) 在 设置界面 中选择博客皮肤为 Custom 在 页脚 HTML 代码 处复制如下代码 <!--********************************************* 要最先运行的JS ***********************************************--> <script> // 我们要让其最先加载,所以不要使用 $(document).ready() // -- 图标 $('#favicon').replaceWith('<link rel="shortcut icon" href="https://blog-static.cnblogs.com/files/oceans/favicon.ico">') // -- ajax监听 window.ajaxStorage =

基于VuePress搭建自己的个人技术网站 ECS训练营进阶

旧时模样 提交于 2020-08-15 06:31:57
基于VuePress搭建自己的个人技术网站 VuePress 文章目录 基于VuePress搭建自己的个人技术网站 VuePress 为什么要使用 开通ECS服务器 云服务器参数 设置安全组 安装Node.js 安装Vuepress 目录结构 配置VuePress 尝试案例内容 [VuePress]: https://www.vuepress.cn/ 轻量级静态网站生成器 可以用做博客或技术文档 可以快速的部署到github上 为什么要使用 界面简洁优雅 好上手 更好兼容markdown语法 性能高 开通ECS服务器 云服务器参数 计费方式 包年包月 网站 按量付费 测试,临时跑数据 抢占式实例 价格波动,高于价运行,低于释放,不适合放长期的数据 地域 选择访客多的地域 实例系列 (cpu,内存) 镜像 (实例模板 操作系统,环境) 公共镜像 阿里提供的基础操作系统 自定义镜像 根据用户快照生成的镜像 共享镜像 别的阿里云账号做的镜像 镜像市场 经过审核的镜像 存储 (类型和大小) 高效云盘 便宜 SSD云盘 贵 性能更好 网络 (经典或vpc专有网络类型) vpc专有网络 安全性更好 公网带宽 按照固定带宽计费 对网络要求稳定 按照使用流量计费 安全设置 安全组 虚拟防火墙 时长及数量 登录凭证 设置密码 密钥对 通过秘钥文件登录到系统 自定义密码 linux默认登录名root

GET 新技能!自己的网站突然就不香了

眉间皱痕 提交于 2020-08-14 11:08:45
松哥自己的网站有两大类: 一个就是大家看到的 www.javaboy.org,这个网站是基于 GitHub Pages 做的,使用的技术栈是 hexo+icarus,公众号上的所有文章我都会同步到这个网站上去。 还有一类就是电子书网站,这个就比较多了: http://maven.javaboy.org http://spring.javaboy.org http://springmvc.javaboy.org http://mybatis.javaboy.org http://springboot.javaboy.org http://vhr.javaboy.org 这一类电子书网站技术栈是 Jekyll + jekyll-TeXt-theme ,这个松哥在之前的文章中已经介绍过了,具体小伙伴们可以参考: 不花一分钱,把自己零散的知识整理成体系,制作成在线电子书 。 最近看别人用 vuepress 搭建博客网站,突然感觉自己的网站就不香了。。。 那就再撸一个吧! 1.vuepress 介绍 类似于大家所熟知的 hexo,vuepress 也可以用来生成静态网页。如果大家做过 vue 开发,或者了解过松哥的微人事( https://github.com/lenve/vhr ),你会发现 vuepress 非常亲切,想要做定制也非常容易,不像 hexo 定制那样陌生。 根据

如何重构一个过万Star开源项目—BetterScroll

拈花ヽ惹草 提交于 2020-08-09 01:49:06
过去的 v1 时代 距离 BetterScroll v1 版本发布,至今已经 3 年多,由于它在移动端良好的滚动体验与性能以及多种滚动场景的支持,深受社区的青睐。用户也可以基于 BetterScroll 抽象出各种复杂的业务滚动组件,期间依托于 BetterScroll,我们还开源了基于 Vue2.0 的移动端组件库 cube-ui 。 目前 BetterScroll 的 star 数已经超过 1.1 万,GitHub 有大约 3.2 万仓库使用了它。 滴滴 内部的业务,比如 国内司乘两端 、 国外司乘两端 等核心业务都大量使用 BetterScroll,它经受住了各种业务场景的考验。 随着大量的业务场景使用以及社区的反馈与建议,v1 版本也暴露了一些问题,主要分为如下四个方面: 包体积大,无法按需引用 扩展困难,增强功能易侵入核心逻辑 测试匮乏,稳定性保证差 文档不够友好,社区答疑成本高 v2 将至 先来看下最终的整体 BetterScroll v2 版本的架构图: 从整体架构图可以看出,目前整体 BetterScroll v2 版本除了实现核心滚动外,还额外提供很多插件: picker 高仿 iOS 原生 Picker 组件 mouse-wheel 兼容 PC 鼠标滚轮场景 observe-dom 自动探测 scroll 区域 DOM 改变,并且调用 refresh 方法

使用vuepress 搭建静态个人技术博客

喜欢而已 提交于 2020-08-04 14:44:20
官网 https://v1.vuepress.vuejs.org/ 案例 https://github.com/vuepressjs/awesome-vuepress#gallery 创建项目 yarn create vuepress blog cd blog yarn yarn dev yarn build 输入配置信息 _posts中为博客的md文件, .vuepress为项目的配置文件和公用组件以及静态资源 默认的风格有点简洁, 文件结构有点冗余 支持搜索和tag 插件 大纲视图和回到顶部 https://github.com/xuekai-china/vuepress-plugin-right-anchor yarn add -D vuepress-plugin-right-anchor yarn add -D @vuepress/plugin-back-to-top 来源: oschina 链接: https://my.oschina.net/ahaoboy/blog/4326713

How can I use Custom Layout for Specific Pages of the Vuepress?

邮差的信 提交于 2020-05-15 11:05:28
问题 I'm trying to use my own Custome Layout of the vuepress as following steps: Start from Homepage style in the VuePress Document, this is working well. Make the T4V4Home.vue for special layout as coping from Home.vue on the theme/components folder which is ejected, and add a <h1> This is T4V4Home !</h1> in these <template> for an indication as follows. <template> <main class="home" aria-labelledby="main-title" > <h1> This is T4V4Home !</h1> <header class="hero"> Add layout: T4V4Home as follow

Change 404 page in vuepress

心不动则不痛 提交于 2020-05-15 02:03:17
问题 Is it possible to change / customize the 404 page of Vuepress without ejecting and having to change the whole theme? I am currently using the enhanceApp.js , but I'm unsure how I can change the router options (the catchall route) as the Router is already created. The way I got it working right now is this: router.beforeEach((to, from, next) => { if (to.matched.length > 0 && to.matched[0].path === "*") { next("/404.html"); } else { next(); } }); However, this feels like a hack as I always

Wiki系列(一):Wiki系统选择

南笙酒味 提交于 2020-05-08 18:54:00
> 随着工作和项目经验的积累,有很多知识点需要整理,其中有关开发或者技术方面的,我想搭建一个 Wiki 系统,既可以方便自己查询,也给有需要的人参考,工欲善其事必先利其器,所以这篇就来写下 Wiki 系统的选择。 待选 首先,我结合已知的第三方 Wiki 系统,以及网上搜索的比较火的开源项目,整理出以下的待选列表。 语雀 看云 Notion GitBook VuePress docsify 筛选 接下来从不同方面对上面的待选列表进行逐一筛选。 自定义程度 第三方 Wiki 系统,如「 语雀 」和「 看云 」,我在使用过程中发现以下几点不足: 数据存于第三方服务器,文件归属上感觉不是自己的。 自定义域名等功能是有限制或者收费。 页面自定义程度不高。 基于以上问题,我选择放弃第三方的 Wiki 系统,转而使用开源项目搭建自己的 Wiki。 产品定位 「 Notion 」从去年开始在国内逐渐变得很火,虽然可以用来做 Wiki,但是比 Wiki 更全,更强大,但仅仅作为 Wiki 又显得不够简洁,不太像一个 Wiki,这是我放弃 Notion 的一个原因。 可以看下少数派的这篇文章「 想要玩转 Notion?你需要这份快速上手指南 」,就能理解我说的不简洁的意思了,当然并不是说 Notion 不好,只是在我看来做 Wiki 可能过于「重」了。 访问速度 「 Notion