biyuqi/fe-navigation

前端导航网站，优秀的前端资讯网站

前端导航网

前端导航云集高质量前端网站的内容，云集大量前端网站。优秀的前端资讯网站

贡献

• fork当前库
• clone到本地
• 创建分支
• 新增数据或功能

重点:

• 添加数据（required） /jsondata/data 该目录是数据存放地,最后会生成basedata.json. 每个名字都是对应一个路由分类, eg: 最外层javascript 即是约定的路由名称，代码里会读取改名字进行渲染, 内部是数组，每个数组都有name, 作为分类依据分为javascrip和jquery两大类，字需要配置好该处，组件会自动渲染该数据

  {
    "javascript": {
      "javascript": [
        { name: "", link: ""}
      ],
      "jquery": []
    }
  }

• 添加名称映射(/config/keywordMapping.js) /config/keywordMapping.js,此处存放所有子目录的名称映射，需要添加

  eg:

  'wechat-doc': '小程序文档'

• 路由(/config/routesNameMapping.js) 如果只是更新原有内容, 那就不必在乎路由这一环节，如果是想新增一级路由(新建了json文件)，则需要添加对应路由名称到/config/routesNameMapping.js 添加对应路由，以及侧边栏显示名字,此处用二维数组 ['javascript', 'Javascript']

• 本地测试

// start vue project
npm run serve

// watch the JSON file change then automatically create jsondata
npm run watch

本地使用

# download
git clone https://github.com/BiYuqi/fe-navigation.git
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

fe-navigation's Issues

Prerender config 备份

const path = require('path')
const PrerenderSpaPlugin = require('prerender-spa-plugin')
const prerenderRoutes = require('./prerender-routes')

const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  publicPath: IS_PROD ? 'vuenotes' : '/',
  productionSourceMap: false,
  lintOnSave: true,
  devServer: {
    open: true
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@json', resolve('jsondata'))
      .set('@', resolve('src'))
    config.plugins.delete('pwa')
    config.plugins.delete('workbox')
  },
  configureWebpack: config => {
    const plugins = []
    if (IS_PROD) {
      plugins.push(
        new PrerenderSpaPlugin({
          staticDir: resolve('dist'),
          routes: prerenderRoutes,
          postProcess (renderedRoute) {
            renderedRoute.route = renderedRoute.originalRoute
            if (renderedRoute.route.endsWith('.html')) {
              renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route)
            }
            return renderedRoute
          },
          renderer: new PrerenderSpaPlugin.PuppeteerRenderer({
            inject: {
              prerender: true
            },
            headless: false
          })
        })
      )
    }
    config.plugins = [...config.plugins, ...plugins]
  }
}

数据收集列表

Overview:

• 代表还未合并到JSON Data文件
• 代表已经并到JSON Data文件

Start

博客

• 小小鲁班的技术口袋 技术博客 [vue, blog]
• 梁少峰的个人博客
• https://xiaoiver.github.io/tags.html
• 张伯伯要当红军

在线H5方案：

• 基于vue的高扩展在线网页制作平台，可自定义组件，可添加脚本，可数据统计
• 类似易企秀的H5制作、建站工具

部署相关:

• The easiest way to deploy websites

虚拟DOM:

• Cybernetically enhanced web apps

markdown:

• Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending

Vim:

• Learn Vimscript the Hard Way
• Game
• Vim tutorial

a11y:

• a11y

几十分钟入门文档：

• 各种几十分钟入门的文档

shell

• 开始你的shell脚本编程
• the-art-of-command-line

Article

• First Meaningful Paint 首次有效绘制时间
• GitHub Pages 项目主页绑定二级域名

面试 算法

• https://leetcode-cn.com

图形可视化
https://www.zcfy.cc/article/the-best-javascript-data-visualization-charting-libraries-2018

📱自动化脚本

• Auto.js-安卓平台上的JavaScript自动化工具
• Auto.js-不需要Root权限的JavaScript自动化软件

NPM

• prettyjsont Package for formatting JSON data in a coloured YAML-style, perfect for CLI outpu [tag npm cli json yml]

Canvas

• MDN Canvas
• Canvas API中文文档首页地图

在线工具

• 加密信息写入图片

第三方API

• 网易云音乐 Node.js API service
• 网易云音乐 API DOC

方便提供源码吗

现在是打包后的内容，方便提供源码吗？想快速构建一个简单的导航栏，放一些内部的链接