爱凉拌菜真是太好了

发表于

由于项目是一个单页面应用， 在进行路由push后滚动条不会刷新，也就是说当前页面和上一个页面的滚动条的相对位置一样。

就像这样

点击阅读全文过后， 进入某个文章的详情页面，按道理来讲是应该从头开始阅读的。 然而滚动条却已经滚动了一部分距离了

当然上面的图只是模拟， 并不是真正的单页面应用。不过单页面应用确实存在这个问题，这个问题产生的原因可能是 document 还是原来的 document，单页面跳转路由其实向这个 document 中添加和删除节点而已，导致浏览器认为你仍然在浏览同一个页面。使用移动端访问https://blog.linyqiang.com时就可以看到“两个页面的” document.documentElement.scrollTop / document.documentElement.scrollHeight 是一样的（因为移动版版面没有采用自定义滚动）

鉴于上述情况，可以让页面中的某一个部分实现滚动(overflow:scroll)。不过这样滚动条只能紧贴在某个滚动元素的右边，影响美观，因此自己实现一个滚动条来模拟滚动

阅读全文 »
爱凉拌菜真是太好了

发表于

首先从服务器请求articles数据，并使用vuex管理

article-list.vue组件中引入articles的Getter，然后使用v-for 将 articles 渲染一遍就行

1
2
3
4
5
6
7
8
9
10
11
//article-list.vue
<article v-for="(item, index) in articles" key={index} class="typo">
  <div class="cover" :style="{backgroundImage: ``}"></div>
  <header>
    <h2 @click="readMore(item)">{{item.title}}</h2>
    <h4>{{new Date(item.time).toLocaleString()}}</h4>
  </header>
  <div v-html="item.abstract" class="article-content">
  </div>
  <footer @click="readMore(item)">继续阅读</footer>
</article>
1
2
3
4
5
6
7
export default {
    computed: {
        ...mapGetters([
            'articles'
        ])
    }
}

接下来就是书写 article 的样式了。不过需要注意的一点是如果 style 使用了 scoped ，那么v-html中的被渲染的那一部分是不能被scoped中的css选择符匹配的。

也就是说不能这样写

1
2
3
4
5
6
7
<style lang="less" scoped>
    .article-content {
        p { /*这个样式将不生效*/
            margin-bottom: 1.5em;
        }
    }
</style>

而是应该这样写

1
2
3
4
5
6
7
<style lang="less">
    .article-content {
        p {
            margin-bottom: 1.5em;
        }
    }
</style>

其实文章详情组件article.vue书写方式和article-list.vue也差不多， 只不过 article-content 的v-html内容从abstract(文章概括)变成了content(正文)

1
2
3
4
5
6
7
8
9
10
11
12
13
//article.vue
<article class="typo">
    <div class="cover" :style="{backgroundImage: `url(${bgImg})`}"></div>
    <header>
        <h2>{{currentArticle && currentArticle.title}}</h2>
        <h4>{{currentArticle.time && new Date(currentArticle.time).toLocaleString()}}</h4>
        <p class="tag">
            <span v-for="(tag, index) in currentArticle.tags">{{tag}}</span>
        </p>
    </header>
    <div v-html="currentArticle && currentArticle.content" class="article-content" ref="content">
    </div>
</article>
爱凉拌菜真是太好了

发表于

使用Vue-cli构建项目，然后在src目录建立相应文件夹

目录结构大概如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
├── dist //dist
│   ├── index.html
│   └── m-index.html
├── package.json
├── package-lock.json
├── README.md
└── src
    ├── api //api接口的请求代码
    │   ├── api.js
    │   └── host.js
    ├── common   //公共代码
    │   ├── js
    │   │   ├── dom.js //部分DOM操作，包含滚动和初始化目录
    │   ├── less
    │   │   ├── code-theme-dracula.css // Markdown 代码主题
    │   │   └── variable.less // less变量
    │   ├── reset.css  // reset
    │   └── typo.css   // 文本排版css
    ├── components    
    │   ├── about   //关于
    │   │   ├── about-m.vue // -m表示移动端组件
    │   │   └── about.vue
    │   ├── archive //归档（标签页面）
    │   │   ├── archive-m.vue
    │   │   └── archive.vue
    │   ├── article //文章展示界面
    │   │   ├── article-m.vue
    │   │   └── article.vue
    │   ├── article-list //文章列表
    │   │   ├── article-list-m.vue
    │   │   └── article-list.vue
    │   ├── back-top //回到顶部
    │   │   ├── back-top-m.vue
    │   │   └── back-top.vue
    │   ├── comment //评论组件
    │   │   └── comment.vue
    │   ├── header  //顶部
    │   │   ├── header-m.vue
    │   │   └── header.vue
    │   ├── main    //main组件
    │   │   ├── main-m.vue
    │   │   └── main.vue
    │   ├── scrollbar //滚动条组件
    │   │   └── scrollbar.vue
    │   └── search //搜索页面
    │       ├── search-m.vue
    │       └── search.vue
    ├── pages //分别存放移动端入口文件和PC端入口文件
    │   ├── index
    │   │   ├── App.vue
    │   │   ├── assets
    │   │   ├── index.html
    │   │   ├── index.js //入口文件
    │   │   ├── router //路由
    │   │   └── store  //vuex
    │   └── m-index
    │       ├── App.vue
    │       ├── assets
    │       ├── m-index.html
    │       ├── m-index.js //入口文件
    │       ├── router
    │       └── store
    └── store //Vuex公共代码
        ├── getters.js
        ├── index.js
        ├── mutations.js
        ├── mutation-types.js
        └── state.js

这个项目构建方式和vue-cli的默认构建方式有差别，原因是我要写两套界面（一套桌面端和一套移动端），而两套界面有一些公共的代码。

使用vue-cli构建多页面参考http://www.jianshu.com/p/0a30aca71b16