|
|
d9 E$ G- _; r( L- S l" H$ N
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
5 T* O2 O6 C" x" l# o% m+ t# ]7 e d
1.下载主题文件; I4 ?$ V2 `0 f9 g$ t. M
1 G( `+ e% S7 I+ _
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。. n# L5 F# E. d4 w1 N1 T; W
! }- D8 X6 x, o' K7 l' h! V
2.创建 Typecho 主题目录1 q9 {+ T& i: P) r. C
+ F( L1 E. w! f9 N3 y, ~8 |; H4 J
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
, y2 t: r8 ^6 i' Z* W" O+ t8 w: ]
3.解压主题文件* x, R4 q6 e% @% `
; S6 I( f8 }9 ^1 y0 N
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:, Q7 @* @- Z- \
. }5 d; w- a; W" C) e
assets/8 S. c" d) Y* [, e0 l- w
dist/
" e1 I/ I4 n, Q+ g! Binc/7 [ I# C4 y8 e. x/ p& U
node_modules/4 u- y% f$ @/ u6 `8 w F4 f) q
partials/
* `* `3 d( n, F1 e E+ {templates/
% k9 ] \8 B8 ?( a, y. G' l) f.babelrc
& g9 D$ |* q: ?* [4 Z.eslintrc.js
3 ^) j. B4 M/ L& X" |: Fgulpfile.js, V! Q$ u. r8 z
package.json8 U4 V& k* f+ W, e$ R+ I
webpack.config.js4 z. \# n3 P) o$ i* D
4.修改主题样式表文件 g: T" N* \, v0 ^4 P7 [' S
0 v! j( _( k! \/ i1 Y
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:$ ?* ~& X, H0 n0 P
+ }, A% K# g, H
css
! ]8 t( m& _* g4 F3 S6 abackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');
4 q w- Q9 t) j# z) e* d1 {修改为:1 X* K% Z# X, z( \- M
7 ~3 q! c- j9 n% W1 y: _% ?% [css; Y" b0 z' g4 p$ }- ^
background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');6 y) E' h( x6 V" `! z
5.创建 Typecho 主题配置文件2 K( c# C. h9 R) G
5 E6 w9 {" D4 i( _
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
! e; C1 Z. z0 Y% l* S. S' f; b: H$ X, N& E+ O
php" c/ @/ Q; u3 q$ C
<?php% U9 l' m! }* B! N: a7 I' A" C
return array(
' C6 T* v3 H) S 'name' => 'Heropress Pro',
8 d: U3 U# ~' T/ q6 h) n" c( f 'description' => 'Typecho adaptation of Heropress Pro theme',
6 e+ t4 |: `& {( q 'version' => '1.0',
( `. ]0 _: t. r' ^; D 'author' =>'Your Name',
9 F- U& T' H N7 s);+ S K5 }+ j+ c+ t& h3 I
6.配置主题布局文件; G' |6 h: Y0 i5 Y/ J7 x( N4 e9 _. F# ~
) o: M; Q1 f8 S3 f9 z. {7 o
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
3 B. L' V. o& Z) ~$ L6 c- a T' Y( f, ^ u) P+ ^! R' R
php
- R0 W/ M( a( ^5 g0 O8 f<?php while ($this->next()): ?>
" h! J5 J% t( a3 B% I, U<div class="post">7 O' N: f7 T" C! k' [
<h2 class="post-title">7 u4 s% }- V, h6 b, h* t4 O; _6 b
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
# c& l3 G7 x8 o- h. O3 W8 G </h2>0 x6 R& A* Y2 `5 l
<div class="post-meta">
' |* f t9 f& a <span><?php $this->date('F j, Y'); ?></span>) e$ V2 o0 a, H- q
<?php if($this->tags): ?>
) y. L2 A6 G+ y) z' C <span class="post-tags">: |0 W! j( y8 y) K# S* C
<?php $this->tags(', ', true, 'none'); ?>
. x9 {1 B5 O& m2 h3 X: ^; z, w </span>; @! L5 ^' F6 L8 F
<?php endif; ?>+ _5 }% }7 V+ F
</div> m/ y) c" `, H8 l$ J
<div class="post-content">( Z4 n) U2 X, X* \0 k$ E+ G! I
<?php $this->content('Read more »'); ?>
2 T7 Z! r- u7 b! h+ s </div>
$ L% A" p; L/ c+ ?7 u</div>
1 d6 F) @1 V7 j' n<?php endwhile; ?>
3 O% z2 C; {# a: w3 z+ P3 o1 G7.调用 Typecho 函数
* j ~1 N. T7 w7 F* D
* J! g Z+ F6 }! x9 B在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如: q! M0 b7 K) b7 }$ D( J5 N; B
/ A% Y3 K' O+ L& u' e4 z/ \8 @6 |用 the_title() 替换 get_the_title()。
5 ^ l% c9 L0 E' N7 V: @, |/ ?
7 ^$ `( s f6 d7 P4 Z# F! f( `用 the_permalink() 替换 get_permalink()。
3 r! P5 Q6 p! _. j S; T2 T0 q2 D( @: A. o
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
& _1 a$ b6 T2 B6 N- z( U
7 Z5 Y, P, P$ z) A" v5 a: `用 $this->content('Read more »'); 替换 the_content('Read more »')。
0 b+ A, `. t7 ?4 \" R$ W! x
c9 I7 J. d, n* Q+ v8.添加 Typecho 标记
9 E1 F2 l, X) q8 P% Y
) q/ N9 v% g5 Y9 v- C在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:# P# H/ D- W0 M& o. p* l; ~
: ^) f" u" p n. g4 l7 Aphp- v6 l+ ^4 I: r) g- P3 V z W
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
3 G' r5 Y& q/ \' E6 b3 x/ M<?php $this->need('header.php'); ?>5 x9 a; s- l) o* S5 W
<div id="main" class="container">
- E8 R. X, J! c1 k <div id="content" class="row"> B5 f/ o3 s, O$ H
<?php while ($this->next()): ?>
% j9 q9 v8 v1 N' k' {' U# z2 |2 C/ Y <div class="col-md-8 col-md-offset-2">6 h$ s3 X" t) g0 B
<div class="post">( Q( K9 V! h6 ]/ U. Q. g
<h2 class="post-title">
$ A- A3 r6 \. V <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a># X/ I f4 ]4 H3 g; o$ m% G
</h2>8 S, H1 [: @/ _
<div class="post-meta">! E2 o# J% V- h
<span><?php $this->date('F j, Y'); ?></span>1 \1 |* u. h" d5 Q f8 q) ?
<?php if($this->tags): ?>
6 A2 k3 C9 s0 R! R3 N% L <span class="post-tags">6 E) |" g& e7 ^, N: d+ a& n( h1 ~$ v
<?php $this->tags(', ', true, 'none'); ?>( e8 S5 B+ F l6 R5 c
</span>
4 k3 ?# n8 Q4 w S7 X <?php endif; ?>9 g% ?5 D$ @% [8 J3 M) t
</div>& T7 O% D- g; i, B1 x2 L
<div class="post-content">' `: h" U7 F* o- o4 P) n
<?php $this->content('Read more »'); ?>% V. D2 h0 t; E/ u* @2 U
</div>
! j$ x0 [" H% i! {' F3 }7 Q </div>* r8 c8 V, A2 \, f, D
</div>' q. N, W0 t! N8 @# D+ ?; z2 \
<?php endwhile; ?>
( c/ @% b& y: U3 `1 g" K </div>
6 u1 G. t; w0 X4 Y2 ?0 F</div>
" I' z Y7 K. c0 w5 h3 \<?php $this->need('footer.php'); ?>) m9 m& i% U' p! X
9.调整其他可能需要的文件和代码
! b" h& ?: o1 i- E V: ]$ A
# v! T) O! X% w- Q& S3 V9 r根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
0 ^8 z6 L# Z5 w' L
/ F7 t5 `) A O# x# v$ X0 m* [% \html
$ C4 p) W0 R# i& e# w C" _6 W& n<title><?php $this->archiveTitle(array(
0 O! b0 U! u7 I+ ^# j! @% L 'category' => _t('%s'),
/ Z1 `: p! O0 f4 O# P 'search' => _t('Search "%s"'),+ z$ c$ o8 I# |5 D. c
'tag' => _t('Tag "%s"'),( [) N( A7 ^- {5 T0 ]
'author' => _t('Author "%s"'),3 J e5 A2 i y9 F
'date' => _t('Archive "%s"'),
+ K9 @# |" N3 M6 m, r' U6 [ 'default' => ''; m# E$ e# W' ~; ^1 H: @
), '', ' - '); ?><?php $this->options->title(); ?>% r$ D* f/ T- R# {$ G) Z, D& y
</title>
/ O( ]3 `: L' ?$ \8 j, C: [7 y2 C10.使用主题
* C, ^& {$ `& F5 V* i9 X% F
( j- i3 m+ X$ q6 A, A; ]登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
- o/ T/ \3 e( o1 r2 C
7 `6 @( _9 N4 X以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
* k* i. h" B" @# u9 @0 @6 c/ f& p# v$ d% j7 x
|
|