├── public ├── CNAME ├── favicon-16x16.png ├── favicon-32x32.png ├── live2d │ ├── moc │ │ ├── pio.moc │ │ └── tia.moc │ └── mtn │ │ ├── Breath1.mtn │ │ ├── Breath2.mtn │ │ ├── Breath7.mtn │ │ └── Breath4.mtn └── apple-icon-180x180.png ├── .eslintignore ├── src ├── pages │ ├── 404.js │ ├── inspiration │ │ ├── index.less │ │ └── index.js │ ├── archive │ │ ├── index.less │ │ └── index.js │ ├── post │ │ ├── index.less │ │ └── $number.js │ ├── document.ejs │ ├── index.less │ ├── tag │ │ ├── index.less │ │ └── index.js │ ├── about │ │ ├── index.less │ │ └── index.js │ ├── friend │ │ ├── index.less │ │ └── index.js │ ├── book │ │ ├── index.less │ │ └── index.js │ ├── category │ │ ├── index.less │ │ └── index.js │ └── index.js ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── pattern.png │ └── ImagesByMarkSebastian.txt ├── components │ ├── Loading │ │ ├── index.less │ │ └── index.js │ ├── Quote │ │ ├── index.js │ │ └── index.less │ ├── Pagination │ │ ├── index.js │ │ └── index.less │ ├── Reward │ │ ├── index.js │ │ └── index.less │ ├── index.js │ ├── Segment │ │ ├── index.js │ │ └── index.less │ ├── Archive │ │ ├── index.less │ │ └── index.js │ ├── PostCard │ │ ├── index.js │ │ └── index.less │ ├── PostPV │ │ ├── index.js │ │ └── index.less │ ├── MarkDown │ │ └── index.js │ ├── PostBody │ │ ├── index.js │ │ └── index.less │ ├── LazyImage │ │ ├── index.js │ │ └── index.less │ ├── Header │ │ ├── index.less │ │ └── index.js │ ├── Transition │ │ └── index.js │ └── SKPlayer │ │ └── index.less ├── assets │ ├── cursor │ │ ├── cursor.png │ │ └── cursor_link.png │ ├── fonts │ │ ├── Fontello.woff2 │ │ ├── GuDianMingChaoTi.ttf │ │ └── FiraCode-Medium.woff2 │ ├── live2d │ │ ├── waifu.json │ │ └── tips.json │ ├── prism │ │ ├── prism.js │ │ └── prism.less │ └── lib │ │ └── fireworks.js ├── layouts │ ├── index.less │ └── index.js ├── dva.js ├── utils.js ├── services.js ├── global.less ├── config.js └── models │ └── global.js ├── .webpackrc.js ├── .prettierrc ├── .eslintrc ├── .gitignore ├── .umirc.js ├── package.json └── README.md /public/CNAME: -------------------------------------------------------------------------------- 1 | chanshiyu.com -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | src/assets 4 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | export default () =>
404 Page
2 | -------------------------------------------------------------------------------- /src/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/images/1.jpg -------------------------------------------------------------------------------- /src/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/images/2.jpg -------------------------------------------------------------------------------- /src/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/images/3.jpg -------------------------------------------------------------------------------- /src/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/images/4.jpg -------------------------------------------------------------------------------- /src/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/images/5.jpg -------------------------------------------------------------------------------- /src/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/images/6.jpg -------------------------------------------------------------------------------- /src/components/Loading/index.less: -------------------------------------------------------------------------------- 1 | .loading { 2 | margin: 0 auto; 3 | width: 1rem; 4 | } 5 | -------------------------------------------------------------------------------- /src/images/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/images/pattern.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/live2d/moc/pio.moc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/public/live2d/moc/pio.moc -------------------------------------------------------------------------------- /public/live2d/moc/tia.moc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/public/live2d/moc/tia.moc -------------------------------------------------------------------------------- /public/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/public/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/assets/cursor/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/assets/cursor/cursor.png -------------------------------------------------------------------------------- /src/assets/fonts/Fontello.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/assets/fonts/Fontello.woff2 -------------------------------------------------------------------------------- /src/assets/cursor/cursor_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/assets/cursor/cursor_link.png -------------------------------------------------------------------------------- /src/assets/fonts/GuDianMingChaoTi.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/assets/fonts/GuDianMingChaoTi.ttf -------------------------------------------------------------------------------- /.webpackrc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | publicPath: '/static/', 3 | extraBabelPlugins: ['lodash', 'transform-remove-console'] 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/fonts/FiraCode-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chanshiyucx/heart-beat/HEAD/src/assets/fonts/FiraCode-Medium.woff2 -------------------------------------------------------------------------------- /src/layouts/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | position: relative; 3 | margin: 0 auto; 4 | min-height: 100%; 5 | max-width: 9rem; 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "useTabs": false, 4 | "printWidth": 100, 5 | "tabWidth": 2, 6 | "semi": false, 7 | "bracketSpacing": true 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-umi", 3 | "rules": { 4 | "jsx-a11y/href-no-hash": 0, 5 | "linebreak-style": 0, 6 | "react/no-deprecated": 0, 7 | "no-unused-expressions": 0 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/images/ImagesByMarkSebastian.txt: -------------------------------------------------------------------------------- 1 | Images by Mark Sebastian: http://www.flickr.com/photos/markjsebastian/ 2 | http://www.markjsebastian.com/ 3 | 4 | License: 5 | http://creativecommons.org/licenses/by-sa/2.0/deed.en 6 | Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | 4 | # production 5 | /dist 6 | 7 | # misc 8 | .DS_Store 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | 17 | # umi 18 | .umi 19 | .umi-production -------------------------------------------------------------------------------- /src/components/Loading/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames/bind' 2 | 3 | import config from '../../config' 4 | import styles from './index.less' 5 | 6 | const { loadingImg } = config 7 | const cx = classNames.bind(styles) 8 | 9 | const Loading = ({ className }) => { 10 | return 11 | } 12 | 13 | export default Loading 14 | -------------------------------------------------------------------------------- /src/components/Quote/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames/bind' 2 | import styles from './index.less' 3 | 4 | const cx = classNames.bind(styles) 5 | 6 | const Quote = ({ text }) => { 7 | return ( 8 |
9 | 10 | {text} 11 | 12 |
13 | ) 14 | } 15 | 16 | export default Quote 17 | -------------------------------------------------------------------------------- /src/pages/inspiration/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | padding-bottom: 1rem; 4 | @media (max-width: 900px) { 5 | width: 96%; 6 | } 7 | .body { 8 | padding: 0.16rem; 9 | border-radius: 0.03rem; 10 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 11 | background-color: rgba(255, 255, 255, 0.6); 12 | } 13 | .loading { 14 | margin-top: 1rem; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/dva.js: -------------------------------------------------------------------------------- 1 | import AV from 'leancloud-storage' 2 | 3 | import globalConfig from './config' 4 | 5 | // Init Leancloud 6 | AV.init(globalConfig.leancloud) 7 | 8 | export function config() { 9 | return { 10 | onError(err) { 11 | err.preventDefault() 12 | } 13 | } 14 | } 15 | 16 | window.publicPath = '/' 17 | if (process.env.NODE_ENV !== 'development') { 18 | console.log = function() {} 19 | console.warn = function() {} 20 | console.error = function() {} 21 | } 22 | -------------------------------------------------------------------------------- /.umirc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | hash: true, 3 | history: 'hash', 4 | publicPath: process.env.NODE_ENV === 'production' ? '/treasure/heartbeat/' : '/', 5 | plugins: [ 6 | [ 7 | 'umi-plugin-react', 8 | { 9 | dva: true, 10 | routes: { 11 | exclude: [/models\//] 12 | }, 13 | library: 'preact', 14 | dynamicImport: { 15 | webpackChunkName: true 16 | }, 17 | fastClick: true, 18 | title: '蝉時雨' 19 | } 20 | ] 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Quote/index.less: -------------------------------------------------------------------------------- 1 | .quote { 2 | position: relative; 3 | margin-bottom: 0.26rem; 4 | padding: 0.32rem 0; 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: center; 8 | align-items: center; 9 | font-size: 0.16rem; 10 | span { 11 | letter-spacing: 1px; 12 | } 13 | i { 14 | position: absolute; 15 | font-size: 0.24rem; 16 | color: #888; 17 | } 18 | i:first-child { 19 | top: 0.16rem; 20 | left: 0.16rem; 21 | } 22 | i:last-child { 23 | bottom: 0; 24 | right: 0.16rem; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/Pagination/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames/bind' 2 | import styles from './index.less' 3 | 4 | const cx = classNames.bind(styles) 5 | 6 | const Pagination = ({ page, maxPage, prev, next }) => { 7 | return ( 8 |
9 | 12 | {page} 13 | 16 |
17 | ) 18 | } 19 | 20 | export default Pagination 21 | -------------------------------------------------------------------------------- /src/assets/live2d/waifu.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "layout": { 4 | "center_x": 0.0, 5 | "center_y": -0.05, 6 | "width": 1.9 7 | }, 8 | "hit_areas_custom": { 9 | "head_x": [-0.35, 0.6], 10 | "head_y": [0.19, -0.2], 11 | "body_x": [-0.3, -0.25], 12 | "body_y": [0.3, -0.9] 13 | }, 14 | "motions": { 15 | "idle": [ 16 | { "file": "mtn/WakeUp.mtn" }, 17 | { "file": "mtn/Breath1.mtn" }, 18 | { "file": "mtn/Breath2.mtn" }, 19 | { "file": "mtn/Breath4.mtn" }, 20 | { "file": "mtn/Breath7.mtn" }, 21 | { "file": "mtn/Breath8.mtn" } 22 | ] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/archive/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | padding-bottom: 1rem; 4 | @media (max-width: 900px) { 5 | width: 96%; 6 | } 7 | .body { 8 | padding: 0.16rem; 9 | border-radius: 0.03rem; 10 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 11 | background-color: rgba(255, 255, 255, 0.6); 12 | .content { 13 | display: flex; 14 | flex-wrap: wrap; 15 | justify-content: space-between; 16 | align-items: center; 17 | @media (max-width: 900px) { 18 | justify-content: space-around; 19 | } 20 | } 21 | } 22 | .loading { 23 | margin-top: 1rem; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/prism/prism.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 代码高亮 3 | * @author: 蝉時雨 4 | * @date: 2018-07-10 5 | */ 6 | 7 | import Prism from 'prismjs/components/prism-core' 8 | 9 | import 'prismjs/plugins/line-numbers/prism-line-numbers.js' 10 | 11 | import 'prismjs/components/prism-clike' 12 | import 'prismjs/components/prism-c' 13 | import 'prismjs/components/prism-objectivec' 14 | import 'prismjs/components/prism-markup' 15 | import 'prismjs/components/prism-markdown' 16 | import 'prismjs/components/prism-bash' 17 | import 'prismjs/components/prism-javascript' 18 | import 'prismjs/components/prism-css' 19 | import 'prismjs/components/prism-json' 20 | import 'prismjs/components/prism-java' 21 | import 'prismjs/components/prism-python' 22 | 23 | export default Prism 24 | -------------------------------------------------------------------------------- /src/components/Reward/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames/bind' 2 | import config from '../../config' 3 | import styles from './index.less' 4 | 5 | const { reward } = config 6 | const cx = classNames.bind(styles) 7 | 8 | const Reward = () => { 9 | return ( 10 |
11 | 赏 12 |
13 | 23 |
24 |
25 | ) 26 | } 27 | 28 | export default Reward 29 | 30 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Archive } from './Archive' 2 | export { default as Footer } from './Footer' 3 | export { default as Header } from './Header' 4 | export { default as LazyImage } from './LazyImage' 5 | export { default as Loading } from './Loading' 6 | export { default as MarkDown } from './MarkDown' 7 | export { default as Pagination } from './Pagination' 8 | export { default as PostBody } from './PostBody' 9 | export { default as PostCard } from './PostCard' 10 | export { default as PostPV } from './PostPV' 11 | export { default as Quote } from './Quote' 12 | export { default as Reward } from './Reward' 13 | export { default as Segment } from './Segment' 14 | export { default as SKPlayer } from './SKPlayer' 15 | export { default as Transition } from './Transition' 16 | -------------------------------------------------------------------------------- /src/pages/post/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | margin: 0 auto; 6 | padding-bottom: 1rem; 7 | width: 100%; 8 | .wapper { 9 | width: 100%; 10 | text-align: center; 11 | .post { 12 | width: 100%; 13 | border-radius: 0.03rem; 14 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 15 | background-color: rgba(255, 255, 255, 0.6); 16 | } 17 | .loading { 18 | margin-top: 1rem; 19 | } 20 | .lincenses { 21 | margin: 0.16rem auto; 22 | } 23 | .post-squares { 24 | display: flex; 25 | overflow: hidden; 26 | border-radius: 0 0 0.03rem 0.03rem; 27 | @media (max-width: 900px) { 28 | display: block; 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/Segment/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames/bind' 2 | 3 | import MarkeDown from '../MarkDown' 4 | import styles from './index.less' 5 | 6 | const cx = classNames.bind(styles) 7 | 8 | const Segment = ({ color, title, content }) => { 9 | return ( 10 |
16 | 22 | 27 | {title} 28 | 29 | {!!content && } 30 |
31 | ) 32 | } 33 | 34 | export default Segment 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HeartBeat", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "description": "An awesome blog generator", 6 | "author": "蝉時雨 ", 7 | "license": "MIT", 8 | "scripts": { 9 | "start": "umi dev", 10 | "build": "umi build", 11 | "lint": "eslint --ext .js src test", 12 | "precommit": "yarn lint -- --fix" 13 | }, 14 | "dependencies": { 15 | "baguettebox.js": "^1.11.0", 16 | "classnames": "^2.2.6", 17 | "fontfaceobserver": "^2.1.0", 18 | "gitalk": "^1.4.1", 19 | "leancloud-storage": "^3.11.1", 20 | "lodash": "^4.17.11", 21 | "marked": "^0.6.0", 22 | "prismjs": "^1.15.0", 23 | "smooth-scroll": "^15.0.0", 24 | "timeago.js": "^3.0.2", 25 | "umi": "^2.3.2" 26 | }, 27 | "devDependencies": { 28 | "babel-plugin-lodash": "^3.3.4", 29 | "babel-plugin-transform-remove-console": "^6.9.4", 30 | "eslint": "^5.12.0", 31 | "eslint-config-umi": "^1.3.0", 32 | "eslint-plugin-flowtype": "^3.2.1", 33 | "eslint-plugin-import": "^2.14.0", 34 | "eslint-plugin-jsx-a11y": "^6.1.2", 35 | "eslint-plugin-react": "^7.12.3", 36 | "umi-plugin-react": "^1.3.3" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/Archive/index.less: -------------------------------------------------------------------------------- 1 | .archive { 2 | display: inline-block; 3 | margin: 0.06rem 0; 4 | width: 49.2%; 5 | @media (max-width: 900px) { 6 | width: 96%; 7 | } 8 | .segment { 9 | border-top-width: 0.02rem; 10 | border-top-style: solid; 11 | border-radius: 0.03rem; 12 | background: rgba(255, 255, 255, 0.4); 13 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 14 | transition: all 0.25s ease 0s, transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; 15 | &:hover { 16 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24); 17 | transform: translateY(-0.04rem); 18 | } 19 | .title { 20 | padding: 0.12rem 0.16rem; 21 | overflow: hidden; 22 | } 23 | .meta { 24 | padding: 0.12rem 0.16rem; 25 | border-top: 1px solid rgba(0, 0, 0, 0.06); 26 | & > span { 27 | margin-right: 0.06rem; 28 | color: #888; 29 | i { 30 | margin-right: 0.04rem; 31 | } 32 | span { 33 | padding-right: 0.04rem; 34 | } 35 | } 36 | .tag { 37 | margin-right: 0.08rem; 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/Pagination/index.less: -------------------------------------------------------------------------------- 1 | .pagination { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | margin-top: 0.12rem; 6 | button { 7 | padding: 0.12rem 0.2rem; 8 | font-size: 0.14rem; 9 | font-weight: 700; 10 | text-align: center; 11 | text-decoration: none; 12 | outline: 0; 13 | border: none; 14 | box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2); 15 | border-radius: 0.03rem; 16 | background: rgba(255, 255, 255, 0.6); 17 | transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; 18 | &:hover { 19 | box-shadow: 0 0 0.4rem #888 inset; 20 | } 21 | &:disabled { 22 | color: #888; 23 | } 24 | &:disabled:hover { 25 | box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2); 26 | } 27 | &.prevBtn { 28 | margin-right: -0.1rem; 29 | } 30 | &.nextBtn { 31 | margin-left: -0.1rem; 32 | } 33 | } 34 | span { 35 | display: inline-block; 36 | width: 0.26rem; 37 | height: 0.26rem; 38 | line-height: 0.26rem; 39 | text-align: center; 40 | border-radius: 50%; 41 | background: #fff; 42 | z-index: 10; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/layouts/index.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react' 2 | import router from 'umi/router' 3 | import FontFaceObserver from 'fontfaceobserver' 4 | 5 | import Header from '../components/Header' 6 | import Footer from '../components/Footer' 7 | import Home from '../pages' 8 | import fireworks from '../assets/lib/fireworks' 9 | import { isMobile } from '../utils' 10 | import styles from './index.less' 11 | ;(function() { 12 | const font = new FontFaceObserver('Noto Serif SC', { 13 | weight: '400' 14 | }) 15 | 16 | font.load().then(() => { 17 | document.body.style.fontFamily = 'Noto Serif SC, Helvetica, PingFang SC, sans-serif' 18 | }) 19 | })() 20 | 21 | class App extends PureComponent { 22 | constructor(props) { 23 | super(props) 24 | this.state = { 25 | renderBg: false 26 | } 27 | } 28 | 29 | componentDidMount() { 30 | if (!isMobile) { 31 | fireworks() 32 | } 33 | const { pathname } = this.props.location 34 | if (pathname !== '/') { 35 | router.push(pathname) 36 | } 37 | } 38 | 39 | render({ children }) { 40 | return ( 41 |
42 |
43 | {children || } 44 |
(this.footer = c)} /> 45 |
46 | ) 47 | } 48 | } 49 | 50 | export default App 51 | -------------------------------------------------------------------------------- /src/components/Archive/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'umi/link' 3 | import classNames from 'classnames/bind' 4 | 5 | import styles from './index.less' 6 | 7 | const cx = classNames.bind(styles) 8 | 9 | const Archive = ({ number, created_at, milestone, labels, title, color }) => { 10 | const date = created_at.slice(0, 10) 11 | 12 | return ( 13 |
14 | 15 |
16 |
{title}
17 |
18 | 19 | 20 | {date} 21 | 22 | 23 | 24 | {milestone && milestone.title ? milestone.title : '未分类'} 25 | 26 | 27 | 28 | {labels.slice(0, 2).map(o => { 29 | return ( 30 | 31 | {o.name} 32 | 33 | ) 34 | })} 35 | 36 |
37 |
38 | 39 |
40 | ) 41 | } 42 | 43 | export default Archive 44 | -------------------------------------------------------------------------------- /src/pages/document.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= context.title %> 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/components/PostCard/index.js: -------------------------------------------------------------------------------- 1 | import Link from 'umi/link' 2 | import classNames from 'classnames/bind' 3 | 4 | import MarkeDown from '../MarkDown' 5 | import styles from './index.less' 6 | 7 | const cx = classNames.bind(styles) 8 | 9 | const PostCard = ({ number, title, date, cover, desc, filterLabels, milestone, times }) => { 10 | return ( 11 |
12 | 13 |
14 | 15 |

{title}

16 |
17 | 18 |
19 | 20 | 21 | {date} 22 | 23 | 24 | 25 | 热度{times}℃ 26 | 27 | 28 | 29 | {milestone && milestone.title ? milestone.title : '未分类'} 30 | 31 | 32 | 33 | 34 | {filterLabels.slice(0, 2).map(o => ( 35 | 36 | {o.name} 37 | 38 | ))} 39 | 40 | 41 |
42 | 43 |
44 | ) 45 | } 46 | 47 | export default PostCard 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HeartBeat - A SPA Blog Theme 2 | 3 | [![Author](https://img.shields.io/badge/author-chanshiyucx-blue.svg?style=flat-square)](https://chanshiyu.com) [![QQ](https://img.shields.io/badge/QQ-1124590931-blue.svg?style=flat-square)](http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes) [![Email](https://img.shields.io/badge/Emali%20me-me@chanshiyu.com-green.svg?style=flat-square)](me@chanshiyu.com) 4 | 5 | ![蝉时雨](https://i.loli.net/2018/12/15/5c15047d6d235.png) 6 | 7 | HeartBeat 是一个基于 [UmiJS](https://umijs.org/) 开发的 SPA 单页面博客应用程序，后台数据源依托于 [Github Issues](https://developer.github.com/v3/issues/) ，使用开源项目 [Gitalk](https://github.com/gitalk/gitalk) 作为博客评论系统。该主题基于 Github 全家桶，脱离服务器与数据库，关注内容本身，免费食用。 8 | 9 | 技术栈：UmiJS + Github Issues + Gitalk 10 | 11 | 在线演示：[蝉時雨](https://chanshiyu.com/treasure/heartbeat/) 12 | 13 | ## Getting Started 14 | 15 | ### Installing 16 | 17 | ```bash 18 | git@github.com:chanshiyucx/heart-beat.git 19 | cd heart-beat 20 | npm install # or yarn 21 | ``` 22 | 23 | ### Configuration 24 | 25 | 修改目录 `src/config.js` 的配置文件，每个配置项都有详细说明。 26 | 27 | 注意修改项目目录下 `.umirc.js` 的 `title` 为自己的站点标题！ 28 | 29 | 页面模板参考： [文章、关于、标签、分类、书单等模板](https://github.com/chanshiyucx/Blog/issues) 30 | 31 | ### Preview 32 | 33 | ```bash 34 | npm start 35 | ``` 36 | 37 | 浏览器打开 `http://localhost:8000` 便可访问新的博客！ 38 | 39 | ### Deployment 40 | 41 | ```bash 42 | umi build 43 | ``` 44 | 45 | 打包完毕，将 `dist` 目录下生成的静态文件发布 `Github Pages` 或 `Coding Pages` 即可。 46 | 47 | Just enjoy it ฅ●ω●ฅ 48 | 49 | ## License 50 | 51 | This project is licensed under the MIT License. 52 | -------------------------------------------------------------------------------- /src/components/PostPV/index.js: -------------------------------------------------------------------------------- 1 | import Link from 'umi/link' 2 | import classNames from 'classnames/bind' 3 | 4 | import MarkeDown from '../MarkDown' 5 | import styles from './index.less' 6 | 7 | const cx = classNames.bind(styles) 8 | 9 | const PostPV = ({ number, title, date, cover, desc, filterLabels, milestone, times }) => { 10 | return ( 11 |
12 | 13 | 14 |
15 |
16 |

{title}

17 |
18 | 19 | 20 | {date} 21 | 22 | 23 | 24 | 热度{times}℃ 25 | 26 | 27 | 28 | {milestone && milestone.title ? milestone.title : '未分类'} 29 | 30 | 31 | 32 | 33 | {filterLabels.slice(0, 2).map(o => ( 34 | {o.name} 35 | ))} 36 | 37 | 38 |
39 |
40 | 41 |
42 | 43 |
44 | ) 45 | } 46 | 47 | export default PostPV 48 | -------------------------------------------------------------------------------- /src/pages/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | padding-bottom: 1rem; 3 | @media (max-width: 1200px) { 4 | padding-bottom: 1.6rem; 5 | } 6 | .content { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | position: relative; 11 | min-height: 7.91rem; 12 | } 13 | .page-btn { 14 | display: flex; 15 | justify-content: center; 16 | position: absolute; 17 | top: 50%; 18 | margin: 0; 19 | width: 1.5rem; 20 | outline: 0; 21 | border: none; 22 | background: transparent; 23 | i { 24 | font-size: 1.2rem; 25 | color: rgba(255, 255, 255, 0.6); 26 | } 27 | &.prev { 28 | left: 0; 29 | transform: translate(-100%, -50%); 30 | } 31 | &.next { 32 | right: 0; 33 | transform: translate(100%, -50%); 34 | } 35 | @media (max-width: 1200px) { 36 | display: none; 37 | } 38 | } 39 | .mobile-btn { 40 | position: absolute; 41 | display: none; 42 | bottom: 0; 43 | width: 1.5rem; 44 | height: 0.8rem; 45 | outline: 0; 46 | border: none; 47 | background: transparent; 48 | transform: translate(0, 100%); 49 | i { 50 | font-size: 0.8rem; 51 | color: rgba(255, 255, 255, 0.6); 52 | } 53 | @media (max-width: 1200px) { 54 | display: inline-block; 55 | } 56 | } 57 | .post-list { 58 | display: flex; 59 | flex-wrap: wrap; 60 | justify-content: space-between; 61 | align-items: center; 62 | width: 100%; 63 | @media (max-width: 1200px) { 64 | justify-content: space-around; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/components/MarkDown/index.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react' 2 | import marked from 'marked' 3 | 4 | import Prism from '../../assets/prism/prism.js' 5 | 6 | const renderer = new marked.Renderer() 7 | renderer.heading = function(text, level) { 8 | const icon = ['e80e', 'f299', 'f292'][level - 2] 9 | return `&#x${icon};${text}` 10 | } 11 | 12 | renderer.link = function(href, title, text) { 13 | // 只显示一个图标 14 | if (text.includes('aria-hidden="true"')) { 15 | return `${text}` 16 | } 17 | return `${text}` 18 | } 19 | 20 | renderer.image = function(href, title, text) { 21 | let clazz = `img-box ${href.endsWith('#full') ? 'full-box' : ''}` 22 | //判断是否全宽渲染 23 | return ` 24 | ${text}${text ? `◭ ${text}` : ''}` 25 | } 26 | 27 | marked.setOptions({ 28 | renderer, 29 | highlight: (code, lang) => { 30 | return Prism.highlight(code, Prism.languages[lang || 'markup'], lang) 31 | } 32 | }) 33 | 34 | class MarkeDown extends PureComponent { 35 | componentDidMount() { 36 | Prism.highlightAll() 37 | } 38 | 39 | componentDidUpdate(prevProps) { 40 | if (prevProps.content !== this.props.content) { 41 | Prism.highlightAll() 42 | } 43 | } 44 | 45 | render({ className, content }) { 46 | return ( 47 |
48 | ) 49 | } 50 | } 51 | 52 | export default MarkeDown 53 | -------------------------------------------------------------------------------- /src/pages/tag/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | padding-bottom: 1rem; 4 | @media (max-width: 900px) { 5 | width: 96%; 6 | } 7 | .body { 8 | padding: 0.16rem; 9 | border-radius: 0.03rem; 10 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 11 | background-color: rgba(255, 255, 255, 0.6); 12 | .content { 13 | display: flex; 14 | flex-wrap: wrap; 15 | justify-content: space-between; 16 | align-items: center; 17 | button { 18 | margin: 0 0.04rem 0.1rem; 19 | padding: 0.08rem 0.12rem; 20 | font-size: 0.16rem; 21 | text-align: center; 22 | text-decoration: none; 23 | text-shadow: 0 0 1px currentColor; 24 | outline: 0; 25 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 26 | border: none; 27 | border-radius: 0.03rem; 28 | background: rgba(0, 0, 0, 0.16); 29 | &:hover { 30 | background: rgba(0, 0, 0, 0.2); 31 | } 32 | } 33 | } 34 | .filter-post { 35 | margin-top: 0.08rem; 36 | } 37 | .menu-btn { 38 | margin: 0 0.04rem 0.1rem 0.12rem; 39 | padding: 0.08rem 0.12rem; 40 | font-size: 0.16rem; 41 | text-align: center; 42 | text-decoration: none; 43 | outline: 0; 44 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 45 | border: none; 46 | border-radius: 0.03rem; 47 | background: rgba(0, 0, 0, 0.16); 48 | i { 49 | color: #f6f; 50 | margin-left: 0.06rem; 51 | } 52 | &:hover { 53 | background: rgba(0, 0, 0, 0.2); 54 | } 55 | } 56 | } 57 | .loading { 58 | margin-top: 1rem; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/components/PostBody/index.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react' 2 | import classNames from 'classnames/bind' 3 | import baguetteBox from 'baguettebox.js' 4 | 5 | import MarkeDown from '../MarkDown' 6 | import styles from './index.less' 7 | 8 | const cx = classNames.bind(styles) 9 | 10 | class PostBody extends PureComponent { 11 | componentDidMount() { 12 | this.initLightBox() 13 | } 14 | 15 | componentDidUpdate(prevProps) { 16 | if (prevProps.title !== this.props.title) { 17 | this.initLightBox() 18 | } 19 | } 20 | 21 | initLightBox = () => { 22 | baguetteBox.run('#post-body') 23 | } 24 | 25 | render({ title, date, cover, content, filterLabels, milestone, times }) { 26 | return ( 27 |
28 |
29 | 30 |
31 |

{title}

32 |
33 | 34 | 35 | {date} 36 | 37 | 38 | 39 | 热度{times}℃ 40 | 41 | 42 | 43 | {milestone && milestone.title ? milestone.title : '未分类'} 44 | 45 | 46 | 47 | 48 | {filterLabels && filterLabels.map(o => {o.name})} 49 | 50 | 51 |
52 |
53 |
54 | {!!content && } 55 |
56 | ) 57 | } 58 | } 59 | 60 | export default PostBody 61 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import timeago from 'timeago.js' 2 | 3 | const t = timeago() 4 | 5 | // 是否为移动端 6 | export const isMobile = 7 | /mobile/i.test(window.navigator.userAgent) || document.body.clientWidth < 1200 8 | 9 | // 延时 10 | export const delay = time => new Promise(resolve => setTimeout(resolve, time)) 11 | 12 | // 文章格式化 13 | export const formatPost = post => { 14 | const { created_at, body, labels } = post 15 | const temp = body.split('\r\n') 16 | const regex = /^\[(.+)\].*(http.*(?:jpg|jpeg|png|gif))/g 17 | const cover = regex.exec(temp[0]) 18 | post.cover = { 19 | title: cover[1], 20 | src: cover[2] 21 | } 22 | post.desc = temp[2] 23 | post.content = body 24 | post.date = t.format(created_at, 'zh_CN') 25 | post.filterLabels = labels.sort((a, b) => a.name.length >= b.name.length) 26 | return post 27 | } 28 | 29 | // 预加载图片 30 | export const loadImg = async ({ images }) => { 31 | return new Promise(resolve => { 32 | const seq = images.map(img => { 33 | return new Promise(resolve => { 34 | let imgObj = new Image() 35 | imgObj.onload = () => { 36 | resolve() 37 | } 38 | imgObj.onerror = () => { 39 | resolve() 40 | } 41 | imgObj.src = img 42 | }) 43 | }) 44 | Promise.all(seq) 45 | .then(() => { 46 | resolve() 47 | }) 48 | .catch(console.error) 49 | }).catch(console.error) 50 | } 51 | 52 | /** 53 | * @description 绑定事件 on(element, event, handler) 54 | */ 55 | export const on = (function() { 56 | if (document.addEventListener) { 57 | return function(element, event, handler) { 58 | if (element && event && handler) { 59 | element.addEventListener(event, handler, false) 60 | } 61 | } 62 | } else { 63 | return function(element, event, handler) { 64 | if (element && event && handler) { 65 | element.attachEvent('on' + event, handler) 66 | } 67 | } 68 | } 69 | })() 70 | -------------------------------------------------------------------------------- /src/components/PostPV/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 50%; 3 | position: relative; 4 | overflow: hidden; 5 | @media (max-width: 900px) { 6 | width: 100%; 7 | } 8 | &:hover { 9 | color: #666; 10 | img { 11 | transform: scale(1.06); 12 | } 13 | .content { 14 | transform: translateY(-1.6rem); 15 | } 16 | } 17 | img { 18 | display: block; 19 | width: 100%; 20 | height: 1.6rem; 21 | object-fit: cover; 22 | transition: transform 0.6s ease-out; 23 | } 24 | .content { 25 | position: absolute; 26 | top: 0; 27 | width: 100%; 28 | height: 100%; 29 | transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; 30 | } 31 | .info { 32 | display: flex; 33 | justify-content: center; 34 | align-items: flex-start; 35 | flex-direction: column; 36 | padding: 0.24rem; 37 | height: 100%; 38 | line-height: 1.7; 39 | color: #eee; 40 | box-sizing: border-box; 41 | background: rgba(0, 0, 0, 0.4); 42 | h3 { 43 | margin: 0.06rem 0; 44 | font-size: 0.2rem; 45 | font-weight: normal; 46 | color: #eee; 47 | } 48 | .meta { 49 | text-align: left; 50 | } 51 | .meta > span { 52 | display: inline-block; 53 | margin-right: 0.06rem; 54 | width: 46%; 55 | i { 56 | margin-right: 0.04rem; 57 | } 58 | span { 59 | padding-right: 0.06rem; 60 | } 61 | } 62 | } 63 | .desc { 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | padding: 0.24rem 0.36rem; 68 | height: 100%; 69 | box-sizing: border-box; 70 | background: rgba(255, 255, 255, 0.6); 71 | p { 72 | display: -webkit-box; 73 | -webkit-box-orient: vertical; 74 | -webkit-line-clamp: 4; 75 | line-height: 1.7; 76 | font-size: 0.16rem; 77 | text-align: justify; 78 | text-overflow: ellipsis; 79 | overflow: hidden; 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/components/Segment/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0.16rem 0; 3 | padding: 0.16rem 0; 4 | border-radius: 0.03rem; 5 | background: rgba(255, 255, 255, 0.4); 6 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 7 | transition: transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; 8 | &:hover { 9 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24); 10 | transform: translateY(-4px); 11 | } 12 | .label { 13 | position: relative; 14 | left: -0.304rem; 15 | padding: 0.06rem 0.144rem 0.06rem 0.304rem; 16 | font-size: 0.14rem; 17 | color: #fff; 18 | border-radius: 0 0.03rem 0.03rem 0; 19 | i { 20 | content: ''; 21 | position: absolute; 22 | top: 100%; 23 | left: 0; 24 | width: 0; 25 | height: 0; 26 | background-color: transparent; 27 | border-style: solid; 28 | border-width: 0 0.144rem 0.144rem 0; 29 | border-color: transparent; 30 | border-right-color: currentColor; 31 | filter: brightness(120%); 32 | } 33 | } 34 | .content { 35 | margin: 0 auto; 36 | user-select: text; 37 | text-align: justify; 38 | img { 39 | width: calc(~'100% + .32rem'); 40 | margin-left: -0.16rem; 41 | box-shadow: 0 0 10px #888; 42 | } 43 | p, 44 | ul, 45 | ol, 46 | blockquote { 47 | line-height: 1.6; 48 | font-size: 0.16rem; 49 | } 50 | p { 51 | margin: 0.14rem 0.16rem 0; 52 | } 53 | ol, 54 | ul { 55 | margin: 0.06rem 0.24rem 0.06rem 0.42rem; 56 | } 57 | h2 { 58 | margin: 0.12rem 0.16rem; 59 | padding: 0.08rem 0; 60 | font-size: 0.22rem; 61 | border-bottom: 1px dashed rgba(0, 0, 0, 0.2); 62 | } 63 | h3 { 64 | margin: 0.12rem 0.16rem -0.08rem; 65 | font-size: 0.18rem; 66 | i { 67 | font-size: 0.16rem; 68 | } 69 | } 70 | a { 71 | border-bottom: 1px solid #888; 72 | &:hover { 73 | border-bottom-color: #f6f; 74 | } 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/pages/about/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | padding-bottom: 1rem; 4 | @media (max-width: 900px) { 5 | width: 96%; 6 | .header { 7 | display: block !important; 8 | img { 9 | margin: 0 auto; 10 | } 11 | .info { 12 | margin-top: 0.16rem; 13 | } 14 | } 15 | .concat a { 16 | margin: 0 0.1rem !important; 17 | } 18 | } 19 | .body { 20 | padding: 0.16rem; 21 | border-radius: 0.03rem; 22 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 23 | background-color: rgba(255, 255, 255, 0.6); 24 | .header { 25 | display: flex; 26 | justify-content: flex-start; 27 | align-items: center; 28 | margin-bottom: 0.16rem; 29 | img { 30 | width: 1rem; 31 | height: 1rem; 32 | border-radius: 50%; 33 | border: 0.04rem solid rgba(255, 255, 255, 0.6); 34 | box-shadow: 0 0 10px 2px #888; 35 | transition: transform 1s ease-out; 36 | &:hover { 37 | animation-play-state: paused; 38 | transform: rotateZ(360deg); 39 | } 40 | } 41 | .info { 42 | margin-left: 0.16rem; 43 | & > span { 44 | display: block; 45 | margin: 0.05rem 0.03rem; 46 | i { 47 | margin-right: 0.03rem; 48 | width: 0.16rem; 49 | } 50 | } 51 | } 52 | } 53 | .concat { 54 | display: flex; 55 | justify-content: center; 56 | a { 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | margin: 0 0.3rem; 61 | width: 0.54rem; 62 | height: 0.54rem; 63 | border-radius: 50%; 64 | border: 2px solid rgba(0, 0, 0, 0.08); 65 | box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4); 66 | background: rgba(0, 0, 0, 0.24); 67 | &:hover { 68 | background-color: #faf; 69 | } 70 | img { 71 | width: 0.3rem; 72 | height: 0.3rem; 73 | } 74 | } 75 | } 76 | } 77 | .loading { 78 | margin-top: 1rem; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/components/PostCard/index.less: -------------------------------------------------------------------------------- 1 | .card { 2 | display: inline-block; 3 | margin: 0.06rem 0; 4 | width: 444px; 5 | overflow: hidden; 6 | border-radius: 0.03rem; 7 | background-color: rgba(255, 255, 255, 0.6); 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 9 | transition: all 0.25s ease 0s, transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; 10 | &:hover { 11 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24); 12 | transform: translateY(-6px); 13 | img { 14 | transform: scale(1.06); 15 | } 16 | } 17 | a:hover { 18 | color: #666; 19 | } 20 | .header { 21 | position: relative; 22 | overflow: hidden; 23 | img { 24 | display: block; 25 | width: 100%; 26 | transition: transform 0.6s ease-out; 27 | } 28 | h3 { 29 | position: absolute; 30 | bottom: 0; 31 | padding: 0.12rem 0.14rem; 32 | width: 100%; 33 | font-size: 0.18rem; 34 | font-weight: normal; 35 | color: #eee; 36 | background: rgba(0, 0, 0, 0.4); 37 | } 38 | } 39 | .desc { 40 | padding: 0.12rem 0.14rem; 41 | a > i { 42 | display: none; 43 | } 44 | p { 45 | display: -webkit-box; 46 | -webkit-box-orient: vertical; 47 | -webkit-line-clamp: 3; 48 | line-height: 1.6; 49 | font-size: 0.14rem; 50 | text-align: justify; 51 | text-overflow: ellipsis; 52 | overflow: hidden; 53 | letter-spacing: 0.4px; 54 | } 55 | } 56 | .meta { 57 | padding: 0.12rem 0.14rem; 58 | font-size: 0.14rem; 59 | border-top: 1px solid rgba(0, 0, 0, 0.06); 60 | & > span { 61 | margin-right: 0.06rem; 62 | color: #777; 63 | i { 64 | margin-right: 0.04rem; 65 | padding: 0; 66 | } 67 | span { 68 | padding-right: 0.02rem; 69 | } 70 | .tag { 71 | margin-right: 0.04rem; 72 | } 73 | :last-child { 74 | margin-right: 0; 75 | padding-right: 0; 76 | } 77 | } 78 | :last-child { 79 | margin-right: 0; 80 | padding-right: 0; 81 | } 82 | } 83 | @media (max-width: 1200px) { 84 | width: 96%; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/pages/friend/index.less: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | padding-bottom: 1rem; 4 | @media (max-width: 900px) { 5 | width: 96%; 6 | } 7 | .body { 8 | padding: 0.16rem; 9 | border-radius: 0.03rem; 10 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24); 11 | background-color: rgba(255, 255, 255, 0.6); 12 | animation-duration: 0.6s; 13 | animation-fill-mode: forwards; 14 | .content { 15 | display: flex; 16 | flex-wrap: wrap; 17 | justify-content: space-around; 18 | align-items: center; 19 | padding: 0.16rem 1% 0; 20 | width: 100%; 21 | a { 22 | position: relative; 23 | margin-bottom: 0.16rem; 24 | width: 2rem; 25 | height: 1.12rem; 26 | overflow: hidden; 27 | border-radius: 3px; 28 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.16); 29 | &:hover { 30 | .cover { 31 | transform: scale(1.1); 32 | } 33 | .info { 34 | transform: translateY(-120px); 35 | } 36 | } 37 | .cover { 38 | width: 2rem; 39 | height: 1.12rem; 40 | transition: transform 0.6s ease-out; 41 | } 42 | .info { 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: center; 46 | align-items: center; 47 | position: absolute; 48 | top: 0; 49 | width: 2rem; 50 | height: 1.12rem; 51 | background: rgba(255, 255, 255, 0.4); 52 | transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; 53 | img { 54 | margin-bottom: -0.16rem; 55 | width: 0.5rem; 56 | height: 0.5rem; 57 | border-radius: 50%; 58 | box-shadow: 0 0 9px #666; 59 | z-index: 1; 60 | } 61 | span { 62 | padding: 0.2rem 0 0.08rem; 63 | width: 100%; 64 | text-align: center; 65 | font-size: 0.16rem; 66 | box-shadow: 0 0 6px #888; 67 | background: rgba(255, 255, 255, 0.6); 68 | } 69 | } 70 | } 71 | } 72 | } 73 | .loading { 74 | margin-top: 1rem; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/components/Reward/index.less: -------------------------------------------------------------------------------- 1 | .reward { 2 | position: relative; 3 | margin: 0 auto 0.12rem; 4 | width: 0.4rem; 5 | text-align: center; 6 | &:hover { 7 | width: 3rem; 8 | .reward-body { 9 | animation-name: flip-in-y; 10 | } 11 | } 12 | .reward-icon { 13 | display: inline-block; 14 | width: 0.4rem; 15 | height: 0.4rem; 16 | line-height: 0.4rem; 17 | text-align: center; 18 | font-size: 0.2rem; 19 | border-radius: 50%; 20 | color: #fff; 21 | background-image: linear-gradient(to right, rgba(135, 206, 250, 0.4), rgba(255, 192, 203, 0.8)); 22 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 23 | &:hover { 24 | color: #faf; 25 | } 26 | } 27 | .reward-body { 28 | position: absolute; 29 | top: 0.4rem; 30 | left: 50%; 31 | margin-left: -1.82rem; 32 | padding-top: 0.12rem; 33 | width: 3.64rem; 34 | z-index: 1; 35 | box-sizing: border-box; 36 | animation-duration: 0.6s; 37 | animation-fill-mode: forwards; 38 | animation-name: flip-out-y; 39 | ul { 40 | display: flex; 41 | justify-content: space-between; 42 | padding: 0.12rem 0.16rem; 43 | border-radius: 0.03rem; 44 | background: rgba(255, 255, 255, 0.88); 45 | li { 46 | display: flex; 47 | flex-direction: column; 48 | justify-content: center; 49 | align-items: center; 50 | img { 51 | width: 1.6rem; 52 | height: 1.6rem; 53 | border-radius: 0.03rem; 54 | } 55 | span { 56 | margin-top: 0.1rem; 57 | } 58 | } 59 | &::before { 60 | content: ''; 61 | position: absolute; 62 | top: 0; 63 | left: 0; 64 | right: 0; 65 | margin: 0 auto; 66 | width: 0; 67 | height: 0; 68 | border-left: 0.12rem solid transparent; 69 | border-right: 0.12rem solid transparent; 70 | border-bottom: 0.12rem solid rgba(255, 255, 255, 0.6); 71 | } 72 | } 73 | } 74 | } 75 | 76 | // 打赏动画 77 | @keyframes flip-in-y { 78 | 0% { 79 | transform: perspective(500px) rotateY(70deg); 80 | opacity: 0.2; 81 | } 82 | 30% { 83 | transform: perspective(500px) rotateY(-50deg); 84 | } 85 | 45% { 86 | transform: perspective(500px) rotateY(30deg); 87 | } 88 | 65% { 89 | transform: perspective(500px) rotateY(-20deg); 90 | } 91 | 85% { 92 | transform: perspective(500px) rotateY(10deg); 93 | } 94 | 100% { 95 | transform: perspective(500px) rotateY(0deg); 96 | } 97 | } 98 | 99 | @keyframes flip-out-y { 100 | 0% { 101 | transform: perspective(500px) rotateY(0deg); 102 | } 103 | 50% { 104 | transform: perspective(500px) rotateY(-30deg); 105 | opacity: 1; 106 | } 107 | 100% { 108 | transform: perspective(500px) rotateY(70deg); 109 | opacity: 0; 110 | pointer-events: none; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/components/LazyImage/index.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react' 2 | import classNames from 'classnames/bind' 3 | import styles from './index.less' 4 | 5 | const cx = classNames.bind(styles) 6 | 7 | const Flower = () => ( 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | ) 16 | 17 | const Fingerprint = () => ( 18 |
19 |