|
|
/ @" s/ V. K$ {- W }1 f
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
/ S6 h: z* m" c! ?& p( j; I; I! p
3 K5 K% _" S) B9 e1.下载主题文件
* J& ^2 B& p: X2 c3 [4 ^& u9 {* a2 P1 F" B# X
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。
; g( G% o7 S) b; ]
* F) Q6 R5 S; q8 O' j- x* m4 W6 z2.创建 Typecho 主题目录0 T- e+ ?+ J7 N1 w
8 ]8 u+ L' V% r) D+ R$ J' g r
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。+ h. N* f- p& O- E* W) I- M6 U N; C
; B* g5 w) |7 V, r* T4 ?3.解压主题文件1 j, J& J* W" n' U: \! x0 J
0 k7 r, h( I# t; D将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:( y# c! V( l5 r3 S3 F
0 G1 z$ v2 }7 ?# Lassets/5 b1 Z% A$ X) ^' @) H1 o: f
dist/9 z4 [, p* o. l
inc/' j) l' M/ N) E+ c' f( U- s
node_modules/
5 ~' P3 Y- x* _0 G9 A) cpartials/; f$ X, V7 U1 ?1 G5 Q6 v
templates/
" ]# b0 `- {3 H3 d6 w d.babelrc& p' d7 x" F, e0 c y* |% p
.eslintrc.js
( J" r' g# @8 z1 c% F( X+ `gulpfile.js
* ?& E6 o3 z4 L( O, J$ n3 Opackage.json
& ?8 h- I4 n8 o: f, ~webpack.config.js
/ v' D: F* s* _* B9 f4.修改主题样式表文件) V5 A q8 i' ^& i& P- k9 i
, n- k. F0 Z7 b! q" a' A
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:9 t- r+ @4 l1 R& q. G
3 Q$ [' V) e/ X& }
css$ N+ r. ` k" p z* k; @4 i* H( n
background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');0 Z& |) d% T6 S( f! `
修改为: m/ k% ~/ R8 K
/ [2 l0 _( A. K: v/ Hcss
# p2 D" [- O( @( rbackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
( S* k% W! t0 p8 @9 @5.创建 Typecho 主题配置文件
5 d$ Z; ?% s! L( U. f! ?
1 g2 n/ v3 w9 D# E; Q/ q s在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:! u9 Z: o H3 Z( g: _
& E- G, g' m5 Ophp8 o% ^: ]- ~* d5 I5 T- l
<?php
$ @0 m. R/ f: S) Ureturn array(; x. C, f9 A( n: N, @: l* o
'name' => 'Heropress Pro',
9 V- e) g# u( v( j! d3 ^* Y: _- d4 z 'description' => 'Typecho adaptation of Heropress Pro theme',) h" Q- w5 o% K5 [! ~; d
'version' => '1.0',
8 Q) X/ l8 l n 'author' =>'Your Name',! @* ^; x% r; Y; t( Z7 n* z" x
);% L2 `- t* q+ @, H7 Y
6.配置主题布局文件
3 F# x% r7 e/ g6 a0 d, Z: H5 p, ?5 Y/ S: C* h& b
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
4 c1 L0 Y$ B4 t( @. y( I
2 e' I" W& `4 B2 @/ ~$ mphp9 J, q2 x* Q+ `( R
<?php while ($this->next()): ?>" W7 u7 U0 ~$ i) I& V
<div class="post">
+ l5 }4 U+ C, Y* Z/ |6 l! u <h2 class="post-title">; M4 [- U8 f3 t% ~
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
2 p$ j- J/ G& Y4 \7 E! z </h2>9 `: R6 ~# u7 T. ?: o- n. @1 \
<div class="post-meta">4 \; {: ?* z& ]" S
<span><?php $this->date('F j, Y'); ?></span>
1 c) Z3 E' B5 Y* R <?php if($this->tags): ?>. n& H7 n7 [: C$ `0 j3 l" n
<span class="post-tags">4 ^. n, `) I4 ^* v1 ^# J0 {
<?php $this->tags(', ', true, 'none'); ?>3 P6 V6 g! t( G) [# m( F
</span>' b/ O) z0 S, |3 r
<?php endif; ?>' W- F" p5 Z% v. z+ {; ~
</div>
) D* d0 F. H- Q0 J0 W% R9 a <div class="post-content">' J: t) {4 ~7 ~8 C5 \
<?php $this->content('Read more »'); ?>
2 J5 u$ r& @* A! L7 n2 S </div>" a, E$ n: {2 K/ k( O$ l
</div>
( A+ P- F6 n; w7 Y5 J# F. T. ]: ~<?php endwhile; ?>" H5 m. r) h4 N# x% J
7.调用 Typecho 函数* P z; K) s3 X6 [- v$ f
1 w) G8 \- B- D& g! Q在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:
2 v+ y& [# L% {& ]' {, @: N& ~+ P+ o$ u- [* ?
用 the_title() 替换 get_the_title()。" J2 [$ D7 d0 x& ~/ g3 R& H
$ @, p$ e% r1 a' @& |# r用 the_permalink() 替换 get_permalink()。" E1 T: c1 K! H4 \: y2 o
6 M) y8 M( W% K) A$ D
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。( L/ c- V0 M( ?) v8 V
. y, @3 ~; _+ H' o- N1 x# v& P0 X用 $this->content('Read more »'); 替换 the_content('Read more »')。, ~: z4 P! |, ~* }. p
0 o) |. a! p5 b( d& v) V
8.添加 Typecho 标记2 C) ^3 S" j3 v) n; j& Z+ P5 n
/ g$ C; j( L7 ~" \. m' a4 H' s
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
) `+ I; Q% _3 N3 v5 |- ?6 G4 K m6 }- d7 S' t7 G3 U
php
% \1 Q) e# B0 w& q' x( s2 W& @9 e<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>- j# a: ]$ M- C# r3 G; c
<?php $this->need('header.php'); ?>0 H: v! M+ h6 l9 {" @
<div id="main" class="container">9 Z9 L0 n6 |* |- @ g6 Q
<div id="content" class="row">
9 s1 E# E3 r+ [7 x4 W <?php while ($this->next()): ?>0 i9 M4 P8 a% a w$ z
<div class="col-md-8 col-md-offset-2">& C$ O$ Y/ h* d
<div class="post">
2 A, L7 K% @& z/ |) k <h2 class="post-title">
1 a- |& b8 k0 a9 n5 [ <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>" K( _, h; a# W" ~/ ]% K2 k
</h2>
" Q1 ]' }' O( i) a) ] z: ?( @ <div class="post-meta">: n# d; F1 c9 b( f/ _- l) M% h
<span><?php $this->date('F j, Y'); ?></span>
; t1 _3 T O$ g9 |/ k- v) L$ j <?php if($this->tags): ?>. S6 R0 a( \6 G# o$ Q+ J7 A
<span class="post-tags">
6 m# V4 {, I5 V4 m( z/ W4 l <?php $this->tags(', ', true, 'none'); ?>9 r2 I: Z2 I# g/ h
</span>7 w5 J/ D, m/ \ @) I6 g
<?php endif; ?>
4 h* @, b( W4 r! j# n </div>6 M. ]0 R4 H1 F
<div class="post-content">% q- B3 s. w& s3 o5 V( O' I
<?php $this->content('Read more »'); ?>3 |" h1 [- {/ W! P a
</div>
/ H9 D8 M: H5 l </div>+ H8 v g( E- H4 t) f) w p
</div>
; h1 g- d% j$ F& x1 `$ d4 Y <?php endwhile; ?>
' M# p1 `5 f7 n, I+ R </div>
% D% q: _# u* v8 W</div>
) t9 r S X. k7 |* k# X. I<?php $this->need('footer.php'); ?> {4 _ Z, r# j3 o" M; S0 r
9.调整其他可能需要的文件和代码7 Z d0 E/ D9 n) b% @5 o8 [
; ~# M7 ~& |% i B, x5 t根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
: Y! `! E. ]. w0 x' c, w* U
# }9 w$ f4 i1 jhtml
( Y6 o* C8 J* B8 y<title><?php $this->archiveTitle(array(
5 B$ a& C! R( |2 o9 U' w 'category' => _t('%s'),
3 u! b/ j1 s* R7 W- A3 A0 G' E 'search' => _t('Search "%s"'),9 G+ Y5 g, z+ V3 a' ?
'tag' => _t('Tag "%s"'),
+ s3 _7 ~( ?" X/ m3 V' Q 'author' => _t('Author "%s"'),; T$ u. [" z# i9 Q
'date' => _t('Archive "%s"'),
1 K/ L0 Z) H$ ` r5 _ A 'default' => ''
8 j- ^3 v, g# t$ m) y* g' V" ` ), '', ' - '); ?><?php $this->options->title(); ?>7 W9 e4 c& ^' Y+ O/ k5 P5 z- D
</title>
3 N o K1 t, ?2 @% ]# H10.使用主题' l, D5 A/ k* R9 Q, {* x8 N
' S6 z6 M* @ `, E9 y
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
u% }3 ]! J. W! P& a+ a2 |
+ D( Q* a5 ~6 r以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。5 B9 A( X& b) S3 G) Z+ {. F' ?
; o* q2 l1 _4 d8 o) Q
|
|