产品类型：

静态企业官网

访问

• 洛阳铝脉环保科技——二级域名

以上域名过期，暂时无法访问，类似可访问链接

• 河南祥诚环保科技

技术架构

• vuePress

主题设计

参考vuepress主题开发

1、config.js

const { path } = require("@vuepress/utils");

module.exports = {
  // 站点配置
  lang: "zh-CN",
  title: "洛阳铝脉环保科技有限公司",
  description:
    "洛阳铝脉环保科技有限公司是一家集废弃资源再生利用技术研发、服务、加工、销售一体化的综合运营商。其中致力于废弃铝灰渣的回收再利用、再生氢氧化铝产品的应用技术服务推广，增加废弃资源再利用的附加值。主要产品包括氧化铝、氢氧化铝、再生铝矾土、高炉脱氧剂铝粉、建筑材料、陶瓷原材料等。",
  base: "/",
  // head: [["link", { rel: "icon", href: "/favicon.ico" }]],
  dest: "./dist", //以根目录为基准

  // 主题和它的配置
  theme: path.resolve(__dirname, "./theme/index.js"),
  themeConfig: {
    logo: "/images/logo.png",
    nav: [
      { text: "首页", link: "/" },
      { text: "关于我们", link: "/about/profile" },
      { text: "产品中心", link: "/product/" },
      { text: "业务范围", link: "/business/" },
      { text: "新闻资讯", link: "/news/" },
      // { text: "成功案例", link: "/cases/" },
      { text: "联系我们", link: "/contact/" },
    ],
    bannersLink: [
      "/images/index/banner1.jpg",
      "/images/index/banner2.jpg",
      "/images/index/banner3.jpg",
    ],
    contact: {
      companyName: "洛阳铝脉环保科技有限公司",
      name: "王总",
      address: "河南省洛阳市新安县正村镇白墙村新安垃圾焚烧处理厂北50米",
      telphone: "155 3880 5822",
      domain: "https://lylmhbkj.com",
    },
    footer: {
      record: "豫ICP备2022010155号",
    },
    menu: {
      product: {
        qyhl: "氢氧化铝",
        yhl: "氧化铝",
        zslft: "再生铝矾土",
        gltyj: "高炉脱氧剂",
      },
      cases: {},
      news: {
        industry: "行业资讯",
        company: "公司动态",
      },
      about: {
        profile: "公司简介",
        // thoughts: "企业理念",
      },
    },
  },
  extraWatchFiles: [],
  configureWebpack: {
    resolve: {
      alias: {
        "@images": "/images/",
      },
    },
  },
};

2、theme/index.js

module.exports = (themeConfig, ctx) => {
  const blogOptions = {
    directories: [
      {
        // Unique ID of current classification
        id: "news",
        // Target directory
        dirname: "news",
        // Path of the `entry page` (or `list page`)
        path: "/news/",
        // layout: 'Layout',
        //   itemPermalink: '/:year/:month/:day/:slug',
        itemPermalink: "/:regular",
        pagination: {
          lengthPerPage: 10,
        },
      },
      {
        id: "product",
        dirname: "product",
        path: "/product/",
        itemPermalink: "/:regular",
        layout: "LayoutPic",
        pagination: {
          lengthPerPage: 9,
        },
      },
      {
        id: "cases",
        dirname: "cases",
        path: "/cases/",
        itemPermalink: "/:regular",
        layout: "LayoutPic",
        pagination: {
          lengthPerPage: 9,
        },
      },
      {
        id: "about",
        dirname: "about",
        path: "/about/",
        itemPermalink: "/:regular",
        layout: "About",
        pagination: {
          lengthPerPage: 1,
        },
      },
    ],
    frontmatters: [
      {
        id: "tags",
        keys: ["tags"],
        path: "/tags/",
        layout: "FrontmatterKey", //defaults to `FrontmatterKey.vue`
        frontmatter: {
          title: "分类检索文章",
        },
        // itemlayout: 'Layout',
      },
    ],
  };

  const plugins = [
    [
      "@vuepress/last-updated",
      {
        transformer: (timestamp, lang) => {
          const moment = require("moment");
          moment.locale(lang);
          return moment().format("YYYY-MM-D");
        },
      },
    ],
    ["@vuepress/plugin-nprogress"],
    ["@vuepress/blog", blogOptions],
  ];

  const config = {
    extend: "@vuepress/theme-default",
    globalLayout: "/layouts/GlobalLayout.vue",
    markdown: {
      lineNumbers: true,
      extractHeaders: ["h1", "h2", "h3", "h4"],
    },
    plugins,
  };

  return config;
};

3、theme/enhanceApp.js

import { Carousel, CarouselItem } from "element-ui";
// import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData, // site metadata
}) => {
  Vue.use(Carousel);
  Vue.use(CarouselItem);
  // Vue.use(ElementUI);
  Vue.mixin({
    methods: {
      setCustomPathPrefix(url) {
        const base = siteData.base;
        if (base && base !== "/") {
          return base + url.substr(1);
        }
        return url;
      },
    },
  });
};

上面的代码功能：

• 引入了element-ui的幻灯片组件
• 配置了全局方法setCustomPathPrefix

主要功能设计

1、栏目

• 当前网站的栏目——关于我们、产品中心、业务范围、新闻资讯、联系我们
• 思路——使用不同的路由path
• 实现——搭建独立的Markdown文件夹
• 功能配置——对应theme/index.js中的directories配置

2、栏目的二级分类

• 例子——产品中心的二级分来：氢氧化铝、氧化铝、再生铝矾土、高炉脱氧剂

• 思路——通过设置Markdown的Tag作为区分

  • 如下

  tags:
   - gltyj
  

  • 二级分类的路由里面会包含tags对应的tag，因此建议tag都设置成英文字母
  • 页面展示的分类需要是意义明确的中文或者英文，因此需要设置tag分类匹配数据，对应config.js中themeConfig的menu字段

  menu: {
     product: {
       qyhl: "氢氧化铝",
       yhl: "氧化铝",
       zslft: "再生铝矾土",
       gltyj: "高炉脱氧剂",
     },
     cases: {},
     news: {
       industry: "行业资讯",
       company: "公司动态",
     },
     about: {
       profile: "公司简介",
       // thoughts: "企业理念",
     },
   },
  

• 实现——在模板中实现对应关系的呈现;sonMenuLinkList自己根据当前路由去进行匹配，这里就不放置代码了

<section class="layout">
    <p>{{ currentNavChinese }} | {{ currentNavEnglish }}</p>
    <ul>
        <li
        v-for="(menu, index) in sonMenuLinkList"
        :key="index"
        :class="[{ active: matchSonMenu(menu) }]"
        >
        <a :href="menu[0]"
            ><i class="iconfont icon-xiangyou"></i>
            {{ menu[1] }}
        </a>
        </li>
    </ul>
</section>

3、单页面栏目

• 例如——联系我们
• 实现
  • 在对应的文件夹下面建立README.md(该名称的文件会自动成为该栏目的首页)
  • 如果该页面的样式比较个性化，则需要配置相应的layout模板文件

    ---
    title: "联系我们"
    layout: Contact
    ---
  

  • 在Contact文件中用代码呈现需要展示的内容

4、有二级分类的单页面栏目

• 例如——关于我们
• 思路——栏目的二级分类+单页面栏目
  • 使用tags实现二级分类的链接
  • 使用对应的layout实现内容展示

5、栏目和分类的高亮

这个只需要简单地代码实现即可，不再罗列代码了

网页设计师

君君